javascript - 即使输入存在，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())它实际上赋予了值(value)。例如，如果我在输入中键入“澳大利亚”console.log()声明给出了这样的内容:

但是在“网络”选项卡中查看请求时keywords:即使发送所有其他参数也为空:

为什么会发生这种情况？

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

我不明白这一点，因为我复制了 bySubstancesTable.draw();来自另一个似乎确实有效的项目。我假设.draw()确实是重绘表格的正确方法吗？

Answer 1

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

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...'
    }

 ...

});