DataTables: sütundaki değere göre satırları süz

Bir sütunda belirli bir değer içermeyen bir veri tablosundan satırları filtrelemem gerekiyor. Örneğin, aşağıdaki verilerle, yalnızca "Dog" türündeki sonuçları göstermek istiyorum:

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

İşte sayfa başına sıralama ve sıralama yapılandırmak için kullanıyorum komut dosyası. Açıkçası, sütun tabanlı filtreleme, yardıma ihtiyacım olan eksik bit.

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

Biri "Köpek" diğeri "Kedi" için iki bağlantı, düğme veya onay kutusu eklemem gerekiyor.

Bir kullanıcı "Köpek" i tıkladığında, yalnızca "Tür" sütununda "Köpek" içeren satırlar görüntülenir. Benzer şekilde "Kedi" tıklandığında, sadece "Tip" sütununda "Kedi" içeren satırlar gösterilmelidir.

Oldukça basit bir özellik gibi görünüyor, ancak datatables.net sitesinde bunun nasıl yapılabileceğini gösteren hiçbir şey bulamadım.

Umarım bu mantıklı ve birileri yardımcı olabilir.

şimdiden çok teşekkürler KAZANANLARLA

0

8 cevap

DataTable'ların geçerli sürümüyle bunu 'search' işlevini kullanarak yapabilirsiniz.

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

Filtreyi geri almak istiyorsanız, sadece regex yerine boş bir dize geçirin.

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

Bu yardımcı olur umarım.

5
katma
Benim için temiz bir çözüm ve tablo/istatistik/durumu doğru şekilde günceller
katma yazar Mayhem, kaynak
Bu kabul edilen cevap olmalı.
katma yazar jlesse, kaynak

DataTable'ların geçerli sürümüyle bunu 'search' işlevini kullanarak yapabilirsiniz.

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

Filtreyi geri almak istiyorsanız, sadece regex yerine boş bir dize geçirin.

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

Bu yardımcı olur umarım.

5
katma
Benim için temiz bir çözüm ve tablo/istatistik/durumu doğru şekilde günceller
katma yazar Mayhem, kaynak
Bu kabul edilen cevap olmalı.
katma yazar jlesse, kaynak

DataTable'ların geçerli sürümüyle bunu 'search' işlevini kullanarak yapabilirsiniz.

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

Filtreyi geri almak istiyorsanız, sadece regex yerine boş bir dize geçirin.

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

Bu yardımcı olur umarım.

5
katma
Benim için temiz bir çözüm ve tablo/istatistik/durumu doğru şekilde günceller
katma yazar Mayhem, kaynak
Bu kabul edilen cevap olmalı.
katma yazar jlesse, kaynak

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
katma
Mükemmel çalışıyor, teşekkür ederim.
katma yazar Wonko the Sane, kaynak
Buna benzer bir çözüm denedim ama düzgün çalışmadı. Bence bu muhtemelen sadece veri tablonuz sayfalandırılmadığında işe yarıyor.
katma yazar jlesse, kaynak

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
katma
Mükemmel çalışıyor, teşekkür ederim.
katma yazar Wonko the Sane, kaynak
Buna benzer bir çözüm denedim ama düzgün çalışmadı. Bence bu muhtemelen sadece veri tablonuz sayfalandırılmadığında işe yarıyor.
katma yazar jlesse, kaynak

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
katma
Mükemmel çalışıyor, teşekkür ederim.
katma yazar Wonko the Sane, kaynak
Buna benzer bir çözüm denedim ama düzgün çalışmadı. Bence bu muhtemelen sadece veri tablonuz sayfalandırılmadığında işe yarıyor.
katma yazar jlesse, kaynak

Bunu dene:

$ ('# petowners tr'). her (function() {     var tdVal = $ (this) .find ("td: first"). text ();     eğer (tdVal == "Köpek") devam ederse;     başka bir $ (this) .hide (); });

Bu size kalmış() ya da hide() istediğiniz size kalmış. Aynı şekilde "Kedi" için de yapabilirsiniz.

0
katma

Bunu dene:

$ ('# petowners tr'). her (function() {     var tdVal = $ (this) .find ("td: first"). text ();     eğer (tdVal == "Köpek") devam ederse;     başka bir $ (this) .hide (); });

Bu size kalmış() ya da hide() istediğiniz size kalmış. Aynı şekilde "Kedi" için de yapabilirsiniz.

0
katma