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

本文轉載自查看原文 2018-12-26 16:22 690 c#/ .NET/ .net

本實例引用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 = 0;//所有的
            //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

 1 　　/// <summary>
 2     /// JqueryDataTable插件交互的DT格式的數據(DT參數區分大小寫)
 3     /// </summary>
 4     public class TestDataTable
 5     {
 6         /// <summary>
 7         /// 請求次數（前端==》后端）
 8         /// </summary>
 9         public int draw { get; set; }
10 
11         /// <summary>
12         /// 總記錄數（前端《==后端）
13         /// </summary>
14         public int recordsTotal { get; set; }
15 
16         /// <summary>
17         /// 過濾后的總記錄數（前端《==后端）
18         /// </summary>
19         public int recordsFiltered { get; set; }
20 
21         /// <summary>
22         /// 記錄開始索引（前端==》后端）
23         /// </summary>
24         public int start { get; set; }
25 
26         /// <summary>
27         /// PageIndex（前端==》后端）
28         /// </summary>
29         public int pageIndex { get; set; }
30 
31         /// <summary>
32         /// PageSize（前端==》后端）
33         /// </summary>
34         public int length { get; set; }
35         public string search { get; set; }
36         /// <summary>
37         /// 集合分頁數據（前端《==后端）
38         /// </summary>
39         public System.Collections.IList data { get; set; }
40     }

二、ashx 版

1、前端代碼：

其他都一樣，js略有不同

  1     <%--js腳本--%>
  2     <script>
  3 
  4         var myTable;
  5         $(function () {
  6             myTable = initializeTable();
  7 
  8             $("#search").click(function () {
  9                 reloadTable();
 10             });
 11         });
 12 
 13         function initializeTable() {
 14 
 15             var dutyTable = $("#tbTestReport").dataTable({
 16                 /****************************************表格數據加載****************************************************/
 17                 "serverSide": true,
 18                 "ajax": function (data, callback, settings) {
 19                     //封裝請求參數
 20                     var param = {};
 21                     param.draw = data.draw;
 22                     param.length = data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
 23                     param.start = data.start;//開始的記錄序號
 24                     param.pageIndex = (data.start / data.length) + 1;//當前頁碼
 25                     param.search = $("#searchStr").val();
 26                     //ajax請求數據
 27                     $.ajax({
 28                         type: "post",
 29                         url: "/ajaxpage/testdatatablehandler.ashx?cmd=getTestData",
 30                         //url: "testdatatable.aspx/test",
 31                         //contentType: "application/json;charset=utf-8",//設置內容類型，即在頁面中傳遞的方式及編碼方式
 32                         cache: false, //禁用緩存
 33                         data: { "data": JSON.stringify( param)}, //傳入組裝的參數
 34                         dataType: "json",
 35                         success: function (result) {
 36                             //var result = JSON.parse(resultData.d);
 37                             //setTimeout僅為測試延遲效果
 38                             setTimeout(function () {
 39                                 //封裝返回數據
 40                                 var returnData = {};
 41                                 returnData.draw = result.draw;//這里直接自行返回了draw計數器,應該由后台返回
 42                                 returnData.recordsTotal = result.recordsTotal;//返回數據全部記錄
 43                                 returnData.recordsFiltered = result.recordsFiltered;//后台不實現過濾功能，每次查詢均視作全部結果
 44                                 returnData.data = result.data;//返回的數據列表
 45 
 46                                 //調用DataTables提供的callback方法，代表數據已封裝完成並傳回DataTables進行渲染
 47                                 //此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢
 48                                 callback(returnData);
 49                             }, 200);
 50                         }
 51                     });
 52                 },
 53                 
 54                 "columns": [//列綁定
 55                     { "序號": "" },
 56                     { "data": "ApplyNumber" },
 57                     { "data": "ResourceName" },
 58                     { "data": "ResourceType" },
 59                     { "data": "ApprovalStatus" },
 60                     { "data": "ApplicantName" },
 61                     { "data": "CreateTime" },
 62                     { "操作": "" }
 63                 ],
 64                 "columnDefs": [//列定義
 65                     {
 66                         "targets": [0],
 67                         "data": "ID",
 68                         "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這里的render是有多少列就執行多少次方法。。。不知道為啥
 69                             //return "<input type='checkbox' value='" + data + "' name='DataID'>";
 70                             return "";
 71                         }
 72                     },
 73                     {
 74                         "targets": [6],
 75                         "data": "CreateTime",
 76                         "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這里的render是有多少列就執行多少次方法。。。不知道為啥
 77                             if (data == null || data.trim() == "") { return ""; }
 78                             else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }
 79                         }
 80                     },
 81                     {
 82                         "targets": [7],
 83                         "data": "ID",
 84                         "render": function (data, type, full) {//全部列值可以通過full.列名獲取,一般單個列值用data PS:這里的render是有多少列就執行多少次方法。。。不知道為啥
 85                             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>" +
 86                                 "&nbsp;<a style='text-decoration:none' class='btn btn-info' onclick=article_del(this,'" + data + "') href='javascript:;' title='刪除'><i class='Hui-iconfont'>刪除</i></a>";
 87                         }
 88                     },
 89 
 90                     { "orderable": false, "targets": [0, 7] },// 是否排序
 91                     //{ "visible": false, "targets": [3, 5] }//是否可見
 92                 ],
 93                 "rowCallback": function (row, data, displayIndex) {//行定義
 94                     $(row).attr("class", "text-c");
 95 
 96                 },
 97                 "drawCallback": function (settings, json) { //每次畫完后調用
 98 
 99                     var startIndex = this.api().context[0]._iDisplayStart;//獲取到本頁開始的條數
100                     this.api().column(0).nodes().each(function (cell, i) {
101                         //翻頁序號連續
102                         cell.innerHTML = startIndex + i + 1;
103                     });
104                 },
105                 /****************************************表格數據加載****************************************************/
106                 /****************************************表格樣式控制****************************************************/
107                 "dom": "t<'dataTables_info'il>p",//表格布局
108                 "language": {//語言國際化
109                     "lengthMenu": "每頁 _MENU_ 條",
110                     "zeroRecords": "沒有找到記錄",
111                     "info": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_條",
112                     "infoEmpty": "無記錄",
113                     "paginate":
114                     {
115                         "first": "首頁",
116                         "previous": "前一頁",
117                         "next": "后一頁",
118                         "last": "末頁"
119                     }
120                 },
121                 "pagingType": "full_numbers",//分頁格式
122                 "processing": true,//等待加載效果
123                 "ordering": false,//排序功能
124                 /****************************************表格樣式控制****************************************************/
125             });
126 
127             return dutyTable;
128         }
129         //當你需要多條件查詢，你可以調用此方法，動態修改參數傳給服務器
130         function reloadTable() {
131             var oSettings = myTable.fnSettings();
132             myTable.fnClearTable(0);
133             myTable.fnDraw();
134         }
135     </script>

