CODEWITHSUNDEEP
javascriptjquerydatatables
Andy
Andy

Reputation: 5395

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

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:

enter image description here

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

enter image description here

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?

Upvotes: 0

Views: 346

Answers (1)

AvcS
AvcS

Reputation: 2323

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

 ...

});

Upvotes: 2

Related Questions