Datatables - kako proširiti filter?

Question

Zamislite situaciju: DataTables korišten za pregledavanje kataloga knjiga. Svaka knjiga ima svoje autore.

Pitanje je slijedeće: kako proširiti filter sa još jednim select elementom u kojem su imena autora kojim bi se filtrirali rezultati na samo jednog autora?

Uhvatio vremena pa se poigrao vezano uz spomenutu ideju :)
Imao sam problema kod mysql joina na više od jedne tablice ali to sam uspješno rješio.

Malo sam proučio primjere na http://datatables.net/ i vidio primjer DataTables individual column filtering example i vidio da se kod individualnog filtriranja tablica sprema u varijablu

    var oTable = $('#example').dataTable( {
        "sDom": '<"top"i>rt<"bottom"pl><"clear">',//"sDom": 'T<"clear">lfrtip',
        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "sve"]],
        "sScrollX": "100%",
        "bFilter": true,
        "bScrollCollapse": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "examples/ajax/ajaxjson-horor.php"
    } );

i da se ajax call poziva...

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

Zatim sam krenuo na 2 tablice, i dva dataTables objekta i tu je zapelo. Obje tablice imaju po 15 kolona i svaka kolona ima individualni filter.Obje tablice su unutar jQuery UI tabova,

varijable u kojima su dataTable objekti su oTable i aTable. Svaka ima svoj ajaxSource. Nakon deklaracije pokušao sam dobiti da filteri na obje tablice rade. Na prvoj rade bez greške ali kad na drugoj pogledam varijable koje su poslane $_GET metodom nema mojih testnih vrijednosti. pa ne dobijem točan izlist vrijednosti.

Gornju funkciju sam modificirao, promijenivši selektor sa tfoot input na konkretan id.

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

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

Prva dva elementa rade; odnose se na 1. dataTables objekt, ali kad u Firebug-u pogledam ajax call koji oizivaju druga 2 elementa, parametri vazani za filtere su slijedeći:

sSearch ,
sSearch_0,
sSearch_1,  
sSearch_10  
sSearch_11, 
sSearch_12, 
sSearch_13, 
sSearch_14, 
sSearch_2,
sSearch_3,  
sSearch_4,  
sSearch_5,  
sSearch_6,  
sSearch_7,  
sSearch_8,  
sSearch_9...

isti kao i kod poziva sa 1. objekta ali bez vrijednosti.

Pitanje glasi: kako se u konkretnom slučaju referencirati na pojedinu tablicu?

Hvala unaprjed.

Siniša

Comments

preseliio sam tvoje pitanje iz komentara u pitanje

Answer 1

S obzirom da nema koda mogu pokazati svoj pseudo kod:

U HTML-u izvan Datatables-a imam ovakav select (koji može doći i iz baze):

<select id="menu-quick-filter" name="menu-quick-filter" title="Brza selekcija">
    <option value="0">sve</option>
    <option value="paid">plaćeni</option>
    <option value="unpaid">neplaćeni</option>
    <option value="with_barcode">sa barkodom</option>
    <option value="no_barcode">bez barkoda</option>
</select>

U samim Datatables moraš napraviti sljedeće:

oTable = $('#dataTable1').dataTable({
    "bProcessing": true,
    "bServerSide": true,
    //"sAjaxSource": '<?php echo site_url();?>kontroler/metoda',
    "fnServerData": function(sSource, aoData, fnDataTablesPipeline){
        $('#menu-quick-filter').click(function(){
            aoData.push( { "name": "brzi_filter", "value": ""+$('#menu-quick-filter').val()+"" });
        });
        aoData.push( { "name": "brzi_filter", "value": ""+$('#menu-quick-filter').val()+"" });
        $.ajax({
            'dataType'  : 'json',
            'type'      : 'GET',
            "url"       : '<?php echo site_url();?>kontroler/metoda',
            "data"      : aoData
        });
    }
});

Ako si u php-u na serverskoj strani dohvati:

<?php
$brzi_filter = $_GET['brzi_filter'];

//i onda u query-u
...
switch($brzi_filter){
    case 'paid':
        //dio upita za plaćene
        $query .= ' ';
    break;
    case 'unpaid':
        //dio upita za neplaćene
        $query .= ' ';
    break;
    case 'with_barcode':
        //dio upita za one sa barkodom
        $query .= ' ';
    break;
    case 'no_barcode':
        //dio upita za one bez barkoda
        $query .= ' ';
    break;
    case '0':
        //dio upita ako nije ništa izabrano
        $query .= ' ';
    break;
    default:
        //default
        $query .= ' ';
    break;
}
...
?>

