2017-01-12 4 views
0

Я написал код для настраиваемого фильтра в dataTables. Он принимает значения From и To и фильтрует данные в таблицах на основе этих двух значений. Он работает так, как ожидалось.
Код: https://jsfiddle.net/4w1552jp/10/
javascript code:Изменение таблиц данных (фильтр диапазона дат)

/*$('#data').dataTable();*/ 
     $(function() { 
      $('#minDate').datepicker(); 
      $('#maxDate').datepicker(); 
     }); 
     // Function for converting a mm/dd/yyyy date value into a numeric string for comparison (example 08/12/2010 becomes 20100812 
     /*function parseDateValue(rawDate) { 
      var dateArray = rawDate.split("/"); 
      var parsedDate = dateArray[2] + dateArray[0] + dateArray[1]; 
      return parsedDate; 
     }*/ 
     $.fn.dataTableExt.afnFiltering.push(
      function(oSettings, aData, iDataIndex) { 
      var iFini = ~~moment($('#minDate').val(), "DD/MM/YYYY").format("X"); 
      var iFfin = ~~moment($('#maxDate').val(), "DD/MM/YYYY").format("X"); 
      var evalDate = ~~moment(aData[4], "YYYY/MM/DD").format("X"); 
      if (evalDate >= iFini && evalDate <= iFfin) { 
       return true; 
      } else { 
       return false; 
      } 
      } 
     ); 
     $(document).ready(function() { 
      var table = $('#data').DataTable({ 
       dom: 'Bfrtip', 
       buttons: [ 
        'copyHtml5', 
        'excelHtml5', 
        'csvHtml5', 
        'pdfHtml5' 
       ] 
      }); 

      // Event listener to the two range filtering inputs to redraw on input 
      $('#minDate, #maxDate').keyup(function() { 
       table.draw(); 
      }); 
     }); 

Полный результат экран находится в: http://jsfiddle.net/4w1552jp/10/show/
В нижней части этой страницы вы можете увидеть DIV data_info, который содержит информацию о том, как таблицы данных, сколько данных отображения. ..

<div id="data_info" class="dataTables_info" role="status" aria-live="polite">Showing 1 to 10 of 26 entries (filtered from 58 total entries)</div> 

Показывается вот так: Showing 1 to 10 of 26 entries (filtered from 58 total entries)
Я хочу, чтобы он отображался как Showing 1 to 10 of 26 entries независимо от того, сколько фильтров фильтра диапазона дат данных (странный запрос от моего клиента), но фильтр должен работать так, как есть. Как я могу редактировать информацию в data-info div программно?

ответ

0

Для того, чтобы редактировать, используйте расширение языка данныхTable. s на вашем конструкторе.

 "language": { 
      "infoFiltered": "" 
      }, 

Source

+0

Как это ответ на мой вопрос? –

+0

Он по умолчанию удалит "(отфильтрован из 58 итоговых записей)". Вы попробовали? –

+0

Отлично, это сработало .. Извините за downvote, я поддержал :) –

1

Ну, это своего рода хак или обход, но он будет работать для ваших нужд.

Добавить onchange слушателя, что сОн идентификатор и использовать только строку до слова (фильтрованного.

В вашем документе готовой функции ...

$("data_info").on("change",function(){ 
    var oldHTML = $("data_info").html(); 
    var newHTML = oldHTML.substring(0,oldHTML.indexOf("(filtered") - 1); 
    $("data_info").html(newHTML); 
}); 

Это запустит на начало строки и использовать все символы до индекса (отфильтрованный.

+0

Ну ... это не работает здесь ... –

Смежные вопросы