Datatables 服务器端分页

最新推荐文章于 2025-05-09 18:24:41 发布

xuconghua

最新推荐文章于 2025-05-09 18:24:41 发布

阅读量2.1k

点赞数

分类专栏： Web 前端文章标签： datatables

本文链接：https://blog.youkuaiyun.com/xuconghua/article/details/51750615

版权

Web 前端专栏收录该内容

10 篇文章

订阅专栏

我要说两句
前端代码
后端代码

我要说两句

本人上手Web也是时间不长，然后又想快速的出成果，所以就去问度娘和谷歌，最后就选择了前端用bootstrap +jquery，后端直接MVC，在前端能用插件就绝不自己写，然后机缘巧合之下我和 datatables相遇了，用着非常顺手，但是遇到服务器端分页却让我抓狂了2天

前端代码

参数说明
“bServerSide”: true, //指定从服务器端获取数据
“sAjaxSource”: surl, //获取数据的url (一般是action)
“fnServerData”: function(){…} //获取数据的处理函数
sSource：”ControllerName/ActionName” //AjaxSource中指定的地址
aoData： //DataTables定义的参数，是一个数组
fnCallback：//服务器返回数据后的处理函数,不一定要实现它，但是你一定要将它放在“fnServerData”参数中

var table;
$(document).ready(function () {
    table = $('#tableGetListCustomerId').DataTable({
        "language": {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            }
            },
        "sAjaxSource":"ControllerName/ActionName",
        "searching": false,
        "serverSide": true,
        "fnServerData": function (sSource, aoData, fnCallback) {
            aoData.push({ "name": "CUSTOMER_ID", "value": $("#txtCustomerId").val() });
            aoData.push({ "name": "CUSTOMER_NAME", "value": $("#txtCustomerName").val() });
            $.ajax({
                "dataType": 'json',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback

            })
        },
        "paging": true,
        "lengthChange": false,
        "ordering": true,
        "iDisplayLength": 10,
        "info": true,
        "autoWidth": false,
        "columns": [
    { "data": "clumnName1" },
    { "data": "clumnName2" }
        ]
    });
    $('#tableGetListCustomerId tbody').on('click', 'tr', function () {
        if ($(this).hasClass('row_selected')) {
            $(this).removeClass('row_selected');
        }
        else {
            table.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
        }
    });
});

后端代码

public JsonResult GetListPage(string CUSTOMER_ID, string CUSTOMER_NAME, int sEcho, int iDisplayStart, int iDisplayLength)
{
int iTotalRecords = 0;
int iTotalDisplayRecords=0;
List queryList = new List();
queryList = daoCustomerId.CustomerIdList().Where(a => a.CUSTOMER_ID != “”).ToList();
iTotalRecords = queryList.Count;
if (!string.IsNullOrEmpty(CUSTOMER_ID))
queryList = queryList.Where(a => a.CUSTOMER_ID.Contains(CUSTOMER_ID)).ToList();
if (!string.IsNullOrEmpty(CUSTOMER_NAME))
queryList = queryList.Where(a => a.CUSTOMER_NAME.Contains(CUSTOMER_NAME)).ToList();
queryList = queryList.Skip(iDisplayStart).Take(iDisplayLength).ToList();
iTotalDisplayRecords = queryList.Count;
return Json(new { draw = sEcho, recordsFiltered = iTotalRecords, recordsTotal = iTotalDisplayRecords, data = queryList }, JsonRequestBehavior.AllowGet);
}