Jquery.Datatable 控件后端分页实例 （后台使用ashx、aspx-webmethod）

本实例引用Datatable版本号： 1.10.16

一、传到aspx后台（webmethod）

1、添加js、css引用：

    <link href="/Scripts/ThirdLibs/DataTables/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="/Scripts/ThirdLibs/DataTables/jquery.dataTables.min.js"></script>

　2、前台代码：

<div style="padding: 10px;">
        <input type="text" id="nickname" class="form-control" />
        <input type="button" value="搜索" id="search" class="btn btn-primary" />
    </div>

    <table id="tbSubscirptionReport" class="table table-hover table-striped table-bordered table-choose single-check">
        <thead>
            <tr>
                <th style="width: 5%">序号</th>
                <th style="width: 15%">表单号</th>
                <th style="width: 20%">资源名称</th>
                <th style="width: 10%">资源类型</th>
                <th style="width: 10%">审批状态</th>
                <th style="width: 10%">申请人姓名</th>
                <th style="width: 15%">申请时间</th>
                <th style="width: 15%">操作</th>
            </tr>
        </thead>

    </table>

    <%--js脚本--%>
    <script>

        var myTable;
        $(function () {
            myTable = initializeTable();

            $("#search").click(function () {
                reloadTable();
            });
        });

        function initializeTable() {

            var dutyTable = $("#tbTestReport").dataTable({
                /****************************************表格数据加载****************************************************/
                "serverSide": true,
                "ajax": function (data, callback, settings) {
                    //封装请求参数
                    var param = {};
                    param.draw = data.draw;
                    param.length = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                    param.start = data.start;//开始的记录序号
                    param.pageIndex = (data.start / data.length) + 1;//当前页码
                    param.search = $("#searchStr").val();
                    //ajax请求数据
                    $.ajax({
                        type: "post",
                        //url: "/ajaxpage/testdatatablehandler.ashx?cmd=getTestData",
                        url: "testdatatable.aspx/test",
                        contentType: "application/json;charset=utf-8",//设置内容类型，即在页面中传递的方式及编码方式
                        cache: false, //禁用缓存
                        data: JSON.stringify({ data: param }), //传入组装的参数
                        dataType: "json",
                        success: function (resultData) {
                            var result = JSON.parse(resultData.d);
                            //setTimeout仅为测试延迟效果
                            setTimeout(function () {
                                //封装返回数据
                                var returnData = {};
                                returnData.draw = result.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
                                returnData.recordsFiltered = result.recordsFiltered;//后台不实现过滤功能，每次查询均视作全部结果
                                returnData.data = result.data;//返回的数据列表

                                //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                                //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                                callback(returnData);
                            }, 200);
                        }
                    });
                },

                "columns": [//列绑定
                    { "序号": "" },
                    { "data": "ApplyNumber" },
                    { "data": "ResourceName" },
                    { "data": "ResourceType" },
                    { "data": "ApprovalStatus" },
                    { "data": "ApplicantName" },
                    { "data": "CreateTime" },
                    { "操作": "" }
                ],
                "columnDefs": [//列定义
                    {
                        "targets": [0],
                        "data": "ID",
                        "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                            //return "<input type='checkbox' value='" + data + "' name='DataID'>";
                            return "";
                        }
                    },
                    {
                        "targets": [6],
                        "data": "CreateTime",
                        "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                            if (data == null || data.trim() == "") { return ""; }
                            else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }
                        }
                    },
                    {
                        "targets": [7],
                        "data": "ID",
                        "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                            return "<a style='text-decoration:none' class='btn btn-info' onclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i class='Hui-iconfont'>编辑</i></a>" +
                                " <a style='text-decoration:none' class='btn btn-info' onclick=article_del(this,'" + data + "') href='javascript:;' title='删除'><i class='Hui-iconfont'>删除</i></a>";
                        }
                    },

                    { "orderable": false, "targets": [0, 7] },// 是否排序
                    //{ "visible": false, "targets": [3, 5] }//是否可见
                ],
                "rowCallback": function (row, data, displayIndex) {//行定义
                    $(row).attr("class", "text-c");

                },
                "drawCallback": function (settings, json) { //每次画完后调用

                    var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
                    this.api().column(0).nodes().each(function (cell, i) {
                        //翻页序号连续
                        cell.innerHTML = startIndex + i + 1;
                    });
                },
                /****************************************表格数据加载****************************************************/
                /****************************************表格样式控制****************************************************/
                "dom": "t<'dataTables_info'il>p",//表格布局
                "language": {//语言国际化
                    "lengthMenu": "每页 _MENU_ 条",
                    "zeroRecords": "没有找到记录",
                    "info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",
                    "infoEmpty": "无记录",
                    "paginate":
                    {
                        "first": "首页",
                        "previous": "前一页",
                        "next": "后一页",
                        "last": "末页"
                    }
                },
                "pagingType": "full_numbers",//分页格式
                "processing": true,//等待加载效果
                "ordering": false,//排序功能
                /****************************************表格样式控制****************************************************/
            });

            return dutyTable;
        }
        //当你需要多条件查询，你可以调用此方法，动态修改参数传给服务器
        function reloadTable() {
            var oSettings = myTable.fnSettings();
            myTable.fnClearTable(0);
            myTable.fnDraw();
        }
    </script>

