DataTables 自定义下拉日期过滤器

Question

这是我的测试文件的 link http://www.ollitrop.com/index.html

我正在创建一个带有标签 'Sort By Year' 的新下拉列表，它从 JSON 文件中的 'Date' 中提取所有日期。理想情况下，“按年份排序”下拉列表将仅显示年份，因此在本例中为 2008、2009、2010、2011 和 2012。用户可以 select '2008'，它将仅显示 2008 年的列表。

提前致谢！

JSON 文件 http://www.ollitrop.com/sample.json

JS 文件： http://ollitrop.com/notice-grid.js

当前 JS：

    $(document).ready(function(){

    $.ajax({
        type: 'GET',
        url: 'sample.json',
        dataType: 'json',
        success: jsonParser
    });
    // hide grid on load
    $('#gridNotices').hide();
});

function jsonParser(json){
    $('#load').fadeOut();
    $.getJSON('sample.json',function(data){

        // Build Notices Grid
        var noticesGridDataTemplate = $('#gridNoticeTemplate').html(),
            noticesGridHTML = Mustache.to_html(noticesGridDataTemplate, data);
        $('#notice').html(noticesGridHTML);
        $('#gridNotices').DataTable({
            //"bPaginate": false,
            "bProcessing": true,
            "paging": false,
            initComplete: function () {
                this.api().columns(0).every(function () {

                    var column = this;

                    var selectDropdown = $('<select><option></option></select>')
                        .appendTo($('#sort-by-year'))
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()

                            );
                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    column.data().unique().sort().each(function (d, j) {
                        selectDropdown.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
            }
        });

        $('#gridNotices').show();

    });
}

Answer 1

将字符串转换为日期，获取年份，然后在 select 中使用它。您可以将年份存储在一个数组中，以确保没有重复项。

// -- snip -- //
initComplete: function () {
    this.api().columns(0).every(function () {

        var column = this;

        var selectDropdown = $('<select><option></option></select>')
                .appendTo($('#sort-by-year'))
                .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    column
                        .search(val ? val + '$' : '', true, false)
                        .draw();
                });

        var dates = [];

        column.data().unique().sort().each(function (d, j) {
            var date = new Date(d), year = date.getFullYear();
            if (dates.indexOf(year) < 0) {
                dates.push(year);
                selectDropdown.append('<option value="' + year + '">' + year + '</option>');
            }
        });
    });
}
// -- snip -- //

DataTables 自定义下拉日期过滤器

DataTables custom dropdown date filter

jquery

json

datatables