Question

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

我创建了一个新的下拉列表，标签为“按年份排序”＆＃39;从日期＆＃39;日期＆＃39;中提取所有日期在JSON文件中。理想情况下，按年排序下拉列表仅显示年份，因此在2008,2009,2010,2011和2012年。用户可以选择2008年＆＃39;它只显示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

将字符串转换为日期，获取年份，然后在选择中使用该字符串。您可以随时将年份存储在数组中，以确保没有重复项。

// -- 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自定义下拉日期过滤器

1 个答案: