Question

我需要制作一个搜索表单，该表单将调用Web api并在单击按钮时填充jQuery DataTable。在单击按钮之前，我不希望加载表单，因此我有一个单独的按钮处理程序来调用我的post方法。有人告诉我我应该对此使用ajax.reload（），以防有人不得不再次搜索以缩小结果范围，但是在将其用于我的代码时遇到了一些麻烦。谁能帮助我满足我的要求？我的代码可以正常工作，但是我想知道它是否可以更有效地完成。请参阅下面的工作代码。

<script>
    var dataTable;
    var resultsContainer = $('#ResultsContainer');

    $(document).ready(function() {
      dataTable = $('#SearchResultsTable').DataTable({
        "columns": [
          { "data": "clientId" },
          { "data": "lastName"   },
          { "data": "firstName"  }
        ],
        "language": {
          "zeroRecords": '@Resource.NoRecordsFound'
        },
        "searching": false,
        "lengthChange": false
      });
    });

    $('#SearchButton').click(function (e) {
      e.preventDefault();
      RequestData();
    });

    function RequestData() {
      $.post('@Url.Content("?handler=ClientSearch")', $('#ClientSearchForm').serialize(), function (data) {
        ProcessResponse(data);
      });
    }

    function ProcessResponse(data) {  
        dataTable.clear();
        dataTable.rows.add(data);
        dataTable.draw();
        resultsContainer.addClass('d-block');
    }

  </script>

Answer 1

DataTable ajax.reload方法似乎需要用于定义数据的URL。在https://datatables.net/reference/api/ajax.reload的示例中，他们使用配置对象中的ajax选项设置URL：

var table = $('#example').DataTable( {
    ajax: "data.json"
} );

然后调用table.ajax.reload()只会再次从data.json中提取更新的数据。在您的情况下，您正在执行POST以使用搜索表单检索数据。因此，您要么需要：

使用jQuery ajax对象作为DataTable ajax选项的值（请参见https://datatables.net/reference/option/ajax#object）；或
每次提交搜索表单时都设置ajax.url（https://datatables.net/reference/api/ajax.url）

希望有帮助。

我如何在jQuery数据表中使用ajax.reload

1 个答案: