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();

    });
}

as per i understand your question you want to diaplay on Year in dropdown ? — CY5
– CY5, Commented Jul 28, 2015 at 17:52
@CY5 Yes. I want to get all the years associated with the Dates in the JSOn without any duplicates. — Hectooorr
– Hectooorr, Commented Jul 28, 2015 at 17:53

mason81 · Accepted Answer · 2015-07-28 19:20:40Z

7

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

edited Jul 28, 2015 at 19:20

answered Jul 28, 2015 at 17:53

mason81

1,7502 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mason81 Over a year ago

This may not be the best or most efficient approach, but it should work. I'll check back later when I have some more time to spend on it to see if I can refine it.

mason81 Over a year ago

You're welcome @Hectooorr -- if you found my answer helpful, please mark it as the accepted answer.

Hectooorr Over a year ago

Hi @mason81 I think you solved it half way. I am able to get the dropdown with the years as options but I can't filter the table to have it show all entries based on that year.

mason81 Over a year ago

@Hectooorr ok i updated, i removed '^' + from the column.search(...) since that was telling it to look for dates matching exactly the year, now it will match them ending with the year.

Hectooorr Over a year ago

life saver! Thank you for helping me out.

Collectives™ on Stack Overflow

DataTables custom dropdown date filter

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related