DataTable Range Datetime Filter

  ajax, datatable, filter, javascript, jquery

I’ve a datatable which i fill with ajax response. In the response i’m getting a string date data. I can write that data on datatable but i can’t filter the data with date range. I’ve try so much way but i can’t solve this. some of my trying i get " fnDraw()" is not function or some error like this. how can I make the range filter ?

JavaScrıpt code :

$(document).ready(function () {
  var table = $.ajax({
        type: "GET",
        url: '/History/GetCallbackHistory',
        data: { UserId: document.getElementById("callbackuserid").value },
        dataType: 'json',
        success: function (obj, textstatus) {
            $('#callback_table').DataTable({
                "pagingType": "input",
                "language":
                {
                    "processing": "<div class='loader'>Loading...</div>",
                    "paginate": {
                        "previous": "",
                        "next": ""
                    },
                },
                dom: "<'row'<'container-c'pi<'permuheader'<'refresh-button'>><'tlength'l>>>"
                    + "<'row'>"
                    + "<'row'<'col-sm-12't>r>",
                data: obj,
                columns: [
                    {
                        "data": "Id"
                    },
                    {
                        "data": "DateCallback"
                    },
                    {
                        "data": "callbackId"
                    },
                    {
                        "data": "Task_name"
                    },
                    {
                        "data": "callbackStatus"
                    },
                    {
                        "data": "Point"
                    },
                    {
                        "data": "TransactionType"
                    },
                    {
                        "data": "DateEnd"
                    }
                ]
            });
        },
        error: function (obj, textstatus) {
            alert(obj.msg);
        }
    });
    $("#datepicker_from").datepicker({
        showOn: "button",
        buttonImageOnly: false,
        "onSelect": function (date) {
            minDateFilter = new Date(date).getTime();
            table.fnDraw();
        }
    }).keyup(function () {
        minDateFilter = new Date(this.value).getTime();
        table.fnDraw();
    });

    $("#datepicker_to").datepicker({
        showOn: "button",
        buttonImageOnly: false,
        "onSelect": function (date) {
            maxDateFilter = new Date(date).getTime();
            table.fnDraw();
        }
    }).keyup(function () {
        maxDateFilter = new Date(this.value).getTime();
        table.fnDraw();
    });
});

$.fn.dataTableExt.afnFiltering.push(
    function (oSettings, aData, iDataIndex) {
        if (typeof aData._date == 'undefined') {
            aData._date = new Date(aData[1]).getTime();
        }

        if (minDateFilter && !isNaN(minDateFilter)) {
            if (aData._date < minDateFilter) {
                return false;
            }
        }

        if (maxDateFilter && !isNaN(maxDateFilter)) {
            if (aData._date > maxDateFilter) {
                return false;
            }
        }

        return true;
    }
);

Source: Ask Javascript Questions

LEAVE A COMMENT