Passing form parameter to datatable for filtering

mrbranden

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]

allan

Hi mrbranden,

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

mrbranden

Thank you for your reply. I went to that custom_vars link earlier but, unfortunately, it didn't really help. I guess I don't know how to capture that information in my server-side processing.

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. :(

allan

The example linked to is doing what you need. The key line is this one:

[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

mrbranden

Ah ha... Okay I think I get it now. I will work with that.

Thank you for your help and patience.

mrbranden

Eh, I"m not getting very far with this.

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!

mrbranden

Actually, I got past the "Processing..." problem. I forgot to add the getJSON. Unfortunately, I'm still no further along. I really think the problem is that I'm not capturing this in my server-side code, which I mentioned originally. Here's my revised 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() });
$.getJSON( sSource, aoData, function(json) {
fnCallback(json)
});
}
});

});

[/code]

Thanks!

allan

Your initialisation looks fine to me - the the next question is, what is the return coming back from the server? Have a look at Firebug and you can run the JSON through http://jsonlint.com to validate it.

Allan

mrbranden

I don't think you understand what I'm asking.

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!

allan

Oh I see what you mean - sorry I didn't get it. Your variable will be available as $_GET['city'], and will take the value of the first element which matches the selector 'input.cityorzip'.

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