Filtering with a slider Datatable server side
Filtering with a slider Datatable server side
Angelj107
Posts: 8Questions: 1Answers: 0
Hi everyone,
this is my first post here and I would like to have some help for a custom filtering I need to add to my table.
I have a table of 20k rows, so I need it to be processed server side.
First of all, here is my JS code, it's a bit of a mess, I know, but I copied and pasted various codes from various sources.
<script type="text/javascript">
(function($) {
$(document).ready(function() {
var table = $('#table_id').DataTable({
"pageLength": 50,
"bfilter": true,
"order": [
[4, "desc"]
],
"searching": true,
"responsive": true,
"processing": true,
"serverSide": true,
"bPaginate": true,
"ajax": {
"url": "server_side/scripts/server_processing.php",
}
//"datatype":"json"
},
fixedHeader: true,
});
var val_range;
var sal_range;
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = parseFloat(val_range.slider("values", 0));
var max = parseFloat(val_range.slider("values", 1));
var col = parseFloat(data[3]) || 0; // data[number] = column number
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && col <= max) ||
(min <= col && isNaN(max)) ||
(min <= col && col <= max)) {
return true;
}
return false;
},
function(settings, data, dataIndex) {
var min = parseFloat(sal_range.slider("values", 0));
var max = parseFloat(sal_range.slider("values", 1));
var col = parseFloat(data[4]) || 0; // data[number] = column number
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && col <= max) ||
(min <= col && isNaN(max)) ||
(min <= col && col <= max)) {
return true;
}
return false;
}
);
sal_range = $("#val_range_salary");
val_range = $("#val_range");
var live_range_val = $("#live_range_val");
var val_range_salary = $("#live_range_val_salary");
val_range.slider({
range: true,
min: 0,
max: 90,
step: 1,
values: [0, 90],
slide: function(event, ui) {
live_range_val.val(ui.values[0] + " - " + ui.values[1]);
},
stop: function(event, ui) {
//table.draw();
table.ajax.reload();
}
});
sal_range.slider({
range: true,
min: 40,
max: 99,
step: 1,
values: [40, 99],
slide: function(event, ui) {
val_range_salary.val(ui.values[0] + " - " + ui.values[1]);
},
stop: function(event, ui) {
//table.draw();
table.ajax.reload();
}
});
live_range_val.val(val_range.slider("values", 0) + " - " + val_range.slider("values", 1));
val_range_salary.val(sal_range.slider("values", 0) + " - " + sal_range.slider("values", 1));})
})(jQuery);;
</script>
The tables and the sliders are correctly displayed, but, as you may have guessed, changing the values of the slider doesn't affect my table.
If I generate the table client - side the code works just fine.
How can I make it work server-side?
I would like to keep it clean, without the need to click "update" or some kind of button to give the Post values to my server_processing.php. I would like to behave like the "Search" on top of the table, that as I type it shows me new results.
Thanks to whoever will help!
Replies
The search plugin code doesn't work since you are using server side processing. Use
ajax.dataas a function to send the slider input values to the server, like this example. Usedraw()to initiate the ajax request to the server with the parameters. Your server script will need to grab the parameters and incorporate them as part of your data query.Kein
The search bar on top of the table?
It works actually
By the way thank you for your answer,
but can you help me understand the example itself?
While searching for a solution on my own I found that example too, but I don't understand how I should integrate my above code to with that example.
Thank you again.
Angelo
I'm not familiar with the slider code you are using so this may not be totally correct but hopefully this will help.
In your slider stop events call
draw()to send the request to the server:If you still need help you can build one or both sliders in a test case and we can help shoe how to send to the server. You can start with one of the server side templates here.
Kevin
Hi,
Thank you for you help.
Using your suggestions make my table to not show at all
Here is the test case. I'm using the sider for column 5 (salary), but it doesn't work.
live.datatables.net/pamupime/1/edit?html,js,output
First you need to initialize the
sal_rangevariable before trying to use it withajax.data. After moving that code before Datatables the following error occurs when moving the slider.You need to get an instance of the API, for example:
Use the browser's network inspector to verify the parameters are sent. Looking at the XHR request headers these parameters are sent, along with the other SSP parameters, on initilization.
Change the slider and when stopped a new request is sent with update parameters.
http://live.datatables.net/xexiruxi/1/edit
EDIT: Also you can remove the search plugin as it won't run with server side processing.
Kevin
Hi, thank you for your help.
I still don't understand why you say to remove the search plugin, as it's actually working (even in your link, If I type a name it works)
As for the slider, it doesn't work (in your link too).
From the XHR request, it seems that the values are correctly sent.
Angelo
I removed the search plugin, ie
$.fn.dataTable.ext.search.push(, from my example.I assume you mean that changing the slider doesn't filter any data. The server script isn't setup to use the parameters sent. You will need to retrieve the parameters in your server script and use them as part of your data query. Using these parameters are custom and Datatables doesn't have anything built in to use them.
Kevin