Question

我使用datatables搜索API来过滤包含unix日期的列上两个日期之间的表格结果。在Chrome上对此进行测试后，搜索会按预期进行。

但是在IE 11上运行网站，此搜索功能不会过滤数据表上的记录。我通过在IE上踩到控制台进行调试，并没有显示相关代码的任何错误消息。

这是根据传入的startDate和endDate执行过滤的代码。它使用这两个值过滤索引10处的colValue。

日期搜索变量的格式：

startDate = moment().subtract(1, 'week').day(1).format("MMM DD YYYY");
endDate = moment().day(1).format("MMM DD YYYY");
var colValue= moment.unix($(this).data('order')).format("DD-MMM-YYYY hh:mm A");

输入日期搜索：

min is 1413195180000
max is 1413195180000
colValue is 1413195180000

过滤代码：

/* Custom filtering function which will search data in column four between          two values */
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var min = startDate;
            var max = endDate;
            var colValue = Date.parse(data[10]); // use data for the Last_Updated column


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

问题：

如何在IE中调用dataTables日期范围搜索API？

Answer 1

出现了一些问题，但我会尝试解决每个问题，以便了解我是如何找到解决方案的。

最佳做法/惯例

你有一个文档就绪函数嵌套在另一个文档就绪函数内部$(function () {...}) $(document).ready(function () {...})
DataTable搜索功能扩展应位于文档就绪功能之外
您在setDateRange函数中指定了错误的选择器。此外，应在输入上设置.val()，而不是.html()
您可以通过setDateRange函数

init

导致其破裂的原因

每次时，var colValue = Date.parse(data[1]);行都会返回NaN，因为Date.parse仅适用于日期对象，数据[1]是字符串。正确的方法是new Date(parseInt(data[1])).getTime()
即使只是最基本的库函数调用，我也看到了非常奇怪的事情。我认为这是库版本不匹配，所以我插入了你正在使用的库的更新/更新版本，这极大地帮助了

以下是您要完成的工作演示 - 请告诉我这是否适用于您，或者您有任何疑问！

//Date range vars
var startDate = new Date();
var endDate = new Date();
var laststartDate = new Date();
var lastendDate = new Date();
startDate = moment().subtract(1, 'week').day(1).format("MMM DD YYYY");
endDate = moment().day(1).format("MMM DD YYYY");

/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var min = new Date(startDate).getTime();
    var max = new Date(endDate).getTime();
    var colValue = new Date(parseInt(data[1])).getTime(); // use data for the Last_Updated column

    if (!isNaN(colValue) && ((isNaN(min) && isNaN(max)) ||
      (isNaN(min) && colValue <= max) ||
      (min <= colValue && isNaN(max)) ||
      (min <= colValue && colValue <= max))) {
      return true;
    }
    return false;
  }
);


//Once the Document DOM is ready..
$(function() {
  function setDateRange(start, end) {
      $('#dateRangeLbl .date-range-input').val(start.format('MMM DD, YYYY') + ' - ' + end.format('MMM DD, YYYY'));
      startDate = Date.parse(start);
      endDate = Date.parse(end);
      historyTable.draw();
    }
    //Init the escalation DataTable and
    //Set sorting desc by Updated time.
  var historyTable = $('#escalation').DataTable({
    "order": [
      [1, "desc"]
    ],
    colReorder: true,
    responsive: true,
    dom: 'B<"clear">lfrtip',
  });


  //Input event listener for date range picker
  $('#dateRangeInput').daterangepicker({
    ranges: {
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
    }
  }, setDateRange);

  //init the default date range filter on refresh
  init();

  function init() {
    var d = new Date("October 13, 2014");
    startDate = Date.parse(d);
    endDate = Date.now();
    setDateRange(moment(startDate), moment(endDate));
  }
}); //end $(document).ready

<html>

<head>
  <!-- Include Required Prerequisites -->
  <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

  <!-- Include Date Range Picker -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
  <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
</head>

<body>
  <div class="container" id="tableViewContainer" style="padding-left:0px;">


    <div class="table-responsive">
      <div class="table-responsive max-width-table" id="datatable-wrapper">

        <div class="form-group form-inline pull-right" id="tblDateRange">
          <label id="dateRangeLbl" class="date-range-label">
            <span class="glyphicon glyphicon-calendar"></span> 
            <input class="input-sm top-buffer pull-right date-range-input" id="dateRangeInput" type="text" name="daterange" value="01/01/2016 - 12/25/2016" />

          </label>
        </div>

        <table id="escalation" class="table table-striped table-bordered" cellspacing="0">


          <thead>
            <tr>
              <th>ID</th>
              <th>Last Updated</th>
              <th>Formated Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>1413195180000</td>
              <td>10/13/2014</td>
            </tr>
            <tr>
              <td>2</td>
              <td>1713195110000</td>
              <td>04/15/2024</td>
            </tr>
            <tr>
              <td>3</td>
              <td>1943195110000</td>
              <td>07/30/2031</td>
            </tr>
            <tr>
              <td>4</td>
              <td>3043195110000</td>
              <td>06/07/2066</td>
            </tr>

          </tbody>
        </table>


      </div>
    </div>
  </div>
</body>

</html>

如何在IE中调用dataTables日期范围搜索？

1 个答案:

最佳做法/惯例

导致其破裂的原因