Prvi ste put ovdje? Pročitajte faq i registrirajte se.
x
  • Registracija
Dobrodošli, ovdje možete postavljati pitanja vezana za problematiku programiranja. Da bi postavili pitanje nije potrebna registracija :)

149 pitanja

181 odgovora

158 komentara

1,863 korisnika

Zadnje značke

Potvrđeni korisnik
AlberthaBeau...
Potvrđeni korisnik
AngelinaCarr...
Vrhunsko pitanje
Esmin Kadusc...
Potvrđeni korisnik
ShermanAzr56...
Potvrđeni korisnik
KarlSweetapp...

Datatables - kako proširiti filter?

+9 glasova

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

Upit Ožu 12, 2012 anonimno  
Ažurirano Ožu 19, 2012 primjeri
   
preseliio sam tvoje pitanje iz komentara u pitanje

4 Odgovori

+6 glasova

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 ;)

Odgovoreno Ožu 12, 2012 dev_q (902)  
Ažurirano Ožu 12, 2012 primjeri
0 glasova

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.

Odgovoreno Ožu 12, 2012 sinner_cro (25)  
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?
0 glasova

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
Odgovoreno Ožu 19, 2012 Predrag Mušić (562)  
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
0 glasova

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 :)

Odgovoreno Ožu 19, 2012 Siniša Dragičević Martinčić (69)