　3、后台代码（aspx）

 [WebMethod]
        public static string Test(TestDataTable data) {

            #region ===代码===
            int totalCount = ;//所有的
            //int selCount = 0;//根据条件搜索到的 

            System.Linq.Expressions.Expression<Func<ResourceApply, Boolean>> p = a => true;
            if (!string.IsNullOrEmpty(data.search))
            {
                p = a => a.ResourceName.ToUpper().Contains(data.search.ToUpper());
            }

            var list = new ResourceApplyService().GenericService.GetListByPage(data.length, data.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();
            data.recordsFiltered = totalCount;
            data.recordsTotal = totalCount;
            data.data = list;

            JavaScriptSerializer jss = new JavaScriptSerializer();
            return jss.Serialize(data);
            #endregion ===代码===

        }

　4、　Model TestDataTable

 　　/// <summary>
     /// JqueryDataTable插件交互的DT格式的数据(DT参数区分大小写)
     /// </summary>
     public class TestDataTable
     {
         /// <summary>
         /// 请求次数（前端==》后端）
         /// </summary>
         public int draw { get; set; }

         /// <summary>
         /// 总记录数（前端《==后端）
         /// </summary>
         public int recordsTotal { get; set; }

         /// <summary>
         /// 过滤后的总记录数（前端《==后端）
         /// </summary>
         public int recordsFiltered { get; set; }

         /// <summary>
         /// 记录开始索引（前端==》后端）
         /// </summary>
         public int start { get; set; }

         /// <summary>
         /// PageIndex（前端==》后端）
         /// </summary>
         public int pageIndex { get; set; }

         /// <summary>
         /// PageSize（前端==》后端）
         /// </summary>
         public int length { get; set; }
         public string search { get; set; }
         /// <summary>
         /// 集合分页数据（前端《==后端）
         /// </summary>
         public System.Collections.IList data { get; set; }
     }

二、ashx 版

1、前端代码：

其他都一样，js略有不同

     <%--js脚本--%>
     <script>

         var myTable;
         $(function () {
             myTable = initializeTable();

             $("#search").click(function () {
                 reloadTable();
             });
         });

         function initializeTable() {

             var dutyTable = $("#tbTestReport").dataTable({
                 /****************************************表格数据加载****************************************************/
                 "serverSide": true,
                 "ajax": function (data, callback, settings) {
                     //封装请求参数
                     var param = {};
                     param.draw = data.draw;
                     param.length = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                     param.start = data.start;//开始的记录序号
                     param.pageIndex = (data.start / data.length) + 1;//当前页码
                     param.search = $("#searchStr").val();
                     //ajax请求数据
                     $.ajax({
                         type: "post",
                         url: "/ajaxpage/testdatatablehandler.ashx?cmd=getTestData",
                         //url: "testdatatable.aspx/test",
                         //contentType: "application/json;charset=utf-8",//设置内容类型，即在页面中传递的方式及编码方式
                         cache: false, //禁用缓存
                         data: { "data": JSON.stringify( param)}, //传入组装的参数
                         dataType: "json",
                         success: function (result) {
                             //var result = JSON.parse(resultData.d);
                             //setTimeout仅为测试延迟效果
                             setTimeout(function () {
                                 //封装返回数据
                                 var returnData = {};
                                 returnData.draw = result.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                 returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
                                 returnData.recordsFiltered = result.recordsFiltered;//后台不实现过滤功能，每次查询均视作全部结果
                                 returnData.data = result.data;//返回的数据列表

                                 //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                                 //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                                 callback(returnData);
                             }, 200);
                         }
                     });
                 },

                 "columns": [//列绑定
                     { "序号": "" },
                     { "data": "ApplyNumber" },
                     { "data": "ResourceName" },
                     { "data": "ResourceType" },
                     { "data": "ApprovalStatus" },
                     { "data": "ApplicantName" },
                     { "data": "CreateTime" },
                     { "操作": "" }
                 ],
                 "columnDefs": [//列定义
                     {
                         "targets": [0],
                         "data": "ID",
                         "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                             //return "<input type='checkbox' value='" + data + "' name='DataID'>";
                             return "";
                         }
                     },
                     {
                         "targets": [6],
                         "data": "CreateTime",
                         "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                             if (data == null || data.trim() == "") { return ""; }
                             else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }
                         }
                     },
                     {
                         "targets": [7],
                         "data": "ID",
                         "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                             return "<a style='text-decoration:none' class='btn btn-info' onclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i class='Hui-iconfont'>编辑</i></a>" +
                                 "&nbsp;<a style='text-decoration:none' class='btn btn-info' onclick=article_del(this,'" + data + "') href='javascript:;' title='删除'><i class='Hui-iconfont'>删除</i></a>";
                         }
                     },

                     { "orderable": false, "targets": [0, 7] },// 是否排序
                     //{ "visible": false, "targets": [3, 5] }//是否可见
                 ],
                 "rowCallback": function (row, data, displayIndex) {//行定义
                     $(row).attr("class", "text-c");

                 },
                 "drawCallback": function (settings, json) { //每次画完后调用

                     var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
                     this.api().column(0).nodes().each(function (cell, i) {
                         //翻页序号连续
                         cell.innerHTML = startIndex + i + 1;
                     });
                 },
                 /****************************************表格数据加载****************************************************/
                 /****************************************表格样式控制****************************************************/
                 "dom": "t<'dataTables_info'il>p",//表格布局
                 "language": {//语言国际化
                     "lengthMenu": "每页 _MENU_ 条",
                     "zeroRecords": "没有找到记录",
                     "info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",
                     "infoEmpty": "无记录",
                     "paginate":
                     {
                         "first": "首页",
                         "previous": "前一页",
                         "next": "后一页",
                         "last": "末页"
                     }
                 },
                 "pagingType": "full_numbers",//分页格式
                 "processing": true,//等待加载效果
                 "ordering": false,//排序功能
                 /****************************************表格样式控制****************************************************/
             });

             return dutyTable;
         }
         //当你需要多条件查询，你可以调用此方法，动态修改参数传给服务器
         function reloadTable() {
             var oSettings = myTable.fnSettings();
             myTable.fnClearTable(0);
             myTable.fnDraw();
         }
     </script>

