I have an application which uses DataTables 1.10.18 in serverSide
mode, jquery 3.2.1, and Bootstrap 4.
One page in the application consists of 2 DataTables (more than 2 may be added later, but for now it's just 2). Next to each table there is a 'Filter' button. Clicking on this button makes an ajax request which opens a Bootstrap modal window. Inside the modal there is a series of checkboxes. The checkboxes are different for each table, as they are the response from the ajax request mentioned.
What I need to do is pass the checked checkboxes to my DataTables server side script and then update the appropriate table.
I'm providing the code for 1 table but be aware that each table has a different ID which is how I'm differentiating them.
The markup for the table is straightforward:
<table id="sharedListsTable">
<thead>
<tr>
<th>Date</th>
<th>ID</th>
<th>Name</th>
<th>...</th>
</tr>
</thead>
</table>
DataTables gets initialised on #sharedListsTable
and an ajax request is made to /get-data.json
which populates the table. The ajax.data
function contains some parameters which are necessary to get the endpoint to provide data for the correct table, as well as search keywords:
var sharedListsTable = $('#sharedListsTable').DataTable({
processing: true,
serverSide: true,
searching: false,
ajax: {
data: function (d) {
d.list_requested = 'sharedListsTable'; // <table> #ID
d.keywords = $('#keywords-sharedliststable').val(); // search keywords for list_requested
return d;
},
url: '/get-data.json',
},
// ...
});
The modal for the checkboxes is triggered as follows:
<button data-toggle="modal" data-remote="/get-checkboxes/shared_lists" data-target="#substanceListsModal">Filter</button>
The data-remote
gives an endpoint to render the appropriate checkboxes. The modal opens when this button is clicked and the checkboxes appear:
Each checkbox has a value
so the markup for "Baz" on the screenshot is like this:
<input type="checkbox" name="filter_list[]" id="filter_752" value="752" checked="">
<label for="filter_752">Baz</label>
The problem I'm facing is how to pass these checked checkbox values back to my DataTables endpoint (/get-data.json
) and then update the appropriate table.
I'm aware how to read checkbox values with jquery. I've written this snippet which will log, in the example above, 752:
var data = { 'filter_list[]' : [] };
$(":checked").each(function() {
data['filter_list[]'].push($(this).val());
});
console.log(data);
I also know how to re-draw my DataTable:
sharedListsTable.draw();
Please can someone help how to pass in the checkbox data to DataTables?
On the linked DataTables docs it says with regards to using ajax.data
as a function - which I am doing:
This provides the ability to submit additional information to the server upon an Ajax request, with the function being executed upon each Ajax request, allowing values to be dynamically calculated. For example, a value could be read from a text input field to act as an additional search option.
So I assume this may have something to do with it but can't figure out how to get it working.