数据表日期范围过滤器答案

【问题标题】：Datatables date range filter数据表日期范围过滤器
【发布时间】：2017-01-02 02:47:32
【问题描述】：

如何添加日期范围过滤器..

喜欢From-To。

我经常进行搜索和分页等工作。但我不知道如何制作日期范围过滤器。

我使用的是 Datatables 1.10.11 版本。

我的代码：

var oTable;

function callFilesTable($sPaginationType, $bPaginate, $bFilter, $iDisplayLength, $fnSortcol, $fnSortdir){

    $.extend($.fn.dataTableExt.oStdClasses, {
        sSortAsc  : 'header headerSortDown',
        sSortDesc : 'header headerSortUp',
        sSortable : 'header'
    }); 

    oTable = $('#sort').DataTable({
        dom : '<"table-controls-top"fl>rt<"table-controls-bottom"ip>',
        pagingType : $sPaginationType,
        paging : $bPaginate,
        searching : $bFilter,
        pageLength : $iDisplayLength,
        order : [ [$fnSortcol, $fnSortdir] ],
        columnDefs : [
            { 
                width      : '50%',
                targets    : [ 2 ],
                orderable  : true,
                searchable : true,
                type       : 'natural'
            },
            { 
                width      : '10%',
                targets   : [ 3 ],
                orderable : true
            },
            { 
                width      : '20%',
                targets   : [ 4 ],
                orderable : true
            },
            { 
                targets    : ['_all'], 
                orderable  : false,
                searchable : false
            }
        ],
        language : paginationTemplate,
        drawCallback : function() {

            checkSelecta();
            placeHolderheight();

            // hide pagination if we have only one page
            var api = this.api();
            var pageinfo = api.page.info();
            var paginateRow = $(this).parent().find('.dataTables_paginate');  

            if (pageinfo.recordsDisplay <= api.page.len()) {
                paginateRow.css('display', 'none');
            } else {
                paginateRow.css('display', 'block');
            }
        }
    });

    oTable.on( 'length.dt', function ( e, settings, len ) {
        updateSession({ iDisplayLength: len });
    });
}

我使用的是 NaturalSort 0.7 版本。

【问题讨论】：

datatables 网站上有一个范围插件，你看了吗？ datatables.net/examples/plug-ins/range_filtering.html
@Bindrid 是的，但不起作用。出现错误：未捕获的类型错误：无法读取 Array. (range_dates.js:30) 处未定义的属性“子字符串”
我在玩它。如果我得到我的工作，我会发布它

标签： javascript jquery datatables

【解决方案1】：

我的工作基地是https://www.datatables.net/examples/plug-ins/range_filtering.html。这是我的 jsfiddle https://jsfiddle.net/bindrid/2bkbx2y3/6/

$(document).ready(function () {
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var min = $('#min').datepicker('getDate');
            var max = $('#max').datepicker('getDate');
            var startDate = new Date(data[4]);
            if (min == null && max == null) return true;
            if (min == null && startDate <= max) return true;
            if (max == null && startDate >= min) return true;
            if (startDate <= max && startDate >= min) return true;
            return false;
        }
    );

    $('#min').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
    $('#max').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
    var table = $('#example').DataTable();

    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').change(function () {
        table.draw();
    });
});

【讨论】：

但是在您的 jsfiddle 中，我将日期更改为 dd/mm/yyyy 并且它不起作用......如果更改 datepicker 日期格式也是如此......
updated jsfidddle jsfiddle.net/bindrid/2bkbx2y3/9 如果您在 jquery datepicker 中使用 yyyy，这就是问题的一部分。每个 y 代表 2 个地方应该是 dd/mm/yy。
@Bindrid 优雅的解决方案。谢谢你。关于dd/mm/yy 格式，我不确定您为什么需要额外的代码。 Javascript Date 对象适用于任何一种格式（请参阅jsfiddle.net/2bkbx2y3/123）。
该示例，如所写，要求第 4 列是日期列。可以更改它以检查任何列的有效日期，然后对其应用过滤器。
好朋友。很好的答案

【解决方案2】：

下面使用momentsjs，momentsjs的优点是我们可以简单的比较不同类型的日期/日期时间

$.fn.dataTableExt.afnFiltering.push(
        function( settings, data, dataIndex ) {
            var min  = $('#min-date').val()
            var max  = $('#max-date').val()
            var createdAt = data[0] || 0; // Our date column in the table
            //createdAt=createdAt.split(" ");
            var startDate   = moment(min, "DD/MM/YYYY");
            var endDate     = moment(max, "DD/MM/YYYY");
            var diffDate = moment(createdAt, "DD/MM/YYYY");
            //console.log(startDate);
            if (
              (min == "" || max == "") ||
              (diffDate.isBetween(startDate, endDate))


            ) {  return true;  }
            return false;

        }
    );

【讨论】：