zoukankan      html  css  js  c++  java
  • bootstrap DataTable绑定数据带服务器分页

    <!-- DataTables -->  这两个文件在我的文件夹里面
    <script src="~/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="~/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

    <table id="BZWH_table" class="table table-bordered table-hover"> <thead> <tr class="first_trbg"> <th>标准类别</th> <th>产品名称</th> <th>标准代号</th> <th>备注</th> <th>操作</th> </tr> </thead> <tbody></tbody> <tfoot> </tfoot> </table>
     
        function getbzwhlist(pageIndex, pageSize) {
            var pc = 0;
             $('#BZWH_table').DataTable({
                "ajax": function (data, callback, settings) {
                    var sname = $("#bzwh_txtname").val();
                    var category_id = parseInt($("#bzgl_seltype").val());
                    if (category_id == -1) {
                        category_id = 0;
                    }
                    pageIndex = (data.start / pageSize) + 1;
                    var params = {   //这是自定义参数
                        pageIndex: pageIndex,
                        pageSize: pageSize,
                        OrderField: "id asc",  
                        category_id: category_id,
                        sname: sname
                    };
    
                    var url = "/api/stand/GetList";   //接口地址
                    ajaxPost(url, params, function (rs) {
                        var fData = {
                            draw :0,
                            recordsTotal: 0,
                            recordsFiltered: 0,
                            data: []
                        };
                        if (!rs.status) {
                            layer.msg("请求出错,请稍后重试" + rs.errmsg, { icon: 2, time: 1000 });
                            callback(fData);
                            return;
                        }
                        if (rs.data == null) {
                            $('#BZWH_table tbody tr').remove();
                            $('#loading').remove();
                            callback(fData);
                            return;
                        }
                        $('#loading').remove();
                        var gearDatas = [];
                        for (var i = 0; i < rs.data.length; i++) {
                            var datwwa = new TData(rs.data[i].cname, rs.data[i].sname, rs.data[i].code, rs.data[i].remark, rs.data[i].id, rs.data[i].category_id)
                            gearDatas.push(datwwa);
                        }
                        pc = rs.total;
                        fData.data = gearDatas;
                        fData.recordsTotal = pc;
                        fData.recordsFiltered = pc;
                        callback(fData);
    
                    });
                },
                "serverSide": true,
                "pagingType": "full_numbers",
                "pageLength": pageSize,
                "processing": true, 
                "destroy": true,
                'columns': [{
                    data: 'cname'
                }, {
                    data: 'sname'
                }, {
                    data: 'code'
                }, {
                    data: 'remark'
                },
                {
                    data: 'operate',
                     '140px'
                }],
                'paging': true,
                'lengthChange': false,
                'searching': false,
                'ordering': false,
                'autoWidth': false,
                "language": {
                    "url": "/Scripts/language/chinese.json"    //Table国际化  在网上很短直接下载用
                },
             });
        }
    
        // 数据对象
        function TData(cname, sname, code, remark, id, category_id) {
            this.id = id;
            this.category_id = category_id;
            this.cname = cname;
            this.sname = sname;
            this.code = code;
            this.remark = remark;
            this.operate = function () {
                return "<a href='@Url.Action("Add","Text")?id=" + this.id + "&category_id=" + this.category_id + "' class='btn_editcolor'>编辑</a>&nbsp;<a onclick='BZWHDel($(this))' class='btn_delcolor' tag=" + this.id + ">删除</a>";
            }
        }

    效果图:

    稍做修改,可以封装成一个方法:

    function createTable(id, colums, tCallback) {
        $("#" + id).DataTable({
            "ajax": function (data, callback, settings) {
                tCallback(data, callback, settings);
            },
            "serverSide": true,
            "pagingType": "full_numbers",
            "pageLength": 10,
            "processing": true,
            "destroy": true,
            'columns': colums,
            'paging': true,
            'lengthChange': false,
            'searching': false,
            'ordering': false,
            'autoWidth': false,
            "language": {
                "url": "/Scripts/language/chinese.json"    //Table国际化
            }
        });
    };

    调用就更简单了:

    function getbzwhlist(pageIndex, pageSize) {

    var colums = [{
    data: 'cname'
    }, {
    data: 'sname'
    }, {
    data: 'code'
    }, {
    data: 'remark'
    }, {
    data: 'operate',
    '80px'
    }];


    createTable("flwh_table", colums, function (data, callback, settings) { var pc = 0; var name = $("#flwhTypename").val(); pageIndex = (data.start / pageSize) + 1; var params = { pageIndex: pageIndex, pageSize: pageSize, OrderField: 'id asc', tc_name: name } var url = "/api/test/GetList"; ajaxPost(url, params, function (data) { //ajaxPost() 也是封装ajax请求的公用方法 var fData = { draw: 0, recordsTotal: 0, recordsFiltered: 0, data: [] }; if (!data.status) { layer.msg("请求出错,请稍后重试" + data.errmsg, { icon: 2, time: 1000 }); callback(fData); return; } if (data.data == null) { callback(fData); return; } var gearDatas = []; for (var i = 0; i < data.data.length; i++) { var datwwa = new FLData(data.data[i].tc_name, data.data[i].remark, data.data[i].id); gearDatas.push(datwwa); } pc = data.total; fData.data = gearDatas; fData.recordsTotal = pc; fData.recordsFiltered = pc; callback(fData); }); })}
  • 相关阅读:
    dvwa-Brute Force
    i春秋 Crypto模块rsa wrtiteup
    栈-函数调用
    Ymodem协议详解
    JAVA 传输post传输长字符、数据编码解码 反序列化字符串
    jquery datatable 全选,反选 参考文档
    java中bimface 在线申请token。模型视角 模型批注处理
    C# Winform 子窗体提交后更新父窗体datagridview数据(事件和委托)
    JAVA 两个时间 相差的 小时,天数,分钟
    JAVA 使用注解lombok@Builder和@Data,primary not found default constructor
  • 原文地址:https://www.cnblogs.com/bin521/p/8532055.html
Copyright © 2011-2022 走看看