ASP.NET MVC下Datatable.js如何传页码到后端？destroy/retrieve不生效如何解决？

问题1解决：页码传递到后端的方法 #

开启serverSide: true后，Datatable默认会自动向后端传递start（当前页第一条数据的偏移量，第一页为0）、length（每页展示条数）两个参数，不需要额外自定义参数传递页码。你可以直接在后端通过这两个参数计算出当前页码：

// 控制器代码修改，删除原来的pageNumber参数默认值逻辑，替换为下面的计算
int pageNumber = (start ?? 0) / length;

你当前的GetTablesInfo方法接收pageNumber参数，直接传计算出的这个值即可，完全符合你的分页查询需求。

问题2解决：destroy/retrieve配置不生效的修复 #

核心原因是你拼写错误： #

• 配置项retrive应为retrieve
• 配置项destory应为destroy

优化方案（不需要每次重写表格DOM）： #

1. 保留页面初始的<table id="TheTable">结构，不需要每次点击按钮都清空Displayer再重写table
2. 将Datatable实例存储到全局变量，每次切换出版社ID时，先销毁已有实例再重新初始化，或者直接重载ajax数据即可

修改后的前端JS代码参考：

let PathRoot='@Url.Content("~/")';
// 全局存储表格实例
let dataTableInstance = null;

$('#P_Btn').click(function () {
  let pubId = $('#PubID').val();
  if (pubId == "") {
    alert("Please choose a publisher");
    return false;
  }
  // 先销毁已有实例
  if(dataTableInstance){
    dataTableInstance.destroy();
  }
  // 清空表格数据即可，不用重写DOM
  $('#TheTable tbody').remove();

  dataTableInstance = $('#TheTable').DataTable({
    "processing": true,
    "serverSide": true,
    "retrieve": true,
    "destroy": true,
    "ajax": {
      url: PathRoot + 'Home/index',
      type: "POST",
      // 用data参数传递PubID，不要直接拼在URL里，更规范
      data: {
        PubID: pubId
      },
      error: function (jqXHR, exception) {
        alert(jqXHR);
      }
    },
    "columns": [
      { "data": "No", "bSortable": true },
      { "data": "ShowArtiID", "bSortable": true},
      { "data": "ID", "bSortable": true },
      { "data": "PublicationID", "bSortable": true, "bSearchable": true},
      { "data": "Review", "bSortable": true, "bSearchable": true},
      { "data": "Authur", "bSortable": true, "bSearchable": true },
      { "data": "CreateDate", "bSortable": true, "bSearchable": true }
    ],
    "bLengthChange":false
  })
  // 表格默认是隐藏的，初始化后显示
  $('#TheTable').css('visibility','visible');
});

内容的提问来源于stack exchange，提问作者李伯均