Jquery数据表日期范围过滤器

Question

下面的代码工作正常，但我需要添加一个新功能，允许用户根据开始日期和结束日期过滤一系列记录，用户应该能够获取其间的所有记录，我能够找到一个数据表页面教程来实现这个，但我无法将其添加到代码中，请你帮我，这是链接

https://datatables.net/plug-ins/filtering/row-based/range_dates

＆＃13;

＆＃13;

$(document).ready(function() {
  $(function() {
    $("#datepickerStart").datepicker();
    $("#datepickerEnd").datepicker();
  });

  // Setup - add a text input to each footer cell
  $('#example tfoot th').each(function() {
    var title = $(this).text();
    if (title === "Start date") {
      $(this).html('<input type="text" id="datepickerStart" placeholder="Search ' + title + '" />');
    } else if (title === "End date") {
      $(this).html('<input type="text" id="datepickerEnd" placeholder="Search ' + title + '" />');
    } else {
      $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    }
  });

  // DataTable
  var table = $('#example').DataTable({


  });







  $('#example tbody').on('click', 'tr', function() {
    $(this).toggleClass('selected');
  });


  $('#example tbody')
    .on('mouseenter', 'td', function() {
      var colIdx = table.cell(this).index().column;

      $(table.cells().nodes()).removeClass('highlight');
      $(table.column(colIdx).nodes()).addClass('highlight');
    });


  $('#button').click(function() {
    alert(table.rows('.selected').data().length + ' row(s) selected');
  });

  // Apply the search
  table.columns().every(function() {
    var that = this;

    $('input', this.footer()).on('keyup change', function() {
      if (that.search() !== this.value) {
        that
          .search(this.value)
          .draw();
      }
    });
  });
});

＆＃13;

tfoot input {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
}

tr.highlight {
  background-color: blue !important;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.13/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<table id="example" class="display" cellspacing="0" width="100%">

  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>End date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th id="min">Start date</th>
      <th id="max">End date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>2011/04/27</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>2011/04/29</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>2011/04/28</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>2012/03/30</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>2008/11/30</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>2012/12/21</td>
      <td>$372,000</td>
    </tr>

  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该能够在构建表格后将该代码放在javascript中的任何位置。

你只需改变这些行：

    $.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
  var iFini = document.getElementById('datepickerStart').value; 
  var iFfin = document.getElementById('datepickerEnd').value; 
  var iStartDateCol = 4; 
  var iEndDateCol = 5; 

    iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2);
    iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2);

    var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
    var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);

    if ( iFini === "" && iFfin === "" )
    {
        return true;
    }
    else if ( iFini <= datofini && iFfin === "")
    {
        return true;
    }
    else if ( iFfin >= datoffin && iFini === "")
    {
        return true;
    }
    else if (iFini <= datofini && iFfin >= datoffin)
    {
        return true;
    }
    return false;
}
);

Answer 2

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/plug-ins/1.10.13/filtering/row-based/range_dates.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.13/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" >

    $(document).ready(function() {
        $( function() {
         $( "#datepickerStart" ).datepicker();
          $( "#datepickerEnd" ).datepicker();
        } );

        // Setup - add a text input to each footer cell
        $('#example tfoot th').each( function () {
            var title = $(this).text();
            if (title === "Start date") {
                $(this).html( '<input type="text" id="datepickerStart" placeholder="Search '+title+'" />' );
                }
            else if (title === "End date") {
                $(this).html( '<input type="text" id="datepickerEnd" placeholder="Search '+title+'" />' );
                }
                else {
                                    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
                }
        } );

        // DataTable
        var table = $('#example').DataTable({ 

      $('#min').keyup( function() { table.draw(); } );
      $('#max').keyup( function() { table.draw(); } );

        }
        );


        var iFini = document.getElementById('datepickerStart').value; 
        var iFfin = document.getElementById('datepickerEnd').value; 
        var iStartDateCol = 4; 
        var iEndDateCol = 5; 


        $.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        var iFini = document.getElementById('fini').value;
        var iFfin = document.getElementById('ffin').value;
        var iStartDateCol = 6;
        var iEndDateCol = 7;

        iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2);
        iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2);

        var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
        var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);

        if ( iFini === "" && iFfin === "" )
        {
            return true;
        }
        else if ( iFini <= datofini && iFfin === "")
        {
            return true;
        }
        else if ( iFfin >= datoffin && iFini === "")
        {
            return true;
        }
        else if (iFini <= datofini && iFfin >= datoffin)
        {
            return true;
        }
        return false;
    }
);




        $('#example tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
        } );


         $('#example tbody')
            .on( 'mouseenter', 'td', function () {
                var colIdx = table.cell(this).index().column;

                $( table.cells().nodes() ).removeClass( 'highlight' );
                $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
            } );


        $('#button').click( function () {
            alert( table.rows('.selected').data().length +' row(s) selected' );
        } );

        // Apply the search
        table.columns().every( function () {
            var that = this;

            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        } );
    } );






    </script>

    <style>
    tfoot input {
            width: 100%;
            padding: 3px;
            box-sizing: border-box;
        }
    tr.highlight {
        background-color: blue !important;
    }

    </style>





    <table id="example" class="display" cellspacing="0" width="100%">

            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>End date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th id="min">Start date</th>
                    <th id="max">End date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>2011/04/27</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>2011/04/29</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>2011/04/28</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>2012/03/30</td>
                    <td>$433,060</td>
                </tr>
                <tr>
                    <td>Airi Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>2008/11/30</td>
                    <td>$162,700</td>
                </tr>
                <tr>
                    <td>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>2012/12/21</td>
                    <td>$372,000</td>
                </tr>

            </tbody>
        </table>

Answer 3

我不知道是否有帮助，但我会按照你的要求做这件事

修改

这里有更多解释。 $ .fn.DataTable.ext.search是为Datatables提供的API，用于扩展过滤功能。首先是一个数组，其中包含必须应用下面函数的表的名称（这是因为在同一页面上有多个表），然后从de datepickers获取值并拆分以创建另一个Date who在三种情况下（From，To和StartDate）具有相同的格式。然后比较它们之间的日期并过滤为适当的。 StartDate来自表的当前记录。

在datepickers我添加了类日期范围过滤器

var allowFilter = ['tableOT'];

$('.date-range-filter').change(function() {
            oTable.draw();
        });

$.fn.dataTable.ext.search.push(
      function(settings, data, dataIndex) {
          // check if current table is part of the allow list
          if ( $.inArray( settings.nTable.getAttribute('id'), allowFilter ) == -1 )
          {
              // if not table should be ignored
              return true;
          }
          var min = $("#<%=txtFechaDesde.ClientID %>").val();
          var max = $("#<%=txtFechaHasta.ClientID %>").val();
          var fromDate;
          var toDate;
          // need to change str order before making  date obect since it uses a new Date("mm/dd/yyyy") format for short date.
          var d = data[0].split("/");
          var startDate = new Date(d[1]+ "/" +  d[0] +"/" + d[2]);
          if(min != ""){
              var fd = min.split("/");
              fromDate =  new Date(fd[1]+ "/" +  fd[0] +"/" + fd[2]);
          }
          if(max != ""){
              var td = max.split("/");
              toDate =  new Date(td[1]+ "/" +  td[0] +"/" + td[2]);
          }

          if (fromDate == null && toDate == null) { return true; }
          if (fromDate == null && startDate <= toDate) { return true;}
          if(toDate == null && startDate >= fromDate) {return true;}
          if (startDate <= toDate && startDate >= fromDate) { return true; }
          return false;
      }
    );