Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Datatables date range filter

How to add date range filter..

like From-To .

I got working regular search and pagination, etc.. But I dont know how to make date range filter.

I'm using Datatables 1.10.11 version.

My code:

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

And I'm using NaturalSort 0.7 version.

like image 515
Kristen L Avatar asked Jan 02 '17 02:01

Kristen L


People also ask

How do you add a date filter in HTML?

datetimepicker({ format:'DD-MM-YYYY', }); $('#myInput'). on('dp. change', function (e) { var value = $("#myInput"). val(); var firstDate = moment(value, "DD/MM/YYYY").

What is FN dataTable ext search push?

fn. dataTable. ext.search . This is an array of functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not. This example shows a search being performed on the age column in the data, based upon two inputs.


1 Answers

I got mine working base on https://www.datatables.net/examples/plug-ins/range_filtering.html. Here is my 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();
    });
});
like image 163
Bindrid Avatar answered Oct 07 '22 20:10

Bindrid