A Filter Question

UnkleFrank

Hi all
New to Datatables and my first post.
I've searched the forums and have not been able to find a simple solution. I need to add a text field input or drop down list to filter my cities by the state they are in. Can anyone direct me to an example?
Thanks.
Frank

UnkleFrank

Sorry for the ignorant post. I've found "Individual Column Filters" but after hours of attempts, I cannot make it work.
Here is my existing code. Can anyone steer me in the right direction?
Thanks,

[code]
$(document).ready(function() {
$('#the_table').dataTable( {
"bProcessing": true,
'bServerSide':true,
"sAjaxSource": "conn3.php",
"aLengthMenu": [10, 25, 50, 100],
"sPaginationType": "full_numbers",
"fnServerData": function ( sSource, aoData, fnCallback )
{
aoData.push( { "state": "extra_filter", "value": $('#state_filter').val() } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
} );
}
} );

$('#state_filter').keyup( function () {
oTable.fnDraw();
} );
} );
[/code]

allan

Do you mean something like this: http://datatables.net/release-datatables/examples/api/multi_filter.html ? The key thing to do is to call the fnFilter function when you want to actually perform a filter.

It is worth noting that since you are using server-side processing, its the server that does the filtering, so you need to make sure that the server-side script is capable of doing column filtering.

Allan

UnkleFrank

Thanks, Allan. I've been trying to get the filtering to work for hours. Is there an example of a server-side script that you know of? I'm using this one:

<?php
/*
* Script: DataTables server-side script for PHP and MySQL
* Copyright: 2010 - Allan Jardine, 2012 - Chris Wright
* License: GPL v2 or BSD (3-point)
*/

UnkleFrank

and...
Does the code you reference above replace mine or go along with it.
Sorry, brand new to this.

Frank

robertmazzo

frank,
if you look at allan's URL re: mult_filter.html, you'll his keyup() event like this :

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );

I think you need to remove fnDraw() and instead use Allan's oTable.fnFilter() function.

If you "view source" here - http://datatables.net/release-datatables/examples/api/multi_filter.html - then you'll see how he sets up "tfoot" below his html table...and maybe you'll get some ideas studying this code.

I'm certainly struggling too, so I feel your pain.

good luck.

Bob

UnkleFrank

Hi Bob
I tried your suggestion with no success...
I'm trying to add a simple filter below, above, externally, any way I can but having no success with this. Is it because it's not possible when using server-side scripts? I'm just trying to filter by state and then city.

Here's the latest:
[code]
$(document).ready( function() {
$('#tableId').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "conn3.php",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
}
).columnFilter({
aoColumns: [ { sSelector: "#bus_name" },
{ sSelector: "#street" },
{ sSelector: "#city" },
{ sSelector: "#state" },
{ sSelector: "#zip" },
{ sSelector: "#tele" }

]

});

} );
[/code]