Question

我在数据表中使用了以下链接代码进行服务器端分页。

http://www.dotnetawesome.com/2015/11/jquery-datatable-server-side-pagination-sorting.html

但在我的方案中。列是动态的，并从数据库中获取。

$("#myTable").DataTable({
                "processing": true, // for show progress bar
                "serverSide": true, // for process server side
                "filter": false, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "ajax": {
                    "url": "/home/LoadData",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": [
                        { "data": "ContactName", "name": "ContactName", "autoWidth": true },
                        { "data": "CompanyName", "name": "CompanyName", "autoWidth": true },
                        { "data": "Phone", "name": "Phone", "autoWidth": true },
                        { "data": "Country", "name": "Country", "autoWidth": true },
                        { "data": "City", "name": "City", "autoWidth": true },
                        { "data": "PostalCode", "name": "PostalCode", "autoWidth": true }
                ]
            });

请帮助我如何在此代码中提供动态列。

Answer 1

我的建议如下：

准备名为/ home / GetColumns的第二个Web服务。该服务将返回以下JSON：

{
     "columns": [
                        { "data": "ContactName", "name": "ContactName", "autoWidth": true },
                        { "data": "CompanyName", "name": "CompanyName", "autoWidth": true },
                        { "data": "Phone", "name": "Phone", "autoWidth": true },
                        { "data": "Country", "name": "Country", "autoWidth": true },
                        { "data": "City", "name": "City", "autoWidth": true },
                        { "data": "PostalCode", "name": "PostalCode", "autoWidth": true }
                ]

}

发出Ajax请求并获取这些列。
如果操作成功，请将列信息作为变量提供给您的代码段。

示例代码：

$.ajax({url: "home/GetColumns", dataType: "json", success: function(result){
      $("#myTable").DataTable({
                "processing": true, // for show progress bar
                "serverSide": true, // for process server side
                "filter": false, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "ajax": {
                    "url": "/home/LoadData",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": result.columns
            });
}});

注意：您可以从模拟服务开始，它返回静态信息，然后在确保前端工作时实现真实逻辑。

Answer 2

发出Ajax请求并获取这些列。如果操作成功，请将列信息作为变量提供给您的代码段。示例代码：

$.ajax({url: "home/GetColumns", dataType: "json", success: function(result){
      $("#myTable").DataTable({
                "processing": true, // for show progress bar
                "serverSide": true, // for process server side
                "filter": false, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "ajax": {
                    "url": "/home/LoadData",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": result.columns
            });
}});

注意：您可以从模拟服务开始，它返回静态信息，然后在确保前端工作时实现真实逻辑。

带有动态列的jquery数据表服务器端分页mvc

2 个答案: