Ajax+Bootstrap实现分页、搜索、列选择

最新推荐文章于 2024-04-06 18:16:51 发布

黑客知识

最新推荐文章于 2024-04-06 18:16:51 发布

阅读量538

点赞数

文章标签： bootstrap ajax

本文链接：https://blog.csdn.net/zhiboqingyun/article/details/117690287

版权

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>项目列表</title>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1/css/bootstrap-table.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1/js/jquery.js' %}"></script>
    <script src="{% static 'bootstrap-3.4.1/js/popper.min.js' %}"></script>
    <script src="{% static 'bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'bootstrap-3.4.1/js/bootstrap-table.min.js' %}"></script>
    <script src="{% static 'bootstrap-3.4.1/js/bootstrap-table-zh-CN.js' %}"></script>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
        .titles {
            float: right;
            clear: both;
        }
    </style>
</head>

<body>
<div id="toolbar">
    <label style="margin: auto;font-size: 15px">请选择产线 :&nbsp</label>
    <select class="form-control btn btn-group btn-outline-secondary" name="line"
            style="height:36px;width: 136px" id="line_info">
        <option value="DVE5.2NC-L3">DVE5.2NC-L3</option>

    </select>&nbsp&nbsp
    <label style="margin: auto;font-size: 15px">开始日期 :&nbsp</label>
    <input class="btn btn-sm btn-outline-secondary" type="month" name="start_date"
           id="start_date" value=""
           min="2019-01" style="height:36px;width: 140px">
    <label style="margin: auto;font-size: 15px">&nbsp结束日期 :&nbsp</label>
    <input class="btn btn-sm btn-outline-secondary" type="month" name="end_date"
           id="end_date" value=""
           min="2019-01" max=" " style="height:36px;width: 140px">
    <button class="btn btn-sm btn-outline-secondary" οnclick="loadData()" style="height:36px;width: 140px">查询</button>
</div>
<div class="table-demo">
    <table id="table"></table>
</div>
<script>
    //设置需要显示的列
    var columns = [
        {
            field: 'id',
            title: '编号'
        },
        {
            field: 'line',
            title: '产线'
        },
        {
            field: 'station',
            title: '工位'
        },
        {
            field: 'fault_type',
            title: '错误类型'
        },
        {
            field: 'content',
            title: '内容'
        },
        {
            field: 'measures',
            title: '措施'
        },
        {
            field: 'date_time',
            title: '时间'
        }];

    var data = [{
        "id": 1,
        "line": "dve52l1",
        "station": 1,
        "fault_type": "错误",
        "content": 1,
        "measures": 1,
        "date_time": 1,
    }, {
        "id": 2,
        "line": "dve52l2",
        "station": 2,
        "fault_type": "错误",
        "content": 2,
        "measures": 2,
        "date_time": 2,
    }, {
        "id": 3,
        "line": "dve52l3",
        "station": 3,
        "fault_type": "错误",
        "content": 3,
        "measures": 3,
        "date_time": 3,
    }, {
        "id": 4,
        "line": "dve52l4",
        "station": 4,
        "fault_type": "错误",
        "content": 4,
        "measures": 4,
        "date_time": 4,
    }, {
        "id": 5,
        "line": "dve52l5",
        "station": 5,
        "fault_type": "错误",
        "content": 5,
        "measures": 5,
        "date_time": 5,
    }, {
        "id": 6,
        "line": "dve52l6",
        "station": 6,
        "fault_type": "错误",
        "content": 6,
        "measures": 6,
        "date_time": 6,
    }, {
        "id": 7,
        "line": "dve52l7",
        "station": 777777,
        "fault_type": "错误",
        "content": 7,
        "measures": 7,
        "date_time": 7,
    }];

    //bootstrap table初始化数据
    $('#table').bootstrapTable({
        toolbar: "#toolbar",
        data: data,
        dataType: "json",
        height: 700,
        search: "true",
        showColumns: true,
        pagination: true, // 是否分页
        pageNumber: 2,
        pageSize: 3,
        pageList: "[3,6,9]",
        paginationHAlign: "left",
        paginationDetailHAlign: "right",
        sortable: true, // 是否启用排序
        columns: columns,
    });

    function loadData() {
        $.ajax({
            type: "GET",
            url: '{% url 'forecastforward' %}',
            dataType: 'json',
            data: {
                "line": document.getElementById("line_info").value,
                "start_date": document.getElementById("start_date").value,
                "end_date": document.getElementById("end_date").value
            },
            success: function (data) {
                var newData = data;
                $('#table').bootstrapTable('load', newData);
            },
        })
    }
</script>
</body>
</html>

黑客知识

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax+Bootstrap实现分页、搜索、列选择

{% load static %}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>项目列表</title> <link rel="stylesheet" href="{% static 'bootstrap-3.4.1/css/bootstrap.min.css' %}"> <link rel
复制链接

扫一扫