Datatable İki Tarih Arası Filtreleme Yapımı

 

Herkese merhaba,

Bugün yapacağımız örnekte, datatable tablolarımızda iki tarih aralığında filtreleme yapısını göstereceğiz.

Görseldeki gibi iki input alanımız ile girilen tarihleri Date kolonundaki verilere göre filtrelemektedir.

Çok uzatmadan adımlarımıza geçiyoruz.

Not:Datalarımızın  datatable tablomuza getirdiğimizi varsayarak devam ediyoruz.

1) Datamızda gelen tarih alanının formatını belirtilen şekilde değiştirelim.

 
   @item.Tarih.ToString("yyyyMMdd")

2) Tablomuzun üzerine tarih alanlarımızı gireceğimiz input alanlarımızı yazalım.Id değerlerinin birisi min diğeri ise max olmalıdır.

 
   <input class="form-control" id="min" type="text" />
   <input class="form-control" id="max" type="text" />

3) İnput alanlarımızı yaptıktan sonra aşağıdaki kodu script alanımıza ekleriz.

Eklerken dikkat etmemiz gereken nokta,data alanındaki sayısal değeri tablomuzda bulunan tarih alanının index numarasını yazmak olacaktır.Tarih alanımızın index numarası 2 dir.

 
  $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var min = parseInt($('#min').val(), 10);
                    var max = parseInt($('#max').val(), 10);
                    var age = parseFloat(data[2]) || 0; // talomuzda bulunan tarih alanının index numarası

                    if ((isNaN(min) && isNaN(max)) ||
                        (isNaN(min) && age <= max) ||
                        (min <= age && isNaN(max)) ||
                        (min <= age && age <= max)) {
                        return true;
                    }
                    return false;
                }
            );

4) Yukarıda yazdığımız input alanlarındaki değerleri alır ve tabloyu yeniden set ederiz.

 
   $('#min, #max').keyup(function () {
                datatable.draw();
                //Tablo tekrardan set edilir.

            });

Sonuç:

Minimum ve maximum alanlarına girilen tarihler sonucu iki tarih aralığındaki değerler tabloda tekrardan set edilir.

İşlemimiz başarıyla tamamlandı.

via GIPHY

Bir sonraki yazıda görüşmek dileğiyle.

#datatable-date-range #datatable-range#date

kaynak :

datatable