使用Datatable.js时，如何将我点击的页面编号发送回我的后端？（有一些小问题）

Question

长话短说，我试图用 MVC 结构展示一个 table 并用 Datatable.js 展示它。由于此处的数据库可能非常庞大，因此我希望将大部分数据处理留在我的后端，这意味着它实际响应的唯一时间是用户单击假定页面时。我当前的代码如下所示：

我的控制器：

public ActionResult Index() {
      //To send data to my drop-down list. Currently work as intended
      M_BussinessLogics Builder = new M_BussinessLogics();
      List<VM_PublicatorInfo> Dlist = Builder.GetPublicationList();
      SelectList P_List = new SelectList(Dlist, "PublicationID", "DataDesc");
      ViewBag.TheList = P_List;

      return View();
    }
    
    //Response after user selected a certain option from the drop-down list 
    [HttpPost]
    public ActionResult index(string PubID, int? draw, int? start, int? pageNumber, int length=10) {

      try {

        if (pageNumber == null) {
           pageNumber = 0;
        }
      
      //Model for data digging (with SQL), should be irrelevant to my problem here 
      M_BussinessLogics FormBuilder = new M_BussinessLogics();
      List<VM_Column> Form_Col_List = FormBuilder.GetTablesInfo(PubID, pageNumber);
      
      //Model to get the whole counts of data so Datatable.js knows how many pages are there, should be irrelevant to my problem here 
      int CountTest = FormBuilder.GetDataCount(PubID);

      List<VM_PublicatorInfo> Dlist = FormBuilder.GetPublicationList();
      SelectList P_List = new SelectList(Dlist, "PublicationID", "DataDesc");
      ViewBag.TheList = P_List;



      return Json(new {
        draw = draw,
        
        //The following three lines work, but not entirely fit into my actual goal 
        //recordsTotal = Form_Col_List.Count(),
        //recordsFiltered = Form_Col_List.Count(),
        //data = Form_Col_List.Skip(start ?? 0).Take(length).ToList()
        
        recordsTotal = CountTest,
        recordsFiltered = CountTest,
        data = Form_Col_List
      }, JsonRequestBehavior.AllowGet);

      } 
      catch (Exception) {
        return null;
      }  
    }

我的视图模型：

//For table
public class VM_Column 
  {
    public int No { get; set;}

    public int ShowArtiID { get; set;}

    public int ID { get; set; }

    public string PublicationID  { get; set;}

    public int Review { get; set; }

    public string Authur { get; set; }

    public string CreateDate{ get;set;}
  }

//For drop-down list
public class VM_PublicatorInfo {
    public string PublicationID { get;set; }

    public string DataDesc  { get;set; }
  }

//For total counts of data in the supposed table
public class VM_TablePage {
    public int TotalCount{ get;set;} 
  }

我的view/front-end:

@{
  ViewBag.Title = "Publishing Data";
  AjaxOptions ajaxOptions = new AjaxOptions {
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "Displayer"
  };
}

<h2>Publisher Data</h2>

<div id="pagenum">
  <p id="page"></p>
</div>

<!--Drop Down List-->
<div id="DropDownList">
 @Html.DropDownList("PubID", ViewBag.TheList as SelectList, "Please choose a publisher", new { @class = "Droplist" })
    <input id="P_Btn" class="btn-default" type="submit" />
    <br />


</div>

<!--Partial-->
<div id="Displayer" class="center-block" >
  <table id=TheTable style="visibility:hidden">
    <thead>
      <tr>
        <th>No</th>
        <th>ShowArtiID</th>
        <th>ID</th>
        <th>PublicationID</th>
        <th>Review</th>
        <th>Authur</th>
        <th>CreateDate</th>
      </tr>
    </thead>
  </table>
</div>



@section scripts{
  //I hid the Datatable.js reference in my _Layout
  <script>

    let PathRoot='@Url.Content("~/")';
    
    $('#P_Btn').click(function () {
      if ($('#PubID').val()=="") {
        alert("Please choose a publisher");
        return false;
      }

      else
      //Re-drawing table every time user send publisher's ID 
      $('#Displayer').empty();
      $('#Displayer').append("<table id="+"TheTable"+">"
        +"<thead>"
        +"<tr>"
        +"<th>No</th>"
        +"<th>ShowArtiID</th>"
        +"<th>ID</th>"
        +"<th>PublicationID</th>"
        +"<th>Review</th>"
        +"<th>Authur</th>"
        +"<th>CreateDate</th>"
        +"</tr>"
        +"</thead >"
        +"</table >");

    
      let table = $('#TheTable').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
          url: PathRoot + 'Home/index?PubID=' + $('#PubID').val(),
          type: "POST",
          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
        
        //Doesn't seem to work?
        //"retrive":true,
        //"destory":true
      })
    });
  </script>

所以我目前的问题是：

我不知道如何将用户选择的页码发送到我的后端，以便它可以挖掘出数据。
不知道为什么Datatable.js的“destroy”和“retrive”没有似乎按预期工作，所以我必须重新创建 table 发送一个新的 ID 以避免挤压。我该如何解决这个问题？

Answer 1

关于您关于页码的问题，我遇到了同样的问题并创建了处理数据表请求架构的模型：

public class DataTablePostModel
{
    public int page { get { return GetPage(); } }
    public int draw { get; set; }
    public int start { get; set; }
    public int length { get; set; }
    public List<Column> columns { get; set; }
    public Search search { get; set; }
    public List<Order> order { get; set; }
    private int GetPage()
    {
        if (this.start == 0)
        {
            return 0;
        }
        else
        {
            return start / length;
        }
    }
}

public class Column
{
    public string data { get; set; }
    public string name { get; set; }
    public bool searchable { get; set; }
    public bool orderable { get; set; }
    public Search search { get; set; }
}

public class Search
{
    public string value { get; set; }
    public string regex { get; set; }
}

public class Order
{
    public int column { get; set; }
    public string dir { get; set; }
}

然后在控制器中你可以像这样使用它：

public ActionResult LoadProducts(DataTablePostModel model)
{
}

在评论中回答你的问题你可以这样做，因为你打算将额外的参数传递给控制器：

 let table = $('#TheTable').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
      url:'Home/index',
      data: function (d) {
            d.pubId = $('#PubID').val();
      }
      type: "POST",
      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 }
    ],

然后在这个示例索引方法中的控制器中：

public ActionResult Index (DataTablePostModel model, string pubId)
{
}

使用Datatable.js时，如何将我点击的页面编号发送回我的后端？（有一些小问题）

When using Datatable.js, How do I send the number of the page I clicked back to my back-end? (with some few minor issues)

javascript

c#

ajax

asp.net-mvc

datatables

使用Datatable.js时，如何将我点击的页面编号发送回我的后端？ （有一些小问题）

When using Datatable.js, How do I send the number of the page I clicked back to my back-end? (with some few minor issues)

javascript

c#

ajax

asp.net-mvc

datatables

使用Datatable.js时，如何将我点击的页面编号发送回我的后端？（有一些小问题）