jQuery DataTable - Satırları istenen şekilde gizle

Question

Şu anda web tabanlı bir CRM üzerinde çalışıyoruz. Proje, sinir bozucu bir sorun dışında harika gidiyor.

uygulamada hemen hemen her sortable tablo için DataTable jQuery plug-in kullanıyoruz. İşte aktif olayların bir listesi.

Gördüğünüz gibi

, üçüncü sütun önceki üstüne yerleştirilir

Kullanıcılar bir filtre kutusu istenen olaylar (bilet, değişiklik isteği, hizmet talebi, vs.) türünü temsil olayları filtrelemek için tablo. Örneğin, "Yalnızca bilet" seçeneğini belirlerseniz, diğer her tür gizlenir. Şimdiye kadar her şey çalışıyor.

Bunu yapmak için her satırın, olay türünü temsil eden bir CSS sınıfı vardır.

• Sıra 1: sınıf = "Anahtar"
• Satır 2: sınıf = "changeRequest"

filtre kutusu değerini verir, JavaScript kodu aşağıdaki yürütülür

$('table.sortable').each(function() { 
    for (var i = 0; i < rows.length; i++) { 
     if ($(rows[i]).hasClass(vClass)) $(rows[i]).hide(); 
    } 
}); 

• vClass = CS Olay türü temsil eden S sınıfı
• satır = Tüm dataTable satırları, "$ (SomeDatatable) .dataTable(). FnGetNodes();"
• $ ('table.sortable') = Tüm datatables

Şimdi kemerlerinizi (Fransızca astar) sıkın. Bir satırı örtülü olarak gizlediğinizde, dataTable yine de sayar. İşte muhteşem sonuç.

açıkladı varlık, ana soru gidiyor: Ben sonsuza silmeden satırları gizlemek istediğiniz dataTable diyeceğim nasıl? DataTable'ın bir filtre kutusu zaten var, ancak filtre tipi (görüntüde değil) ile birlikte bağımsız olarak çalışması gerekiyor.

İkinci bir filtre eklemenin bir yolu var mı?

Answer 1

O tablo için özel bir filtre yazmak gerekir. Örnek:

$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) { 
    if ($(oSettings.nTable).hasClass('do-exclude-filtering')) { 
     return aData[16] == '' || $('#chkShowExcluded').is(':checked'); 
    } else return true; 
}); 

bu örnekte, dinamik olarak eklemek ve kaldırmak bir tabloya sınıf 'filtreleme-hariç yok', ve bu sınıfı vardır, eğer, belirli bir hücrenin bir değer olup olmadığını görmek için, her satır kontrol .Mantık, hayal edebileceğiniz her şey olabilir, sadece hızlı tutun (bu, her satır için, her çizim için, sayfadaki her tablo için uygulanır (DT'deki bir 'global' diziye eklenir, tek bir örnek değil).

Dönüş true, Üstbilgi satırı İşte

afnFiltering özelliklerini kullanmak Datatable referanstır gizlemek için false dönmek için: yerine .fnFilter() kullanmanın buna http://datatables.net/development/filtering

avantajı bu BOYUNCA çalışmasıdır İLE, kullanıcı sağ üstteki filtreleme kutusunu hala kullanabilir (varsayılan olarak, senin sağın altta olduğunu görüyorum) Onları göstermeyi seçtiğiniz sonuçları belirtin. Diğer bir deyişle, "tamamlanmış" öğelerin tümünü sakladığınızı varsayarsınız, böylece kullanıcı tablodaki 'tamamlanmamış' öğeleri görür. Sonra hala 'laptop' için tabloyu filtreleyebilir ve sadece BOTH eksik olan satırları görebilir ve açıklamalarına 'laptop' yazabilirler.

Answer 2

DataTable kutunun dışında bu sunmaktadır: DataTables individual column filtering example veya daha iyisi DataTables individual column filtering example (using select menus)

Answer 3

Veritabamı kısmına hiç kullanmadığım kadar yardımcı olamıyorum, ancak çalıştırmak javascript artırabilir zaman filtre kutusu değişikliği: uygun css stil

$('.table-sortable').find('tr.' + vClass).removeClass('hidden').addClass('show'); 
$('.table-sortable').find('tr:not(.' + vClass + ')').removeClass('hidden').addClass('show'); 

. Yoksa yapabilirdi: Bu yaklaşımlardan birini denerseniz

$('.table-sortable').find('tr.' + vClass).show(); 
$('.table-sortable').find('tr:not(.' + vClass + ')').hide(); 

yerine şanslı olsun ve Datatable sorunu aşmak ama her iki şekilde senin kod daha verimli olacağına inanıyoruz olabilir.