2、后台代码：

 string json = "";
         HttpContext context;
         JavaScriptSerializer jss = new JavaScriptSerializer();
         Dictionary<string, object> dic = new Dictionary<string, object>();
         public void ProcessRequest(HttpContext context)
         {
             this.context = context;
             context.Response.ContentEncoding = Encoding.GetEncoding("utf-8");//避免出现乱码
             //接收浏览器 get/post 过来的参数cmd
             string cmd = context.Request["cmd"].ToString();
             switch (cmd)
             {
                 case "getTestData":
                     json = GetUserList();
                     break;
             }
             context.Response.Write(json);
         }
         /// <summary>
         /// 获得用户列表
         /// </summary>
         /// <param name="index"></param>
         /// <returns></returns>
         public string GetUserList()
         {
             #region ===代码===

             var dataStr = context.Request["Data"];
             if(string.IsNullOrEmpty(dataStr))
             {
                 return "";
             }
             TestDataTable myData = Newtonsoft.Json.JsonConvert.DeserializeObject<TestDataTable>(dataStr);

             int totalCount = ;//所有的
             //int selCount = 0;//根据条件搜索到的 

             System.Linq.Expressions.Expression<Func<ResourceApply, Boolean>> p = a => true;
             if (!string.IsNullOrEmpty(myData.search))
             {
                 p = a => a.ResourceName.ToUpper().Contains(myData.search.ToUpper());
             }

             var list = new ResourceApplyService().GenericService.GetListByPage(myData.length, myData.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();
             myData.recordsFiltered = totalCount;
             myData.recordsTotal = totalCount;
             myData.data = list;

             JavaScriptSerializer jss = new JavaScriptSerializer();
             return jss.Serialize(myData);
             #endregion ===代码===

         }

PS：这句是取当前页，指定length条数的数据，这个取数据自己实现

 new ResourceApplyService().GenericService.GetListByPage(myData.length, myData.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();