jquery datatable ajax 属性答案

【问题标题】：jquery datatable ajax properyjquery datatable ajax 属性
【发布时间】：2014-11-13 06:40:47
【问题描述】：

我想使用数据表的 ajax 属性从 Web 服务填充 jquery 数据表，所以我仍然可以进行客户端处理。

我在想这样的事情：

$('#example').dataTable( 
{ "ajax": { "url": "../.NET webservice", "type": "POST" } } );

如果可以的话，我需要将 .NET Web 服务中的数据作为数组返回？

例如

{ "data": [ [ "Tom", "Utah", "Koala", "Kite"],

["Bob", "New Mexico", "Kangaroo", "Kite"] ] }

你能确认一下吗？我没有看到任何很好的例子来说明如何做到这一点。

提前谢谢...

【问题讨论】：

标签： jquery ajax datatables

【解决方案1】：

您可以使用以下方式获取服务器数据

$("#example").dataTable({
    "sAjaxSource" : "../.NET",
    "fnServerData" : function(sSource, aoData, fnCallback) {
         aoData.push({
                    "name" : "param1",
                    "value" : val1
                }, {
                    "name" : "param2",
                    "value" : val2
                });
         $.getJSON(sSource, aoData, function(json) {
                        fnCallback(json)
                    });
                }
});

或者你可以使用：-

$("#example").dataTable({
    "sAjaxSource" : "../.NET?param1=value&pram2=value2"
});

唯一的一点是响应应该是来自服务器的 json。

【讨论】：

我正在加载...消息现在在数据表中，但没有加载任何内容。 var table = new DataTable(); table.Columns.Add("名称"); table.LoadDataRow(new object[] {"Kshipra", "Kanpur", "Koala", "Kite"}, true);Newtonsoft.Json.JsonConvert.SerializeObject(table);这是 .NET 代码。并在按钮单击时调用上面的代码。我现在正在加载...消息。我不知道原因。需要一种调试方法。 Web 服务在本地托管以进行测试。
html 代码：var sbSourceTable = new StringBuilder(); sbSourceTable.Append(""); sbSourceTable.Append(""); divDataDisplay.InnerHtml = sbSourceTable.ToString();

名称地点动物事物

【解决方案2】：

可以像这样调用 ajax。

$('#example').dataTable( { "ajax": { "url": "../.NET webservice", "type": "POST" } } );

但是，datatable 能够从任何 json 中读取数据，因此这取决于您希望服务以哪种形式返回数据。您只需要根据您的服务发送的数据来处理数据。最好的方法是发送一个对象数组。

【讨论】：

我在 web 服务中设置了一个断点来返回数据，它没有达到我正在调用的方法。所以我无法知道为什么数据没有被渲染。有什么调试建议吗？

【解决方案3】：

我使用一个函数，作为“ajax”数据表选项传递：

function getData(data, callback, settings) {
    // settings contain info about data start index, number of records to request, sorting options, etc...
    //settings._iDisplayLength, settings._iDisplayStart

    // got some data into arrayOfData (via ajax request)
    callback({ data: arrayOfData, recordsTotal: totalRecordsCount, recordsFiltered: totalRecordsCount });
}
var dataTableOptions = {
    // some column settings
    // and ajax settings:
    processing = true;
    serverSide = true;
    ajax = getData;
}
$(dataTableTargetElement).dataTable(dataTableOptions);

【讨论】：

这是服务器端处理。我更倾向于内置客户端处理，所以我不必担心发送参数以使分页正常工作。对此的任何想法都会有所帮助。
在“getData”函数中，我使用选项向服务器发出 ajax 请求，然后接收数据，通过“回调”函数将它们传递给 dataTable。因此，我可以完全控制所有数据获取过程。