asp.net 網絡表單中 Jquery 數據表中的分頁

Question

我有一個 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) {
            
        },
    });
}

Answer 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) {
            
        }
    });
  });