A Filter Question

A Filter Question

UnkleFrankUnkleFrank Posts: 5Questions: 0Answers: 0
edited September 2012 in DataTables 1.9
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

Replies

  • UnkleFrankUnkleFrank Posts: 5Questions: 0Answers: 0
    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]
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    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
  • UnkleFrankUnkleFrank Posts: 5Questions: 0Answers: 0
    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)
    */
  • UnkleFrankUnkleFrank Posts: 5Questions: 0Answers: 0
    and...
    Does the code you reference above replace mine or go along with it.
    Sorry, brand new to this.

    Frank
  • robertmazzorobertmazzo Posts: 22Questions: 0Answers: 0
    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
  • UnkleFrankUnkleFrank Posts: 5Questions: 0Answers: 0
    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]
This discussion has been closed.