Passing form parameter to datatable for filtering
Passing form parameter to datatable for filtering
First off, thank you for your time in reading this.
I have a database with a few rows of data. Datatables displays this information just fine on a page. I also have a form on that page that I'd like users to use to filter the datatable. I can't get this to work. I've seen some similar questions on here, but nothing that gives me a straight answer.
I'm using server-side processing. I tried using the fnDraw() function, but nothing changes. I think the problem is that my form isn't connecting with datatables. That's probably the piece I'm missing.
As one types in a city name in the form, for example, I'd like datatables to update accordingly.
If anyone has any suggestions, I would greatly appreciate it.
Thanks!
Here's my form:
[code]
Location:
Price range:
[/code]
Here is my datatables call:
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var listingcity = document.getElementById('cityorzip').value;
return true;
}
);
$(document).ready(function() {
var oTable = $('#results_table').dataTable({
'bJQueryUI': true,
'bProcessing': true,
'bServerSide': true,
'sAjaxSource':'get_listings.php'
});
$('#cityorzip').keyup(function() { oTable.fnDraw(); } );
});
[/code]
I have a database with a few rows of data. Datatables displays this information just fine on a page. I also have a form on that page that I'd like users to use to filter the datatable. I can't get this to work. I've seen some similar questions on here, but nothing that gives me a straight answer.
I'm using server-side processing. I tried using the fnDraw() function, but nothing changes. I think the problem is that my form isn't connecting with datatables. That's probably the piece I'm missing.
As one types in a city name in the form, for example, I'd like datatables to update accordingly.
If anyone has any suggestions, I would greatly appreciate it.
Thanks!
Here's my form:
[code]
Location:
Price range:
[/code]
Here is my datatables call:
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var listingcity = document.getElementById('cityorzip').value;
return true;
}
);
$(document).ready(function() {
var oTable = $('#results_table').dataTable({
'bJQueryUI': true,
'bProcessing': true,
'bServerSide': true,
'sAjaxSource':'get_listings.php'
});
$('#cityorzip').keyup(function() { oTable.fnDraw(); } );
});
[/code]
This discussion has been closed.
Replies
What you can do is make use of fnServerData, which is a function that is called when DataTables requests information from the server. You can override it with your own additional parameters to send to the server, as shown in this example: http://datatables.net/examples/server_side/custom_vars.html
Allan
Do you have an actual example I can see? custom_vars.html has " Add some extra data to the sender" and "Do whatever additional processing you want on the callback, then tell DataTables", which doesn't tell me much.
Sorry for the primitive question, I just can't get this to work at all. :(
[code]
aoData.push( { "name": "more_data", "value": "my_value" } );
[/code]
It will add an HTTP variable called "more_data" with a value of "my_value" to the request sent to the server. You can modify this line, duplicate it to add more variables, etc, to get what you are looking for. For example
[code]
aoData.push( { "name": "extraSearch", "value": $('input.extra').val() } );
[/code]
will send the value of an input element with the class of 'extra'.
Allan
Thank you for your help and patience.
I followed your tip, but now it's still on "Processing...".
Here's my code:
[code]
$(document).ready(function() {
var oTable = $("#results_table").dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource":"get_listings.php",
"fnServerData":function (sSource, aoData, fnCallback) {
aoData.push({"name":"city", "value":$('input.cityorzip').val() });
}
});
});
[/code]
When I don't have the fnServerData, things work okay (granted, without my adding extra data).
Am I missing a step here?
Thanks!
[code]
$(document).ready(function() {
var oTable = $("#results_table").dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource":"get_listings.php",
"fnServerData":function (sSource, aoData, fnCallback) {
aoData.push({"name":"city", "value":$('input.cityorzip').val() });
$.getJSON( sSource, aoData, function(json) {
fnCallback(json)
});
}
});
});
[/code]
Thanks!
Allan
I have the above jQuery code which, as you said, looks fine. I'm pushing the variable "cityorzip" to my server-side code.
How do I call/access that variable in my server-side PHP code? Is it simply $_GET['cityorzip']? That's what I'm having trouble figuring out. I have looked all over your site but I see very little examples of PHP code.
Thanks!
There isn't much PHP on this site since DataTables is primarily client-side, and thus what is used on the server doesn't really matter. The one place PHP is used (which you will have come across already no doubt) is the server-side processing example: http://datatables.net/development/server-side/php_mysql .
If you use Firebug with Firefox, you should be able to see your variable being set to the server in the XHR.
Regards,
Allan