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

Question

长话短说，我试图用MVC结构显示一个表，并用Datatable.js显示它。由于这里的DB可能非常巨大，因此我想让大部分数据处理留在我的后端，这意味着它真正响应的唯一时间是用户点击假定的页面。我当前的代码如下：

我的控制器：

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;} 
}

我的视图/前端：

@{
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>

所以我目前的问题是：

1. 我不知道如何将用户选择的页码发送到我的后端，这样它就可以挖掘出数据。

2. 我不知道为什么；销毁"；以及"；检索的"；的似乎按预期工作，所以每当发送新的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)
{
}