Jquery 数据表日期范围过滤器

Question

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

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

$(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();
      }
    });
  });
});

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

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

<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>

Answer 1

    <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>