时间戳

首页 > 解决方案 > DataTables - 基于时间跨度的过滤

datatables - DataTables - 基于时间跨度的过滤

问题描述

我在数据表中有一个包含数据的列，类似于以下内容：

0500-1300
0500-1430
0600-0915
0600-1000
0600-1100
0600-1115
0600-1130
0600-1200
0600-1215
0600-1300
0600-1315

我想要一个与http://yadcf-showcase.appspot.com/dom_bootstrap_time.html不太相似的过滤器，其中有人可以选择 FROM 时间和 TO 时间，然后过滤数据。

假设有人选择：

FROM: 0600
TO: 1100

然后只有 3 会显示。但是，如果我选择：

FROM: 0500
TO: 1400

一切都会显示。这样的事情可能吗？上面网站的插件会是我所追求的吗？

标签： datatables

解决方案

试试这个：

const timeStringToInt = (time) => {
  const hoursMinutes = time.split(/[.:]/);
  const hours = parseInt(hoursMinutes[0], 10) * 60;
  var minutes = parseInt(hoursMinutes[1], 10);
  return hours + minutes;
}

$.fn.dataTable.ext.search.push(
  (settings, data, dataIndex) => {
    const min = timeStringToInt($('#timeFrom').val());
    const max = timeStringToInt($('#timeTo').val());
    const start = timeStringToInt(data[0]);
    const end = timeStringToInt(data[1]);
    return start >= min && end <= max;
  }
);

您可能需要根据小时列的位置更改函数。在这里工作 JSFiddle 。

编辑

在查看了您的数据后，我在最初的答案中犯了一个错误，应该这样做：

const timeStringToInt = (time) => {
  const hoursMinutes = time.split(":");
  const hours = parseInt(hoursMinutes[0], 10) * 60;
  var minutes = parseInt(hoursMinutes[1], 10);
  return hours + minutes;
}
const stringToInt = (time) => {
  var minutes = parseInt(time.slice(-2), 10);
  const hours = parseInt(time.slice(0, -2), 10) * 60;
  return hours + minutes;
}

$.fn.dataTable.ext.search.push(
  (settings, data, dataIndex) => {
    const min = timeStringToInt($('#timeFrom').val());
    const max = timeStringToInt($('#timeTo').val());
    const timeParts = data[0].split("-");
    const start = stringToInt(timeParts[0]);
    const end = stringToInt(timeParts[1]);
    return start >= min && end <= max;
  }
);

在这里更新了 JSFiddle 。

希望有帮助:-)

推荐阅读