Ako pokažeš dio koda možda ti možemo i više pomoći ;)

Answer 2

Hvala na brzom odgovoru.
Za sada nemam koda da ga pokažem, ovo je ideja koja mi je pala na um. Javit ću se ako budem trebao više pomoći.

Comments

Ako ti je odgovor pomogao možeš ga prihvatiti/označiti kao najbolji odgovor

---

Da li možeš sada probati se ulogirati sa facebook  profilom?

Answer 3

Meni ovo uredno radi:

<!doctype html>
<html>
<head>

<!-- jQuery UI CSS -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/blitzer/jquery-ui.css" type="text/css" rel="stylesheet" />

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<!-- jQuery UI -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tablica 1</a></li>
        <li><a href="#tabs-2">Tablica 2</a></li>
    </ul>
    <div id="tabs-1">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="oTable">
            <thead>
                <tr>
                    <th width="20%">Rendering engine</th>
                    <th width="25%">Browser</th>
                    <th width="25%">Platform(s)</th>
                    <th width="15%">Engine version</th>
                    <th width="15%">CSS grade</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <th>Rendering engine</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Engine version</th>
                    <th><input type="text" name="td_alb_naslov" id="td_alb_naslov"></th>
                </tr>
            </tfoot>
        </table>
    </div>
    <div id="tabs-2">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="aTable">
            <thead>
                <tr>
                    <th width="20%">Rendering engine</th>
                    <th width="25%">Browser</th>
                    <th width="25%">Platform(s)</th>
                    <th width="15%">Engine version</th>
                    <th width="15%">CSS grade</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <th>Rendering engine</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th><input type="text" name="td_traka_naslov" id="td_traka_naslov"></th>
                    <th>CSS grade</th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){

    $( "#tabs" ).tabs();

    var oTable = $('#oTable').dataTable( {
        "sDom": '<"top"i>rt<"bottom"pl><"clear">',//"sDom": 'T<"clear">lfrtip',
        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "sve"]],
        "bJQueryUI": true, //jQuery UI tema
        "sScrollX": "100%",
        "bFilter": true,
        "bScrollCollapse": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "datatables_ajax_source.php",
        "fnDrawCallback": function(oSettings){}

    } );
    var aTable = $('#aTable').dataTable( {
        "sDom": '<"top"i>rt<"bottom"pl><"clear">',//"sDom": 'T<"clear">lfrtip',
        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "sve"]],
        "bJQueryUI": true, //jQuery UI tema
        "sScrollX": "100%",
        "bFilter": true,
        "bScrollCollapse": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "datatables_ajax_source.php",
        "fnDrawCallback": function(oSettings){}
    });

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

    $("#td_traka_naslov").keyup( function () {
        /* Filter on the column (the index) of this element */
        console.log(this.value);
        aTable.fnFilter( this.value, $("tfoot input").index(this) );
    } );    
    $("#td_traka_izvodjac").keyup( function () {
        /* Filter on the column (the index) of this element */
        console.log(this.value);
        aTable.fnFilter( this.value, $("tfoot input").index(this) );
    } ); 
});
</script>

</div>
</body>
</html>

Za drugu tablicu poslani parametri izgledaju ovako:

sSearch 
sSearch_0   
sSearch_1   test
sSearch_2   
sSearch_3   
sSearch_4

Comments

Ne znam što da ti kažem, još sam sinoć mijenjao nešto poluslijep nakon cijelog dana buljenja u monitor mislim da sam izbrisao id-jeve.
Tu je link pa pogledaj.
http://hdubaza.com/beta/prvaformaradio2.php
Nije mi jasno zašto se filteri ponašaju tako kako se ponašaju kod samog učitavanja. Tek nakon sortiranja se tablica postavi kako bi trebala

Answer 4

Ovo radi, ali ima samo jedan input field po tablici i taj kontrolira obje tablice a ideja je bila da svaka tablica ima svoje inpute za svaku kolonu, i da su tablice odvojene. U svakom slučaju, dobar pokušaj i fnDrawCallback ću svakako proučiti.
Osnovna ideja je bila da imam 3 elementa u headeru; Naslov, izvođač i izdavač koji su povezani sa odgovarajučim inputima u footerima tablica ovisno o tome što je selektirano u buttonsetu u headeru.
Hvala na pomoći u svakom slučaju :)