DataTables custom dropdown date filter

Question

Here's the link to my test file http://www.ollitrop.com/index.html

I'm creating a new dropdown with the label 'Sort By Year' that pulls all the dates from 'Date' in the JSON file. Ideally, the Sort By Year dropdown would only show the years so in this case, 2008, 2009, 2010, 2011, and 2012. The user could select '2008' and it would show only listings in 2008.

Thank you in advance!

JSON file http://www.ollitrop.com/sample.json

JS File: http://ollitrop.com/notice-grid.js

Current 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

Convert the string to date, get the year, then use that in the select. You can store the years in an array as you go to make sure there are no duplicates.

// -- 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 -- //