即使存在，DataTables 也不会读取输入的值

Question

DataTables 1.10.18 在服务器端模式和 jquery 3.2.1

设置如下：

var bySubstancesTable = $('#bySubstancesTable').DataTable({
    processing: true,
    serverSide: true,
    searching: false,
    ajax: {
        data: {
           list_requested: 'bySubstancesTable',  // <table> #ID
           keywords: $('#keywords-bysubstancestable').val() // search keywords 
        },
        url: '/get-product-notifications.json', 
    },
    "language": {
        ...
        "processing": 'Loading notifications...'
    }

 ...

});

页面的标记有一个<input>，ID 为#keywords-bysubstancestable，后跟表格的标记：

<input type="text" id="keywords-bysubstancestable">

<table id="bySubstancesTable" class="table display table-striped responsive" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Date</th>
            <th>ID</th>
            <th>Substance Name</th>
            <th>Revision</th>
            <th>Affected Products</th>
        </tr>
    </thead>
</table>

当页面加载时，表格被正确填充。我正在尝试实现自定义搜索功能，而不是使用与 DataTables 捆绑的搜索功能。我之前问过这个问题：DataTables - kill ajax requests when a new one has started，这是我工作的基础。

当我尝试重绘表格时 - 在用户输入 #keywords-bysubstancestable 输入后 - 像这样......

var debouncedDraw = _.debounce(function (opts) {
    bySubstancesTable.draw();
    return false;
}, 500);

...它正在向 /get-product-notifications.json 发出 ajax 请求，但即使我输入了输入，请求中的 keywords: 参数也是空的。

奇怪的是，如果我console.log($('#keywords-bysubstancestable').val()) 它实际上是在给出价值。例如，如果我在输入中键入“澳大利亚”，console.log() 语句会给出：

但是在网络选项卡中查看请求时，keywords: 是空的，即使发送了所有其他参数：

为什么会这样？

效果是表格显示“正在加载通知...”文本，但表格中实际上没有任何变化。

我不明白这一点，因为我从另一个似乎可以工作的项目中复制了 bySubstancesTable.draw();。我认为.draw() 确实是重绘表格的正确方法？

Answer 1

您正在读取该值并将该值分配给keywords，而不是expression 本身，因此您的关键字始终是静态的，即初始化表时获得的值。

Datatables 支持function 作为ajax.data 的值，它应该获取数据对象并返回修改后的数据对象。

var bySubstancesTable = $('#bySubstancesTable').DataTable({
    processing: true,
    serverSide: true,
    searching: false,
    ajax: {
        data: function (d) {
          d.list_requested = 'bySubstancesTable';  // <table> #ID
          d.keywords = $('#keywords-bysubstancestable').val(); // search keywords
          return d;
        },
        url: '/get-product-notifications.json', 
    },
    "language": {
        ...
        "processing": 'Loading notifications...'
    }

 ...

});