DataTables ile tablolarınızı listeliyor ve anlık filtrelerle istediğiniz verileri göstermek istiyorsanız, Column Filter eklentisi hemen imdadınıza yetişecektir. Bu eklenti sayesinde her bir sütunun/kolonun altına istediğiniz tipte filtreleme seçeneği ekleyip, bu filtrelerle üstündeki sütun/kolon içerisindeki verileri filtreleme şansına sahipsiniz. Örneğin bir sütun için text alanı eklediniz, diğer sütun için checkbox eklediniz ve bir diğer sütun için selectbox eklediniz. Çapraz sorgularla ve listelediğiniz veriler içerisinden seçim yaparak, tablonuzdaki verileri özelleştirmeniz ve görüntülemeniz mümkün. Column Filter’ın bir diğer güzel özelliği ise sayı ve tarih aralığı seçeneğinin olması. Tablonuzda eğer bir tarih sütunu da varsa, belli bir tarih aralığındaki verilerinizi listelemek isterseniz, bunu sadece
{ type: “date-range” }
ekleyerek çzöebilirsiniz. Ancak bootstrap framework’ü ile tasarlanmış bir web sitesinde çalışıyorsanız, date-range özelliğinin çalışmayacağını hatta diğer özelliklerin de çalışmasını engellediğini farkettiniz ya da farkedeceksiniz. Bu karışıklığın sebebi şu: Column Filter varsayılan olarak jQuery UI scriptinin datepicker özelliğini çalıştırmakta ve date-range fonksiyonunda bu özellik varmış gibi derleme yapmakta. Oysa ki bootstrap framework’ünün datepicker kodları biraz daha farklı. Yapmanız gereken şey özetle şöyle olacak.
jquery.dataTables.columnFilter.js dosyanızı açın ve fnCreateDateRangeInput fonksiyonunu bulun. Bu fonksiyon içerisinde
dCellDate = $.datepicker.parseDate($.datepicker.regional[""].dateFormat, aData[_fnColumnIndex(index)]);
gördüğünüz satırı
dCellDate = new Date(aData[_fnColumnIndex(index)]);
ile değiştirin. Sorununuz büyük ihtimalle çözülecektir. Eğer hala sorun yaşıyorsanız, date-range’i kullanmayıp, diğer eklediğiniz tüm tipleri kontrol edin.
Column Filter kullanım örneklerine ulaşmak için tıklayın.
Bir yanıt bırakın