彰化一整天的論壇

 找回密碼
 立即註冊
查看: 51|回復: 0

【轉貼】datatable查詢日期區間

[複製鏈接]
發表於 2019-7-17 21:03:14 | 顯示全部樓層 |閱讀模式
  1. <div class="container">
  2.   <div class="col-md-4 pull-right">
  3.     <div class="input-group input-daterange">

  4.       <input type="text" id="min-date" class="form-control date-range-filter" data-date-format="yyyy-mm-dd" placeholder="From:">

  5.       <div class="input-group-addon">to</div>

  6.       <input type="text" id="max-date" class="form-control date-range-filter" data-date-format="yyyy-mm-dd" placeholder="To:">

  7.     </div>
  8.   </div>
  9. </div>

  10. <table id="my-table">
  11.   <thead>
  12.     <tr>
  13.       <th>ID</th>
  14.       <th>Name</th>
  15.       <th>Created At</th>
  16.     </tr>
  17.   </thead>
  18.   <tbody>
  19.     <tr>
  20.       <th>1</th>
  21.       <th>Bob</th>
  22.       <th>2017-04-20</th>
  23.     </tr>
  24.     <tr>
  25.       <th>2</th>
  26.       <th>Jane</th>
  27.       <th>2017-02-15</th>
  28.     </tr>
  29.     <tr>
  30.       <th>3</th>
  31.       <th>Jill</th>
  32.       <th>2015-02-15</th>
  33.     </tr>
  34.     <tr>
  35.       <th>4</th>
  36.       <th>Joe</th>
  37.       <th>2016-08-06</th>
  38.     </tr>
  39.   </tbody>
  40. </table>
複製代碼

  1. // Bootstrap datepicker
  2. $('.input-daterange input').each(function() {
  3.   $(this).datepicker('clearDates');
  4. });

  5. // Set up your table
  6. table = $('#my-table').DataTable({
  7.   paging: false,
  8.   info: false
  9. });

  10. // Extend dataTables search
  11. $.fn.dataTable.ext.search.push(
  12.   function(settings, data, dataIndex) {
  13.     var min = $('#min-date').val();
  14.     var max = $('#max-date').val();
  15.     var createdAt = data[2] || 0; // Our date column in the table

  16.     if (
  17.       (min == "" || max == "") ||
  18.       (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
  19.     ) {
  20.       return true;
  21.     }
  22.     return false;
  23.   }
  24. );

  25. // Re-draw the table when the a date range filter changes
  26. $('.date-range-filter').change(function() {
  27.   table.draw();
  28. });

  29. $('#my-table_filter').hide();
複製代碼
https://stackoverflow.com/questions/38717543/how-do-i-filter-date-range-in-datatables

文章來源: https://jsfiddle.net/cjedgerton/hkoqbaex/1/
回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2019-8-22 12:34 , Processed in 0.109853 second(s), 19 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表