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();

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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