2、后台代碼：

 1 string json = "";
 2         HttpContext context;
 3         JavaScriptSerializer jss = new JavaScriptSerializer();
 4         Dictionary<string, object> dic = new Dictionary<string, object>();
 5         public void ProcessRequest(HttpContext context)
 6         {
 7             this.context = context;
 8             context.Response.ContentEncoding = Encoding.GetEncoding("utf-8");//避免出現亂碼
 9             //接收瀏覽器 get/post 過來的參數cmd
10             string cmd = context.Request["cmd"].ToString();
11             switch (cmd)
12             {
13                 case "getTestData":
14                     json = GetUserList();
15                     break;
16             }
17             context.Response.Write(json);
18         }
19         /// <summary>
20         /// 獲得用戶列表
21         /// </summary>
22         /// <param name="index"></param>
23         /// <returns></returns>
24         public string GetUserList()
25         {
26             #region ===代碼===
27 
28             var dataStr = context.Request["Data"];
29             if(string.IsNullOrEmpty(dataStr))
30             {
31                 return "";
32             }
33             TestDataTable myData = Newtonsoft.Json.JsonConvert.DeserializeObject<TestDataTable>(dataStr);
34 
35             int totalCount = 0;//所有的
36             //int selCount = 0;//根據條件搜索到的 
37 
38             System.Linq.Expressions.Expression<Func<ResourceApply, Boolean>> p = a => true;
39             if (!string.IsNullOrEmpty(myData.search))
40             {
41                 p = a => a.ResourceName.ToUpper().Contains(myData.search.ToUpper());
42             }
43 
44             var list = new ResourceApplyService().GenericService.GetListByPage(myData.length, myData.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();
45             myData.recordsFiltered = totalCount;
46             myData.recordsTotal = totalCount;
47             myData.data = list;
48 
49             JavaScriptSerializer jss = new JavaScriptSerializer();
50             return jss.Serialize(myData);
51             #endregion ===代碼===
52 
53         }

PS：這句是取當前頁，指定length條數的數據，這個取數據自己實現

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 datatable后端分頁（實例） C#中[WebMethod]的用法,aspx、ashx、asmx C#中[WebMethod]的用法,aspx、ashx、asmx 甩掉 ashx/asmx，使用jQuery.ajaxWebService請求WebMethod,Ajax處理更加簡練 aspx,ascx和ashx使用小結 jQuery datatable后台分頁實現 jQuery--dataTable 前端分頁與后端分頁及遇到的問題 datatable 分頁實例 jquery.ajax請求aspx和ashx的異同 Jquery Ajax調用aspx頁面方法 asp.net ajax傳遞Json給aspx.cs后台 webmethod方法傳遞json

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

免責聲明！

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