asp.net webforms中Jquery Datatable中的分页

Posted 2023-04-12

【中文标题】asp.net webforms中Jquery Datatable中的分页

【英文标题】：Pagination in Jquery Datatable in asp.net webforms

【发布时间】：2021-05-27 12:26:30

【问题描述】：

我有一个 API，它接受页码和页面大小作为返回用户详细信息的参数。 将数据加载到 jquery 数据表中。每次都需要将页码和大小传递给 API 以获取数据。如何获取页码并将其传递给 webmethod 并始终启用下一个按钮。因为当我加载第一次数据时，它只显示页码为 1 并且下一步按钮被禁用。

 var tableUserDetails = $("#grdUser").DataTable(
    processing: true,
    filter: true,
    orderMulti: false,
    paging: true,
    searching: true,
    bFilter: true,
    bsort: true,
    bInfo: true,
    pagingType: "simple",
    columns: [ "data": "Id" ,
     "data": "Name" ,
     "data": "userName" ,
     "data": "email" ,
     "data": "role" 
    ]
);

function getUsers() 
    var info =tableUserDetails.page.info();
    $.ajax(
        data: 'pageNumber:' + info.page+1 + ', pageSize:' + 10 + '',
        type: "POST",
        url: "MyPage.aspx/GetUsers",
        contentType: Constants.ContentType,
        error: function (XMLHttpRequest, textStatus, errorThrown) 
            debugger;
            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        ,
        success: function (result) 
            
        ,
    );

【问题讨论】：

使用 gridview/listview 和后面的代码会少很多工作。通过所有这些呼叫，您不会节省带宽或提高速度。而且，如果您将整个 gridview 放到更新面板中，那么无论如何您都会有部分回发。因此，您可以让数据表驱动网格，并放入允许排序和过滤的数据视图，当然这些对象（gridview/listview）也支持开箱即用的数据分页器。如果您使用自己的 jQuery 网格，那么您编写的上述所有内置功能都相当多，并且所有这些工作都不会带来更好的性能

【参考方案1】：

我认为您正在寻找这个：DataTables server side processing。您拥有的配置没有加载部分数据。它假定您在设置数据集时拥有所有行。

$(document).ready(function() 
    $('#example').DataTable( 
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
     );
 );

而且返回数据的格式应该是这样的：

  "draw": 3,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    [
      "Airi",
      "Satou",
      "Accountant",
      "Tokyo",
      "28th Nov 08",
      "$162,700"
    ],
    /* etc */

类似 C# 的响应示例：

    /// <summary>
    ///     Resultset to be JSON stringified and set back to client.
    /// </summary>
    [Serializable]
    [SuppressMessage("ReSharper", "InconsistentNaming")]
    public class DataTableResultSet
    
        /// <summary>Array of records. Each element of the array is itself an array of columns</summary>
        public List<List<string>> data = new List<List<string>>();

        /// <summary>value of draw parameter sent by client</summary>
        public int draw;

        /// <summary>filtered record count</summary>
        public int recordsFiltered;

        /// <summary>total record count in resultset</summary>
        public int recordsTotal;

        public string ToJSON()
        
            return JsonConvert.SerializeObject(this);
        
    

编辑 - 如何使用 ajax 发布

  $(document).ready(function () 
    $('#mytable').DataTable(
      processing: true,
      serverSide: true,
      ajax: 
        data: 'pageNumber:' + info.page+1 + ', pageSize:' + 10 + '',
        type: "POST",
        url: "MyPage.aspx/GetUsers",
        contentType: Constants.ContentType,
        error: function (XMLHttpRequest, textStatus, errorThrown) 
            debugger;
            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        ,
        success: function (result) 
            
        
    );
  );

【讨论】：

API 仅根据我们提供的页码返回数据。那么我该如何实现呢？像 ../getuser/pagenumber/pagesize 并返回总行数和基于 pagesize 的数据

如果您想发布数据，请查看更新以获取更多信息。