时间戳

首页 > 解决方案 > 即使存在，DataTables 也不会读取输入的值

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

问题描述

服务器端模式下的 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 - 当一个新的请求开始时终止 ajax 请求，这是我工作的基础。

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

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

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

奇怪的是，如果我console.log($('#keywords-bysubstancestable').val())实际上是在赋予价值。例如，如果我在输入中键入“Australia”，则console.log()语句给出：

在此处输入图像描述

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

在此处输入图像描述

为什么会这样？

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

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

标签： javascriptjquerydatatables

解决方案

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

数据表支持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...'
    }

 ...

});

推荐阅读