DataTables isn't reading value of an input even though it exists

Question

DataTables 1.10.18 in Server Side mode and jquery 3.2.1

Set up as follows:

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

 ...

});

The markup for the page has an <input> with an ID, #keywords-bysubstancestable, followed by the markup for the table:

<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>

When the page loads the table is populated correctly. I'm trying to implement a custom search feature instead of using the one bundled with DataTables. I previously asked this question: DataTables - kill ajax requests when a new one has started which I'm basing my work on.

When I attempt to redraw the table - after the user has entered input into the #keywords-bysubstancestable input - like this...

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

...It's making the ajax request to /get-product-notifications.json but the keywords: parameter in the request is empty even when I've typed input.

What's strange is that if I console.log($('#keywords-bysubstancestable').val()) it's actually giving the value. For example if I type "Australia" into the input the console.log() statement gives this:

But when looking at the request in the Network tab keywords: is empty even when all other parameters are sent:

Why is this happening?

The effect is that the table shows the "Loading notifications..." text, but nothing actually changes in the table.

I don't understand this because I copied the bySubstancesTable.draw(); from another project where it does appear to work. I assume that .draw() is indeed the correct way to redraw the table?

you are getting the value of the input and assigning it to keyword as static value, so when your datatable initialized your input value is empty string and that is what is going in the request — AvcS, Nov 11 '19 at 11:53
Yes, when the page loads. But I'm calling `debouncedDraw` when the user has entered text into the input (see the linked SO question). So it should be able to read it at that point? It does exactly that in another application so can't understand why it isn't in this one — Andy, Nov 11 '19 at 11:54
No, you are reading the value and assigning the `value` to keyword, not the `expression` itself, so your keyword is always static, the value it got when initialising the table. You will understand it better if you set value of input before initialising the datatable — AvcS, Nov 11 '19 at 11:58
In the example you gave he is using a function for data, you need to do the same if you wanna read the input value dynamically — AvcS, Nov 11 '19 at 11:58

score 2 · Accepted Answer · answered Nov 11 '19 at 12:02

You are reading the value and assigning the value to keywords, not the expression itself, so your keyword is always static, the value it got when initialising the table.

Datatables support function as value for ajax.data, which should take the data object and return the modified data object.

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

 ...

});

Thank you so much. I was trying to spot the difference between what I had and the previous application (which did many other complex things with the DataTable). This works perfectly — Andy, Nov 11 '19 at 12:11

DataTables isn't reading value of an input even though it exists

1 Answers1