使用 Datatable.js 时，如何将我点击的页面编号发送回我的后端？ （有一些小问题）
Posted
技术标签:
【中文标题】使用 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) 【发布时间】：2021-12-26 07:57:00 【问题描述】：长话短说，我正在尝试使用 MVC 结构显示一个表格并使用 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;
我的观点/前端：
@
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 的“销毁”和“检索”没有 似乎按预期工作，所以我必须随时重新创建表 一个新的ID被发送，以避免粉碎。我该如何解决这个问题？
【问题讨论】：
【参考方案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)
【讨论】：
谢谢，但是........称我为愚蠢，但我不确定如何在我的情况下使用该 VM？ 更新了我的答案。希望对您有所帮助。 谢谢，我试试看。以上是关于使用 Datatable.js 时，如何将我点击的页面编号发送回我的后端？ （有一些小问题）的主要内容，如果未能解决你的问题，请参考以下文章