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',
                width: '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',
width: '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);
                    });
                })}