在 DataTable 1.10 中加载 ajax 调用响应数据答案

【问题标题】：Loading ajax call response data in DataTable 1.10在 DataTable 1.10 中加载 ajax 调用响应数据
【发布时间】：2014-11-20 20:21:09
【问题描述】：

我正在实现搜索功能，页面上有两个部分。第一部分是一个搜索表格，第二个搜索结果表最初是隐藏的。所以我试图从表中的搜索结果中加载数据并显示它。所以我的问题是：

DataTable 初始化代码放在哪里？文档准备好还是 AJAX 成功？
如何从控制器向 DataTable 发送响应？

代码片段

function onSearchClick() {
  $.ajax({
    type: ...
    url: ...
    success: function(response) {
      console.log(response); //Need to send this response to DataTable
    }
  });
}

【问题讨论】：

标签： jquery datatable jquery-datatables

【解决方案1】：

你没有说你使用的是哪个版本的 Datatables，而是 1.9...

使用iDeferLoading 将您的数据表初始化代码放入$(document).ready，以防止在页面加载时填充表格：

var oTable = $('#your-table').dataTable({
        'bServerSide': true,
        'sAjaxSource': 'your-url-that-returns-json',
        //  Pass custom param to server
        "fnServerParams": function (aoData) {
            aoData.push({ "name": "my-filter", "value": $('my-selector').val() });
        },
        'bProcessing': true,
        'iDeferLoading': 1,
        'aoColumns': [
         ...
        ]
    });

您的点击事件只需要调用fnDraw() 来填充数据表：

function onSearchClick() {
    oTable.fnDraw();
}

将搜索参数传递给服务器端代码涉及使用fnServerParams。您的服务器端代码必须从请求中获取这些值并在查询中使用它们，然后才能返回过滤后的数据：

var searchParam = Request.QueryString["my-filter"]

【讨论】：

对不起它的 DataTable 1.10

【解决方案2】：

我们可以使用

rows.add()

向表中添加多行。只有参数是 DataTable 可以用来呈现行的数据。

【讨论】：