Datatabellen: filter rijen op basis van waarde in kolom

Ik moet rijen filteren uit een datatabel die geen bepaalde waarde in een kolom bevatten. Met de onderstaande gegevens zou ik bijvoorbeeld alleen resultaten willen weergeven waarbij type = "Hond":

<table id="petowners">
<tr>
    <th>Type</th>
    <th>Breed</th>
    <th>Owner</th>
</tr>
<tr>
    <td>Dog</td>
    <td>Doberman</td>
    <td>Peter</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Jaguar</td>
    <td>Paul</td>
</tr>
<tr>
    <td>Dog</td>
    <td>Poodle</td>
    <td>Mary</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Lion</td>
    <td>Ringo</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Tiger</td>
    <td>John</td>
</tr>
</table>

Dit is het script dat ik gebruik voor het configureren van sorteren en resultaten per pagina. Het is duidelijk dat de kolomgebaseerde filtering het ontbrekende onderdeel is waarvoor ik hulp nodig heb.

$(document).ready(function() {
    $('#petowners').dataTable( {
        "order": [[ 0, "asc" ]],
        "iDisplayLength": -1,
        "oLanguage": 
            {
                "sLengthMenu": 'Display  records'
            },
    } );
} );

Ik moet twee links, knoppen of selectievakjes toevoegen, een voor 'Hond' en een voor 'Kat'.

Wanneer een gebruiker op 'Dog' klikt, worden alleen de rijen met 'Dog' in de kolom 'Type' weergegeven. Evenzo wanneer op "Cat" wordt geklikt, moeten alleen de rijen worden weergegeven die "Cat" in de kolom "Type" bevatten.

Het lijkt een vrij eenvoudige functie, maar ik heb niets kunnen vinden op de datatables.net-site die laat zien hoe dit kan worden gedaan.

Ik hoop dat dit logisch is en dat iemand kan helpen.

Bij voorbaat hartelijk dank wOnkO de SaNE

0

8 antwoord

Met de huidige versie van DataTables kunt u dit doen met behulp van de functie 'Zoeken'.

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

Als je het filter ongedaan wilt maken, geef je gewoon een lege string door in plaats van regex.

data_table.columns(column_index).search('', true, false).draw();

Ik hoop dat dit helpt.

5
toegevoegd
Schone oplossing voor mij en werkt de tabel/statistieken/status correct bij
toegevoegd de auteur Mayhem, de bron
Dit zou het geaccepteerde antwoord moeten zijn.
toegevoegd de auteur jlesse, de bron

Met de huidige versie van DataTables kunt u dit doen met behulp van de functie 'Zoeken'.

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

Als je het filter ongedaan wilt maken, geef je gewoon een lege string door in plaats van regex.

data_table.columns(column_index).search('', true, false).draw();

Ik hoop dat dit helpt.

5
toegevoegd
Schone oplossing voor mij en werkt de tabel/statistieken/status correct bij
toegevoegd de auteur Mayhem, de bron
Dit zou het geaccepteerde antwoord moeten zijn.
toegevoegd de auteur jlesse, de bron

Met de huidige versie van DataTables kunt u dit doen met behulp van de functie 'Zoeken'.

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

Als je het filter ongedaan wilt maken, geef je gewoon een lege string door in plaats van regex.

data_table.columns(column_index).search('', true, false).draw();

Ik hoop dat dit helpt.

5
toegevoegd
Schone oplossing voor mij en werkt de tabel/statistieken/status correct bij
toegevoegd de auteur Mayhem, de bron
Dit zou het geaccepteerde antwoord moeten zijn.
toegevoegd de auteur jlesse, de bron

html:

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

javascript:

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function() {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }
2
toegevoegd
Werkt perfect, dank je.
toegevoegd de auteur Wonko the Sane, de bron
Ik heb een soortgelijke oplossing geprobeerd, maar deze werkte niet goed. Ik denk dat dit waarschijnlijk alleen werkt als uw gegevenstabel niet is gepagineerd.
toegevoegd de auteur jlesse, de bron

html:

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

javascript:

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function() {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }
2
toegevoegd
Werkt perfect, dank je.
toegevoegd de auteur Wonko the Sane, de bron
Ik heb een soortgelijke oplossing geprobeerd, maar deze werkte niet goed. Ik denk dat dit waarschijnlijk alleen werkt als uw gegevenstabel niet is gepagineerd.
toegevoegd de auteur jlesse, de bron

html:

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

javascript:

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function() {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }
2
toegevoegd
Werkt perfect, dank je.
toegevoegd de auteur Wonko the Sane, de bron
Ik heb een soortgelijke oplossing geprobeerd, maar deze werkte niet goed. Ik denk dat dit waarschijnlijk alleen werkt als uw gegevenstabel niet is gepagineerd.
toegevoegd de auteur jlesse, de bron

Probeer dit:

$ ('# petowners tr') each (function() {     var tdVal = $ (this) .find ("td: first"). text ();     als (tdVal == "Hond") doorgaan;     else $ (this) .hide (); });

Het is tot u dat u dit wilt verwijderen() het of verbergen (). Ook op een vergelijkbare manier die je kunt doen voor "Cat"

0
toegevoegd

Probeer dit:

$ ('# petowners tr') each (function() {     var tdVal = $ (this) .find ("td: first"). text ();     als (tdVal == "Hond") doorgaan;     else $ (this) .hide (); });

Het is tot u dat u dit wilt verwijderen() het of verbergen (). Ook op een vergelijkbare manier die je kunt doen voor "Cat"

0
toegevoegd