Datatables date range filter, custom filter button


i have been trying to create a datatable date range filter, which i follow example from here :
Stackoverflow – Datatables date range filter and jsFiddle.

and it’s working, but my question is there a way to make the filter to draw() table from filter on my custom filter button?, here is my index.blade.php

Date Range filter :

$(document).ready( function(){
        $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex){
                    var datepicker_to = $('#datepicker_to').datepicker("getDate");
                    var datepicker_from = $('#datepicker_from').datepicker("getDate");
                    var startDate = new Date(data[20]);

                    if (datepicker_from == null && datepicker_to == null) {return true; }
                    if (datepicker_from == null && startDate <= datepicker_to) {return true; }
                    if (datepicker_to == null && startDate >= datepicker_from) {return true; }
                    if (startDate <= datepicker_to && startDate >= datepicker_from) {return true; }
                    return false;
                }
            );

            $('#datepicker_from, #datepicker_to').change(function() {
                tableMediaOrder.draw();
            });
    });

        $("#datepicker_form").datepicker({ onSelect: function() { tableMediaOrder.draw();}, changeMonth: true, changeYear: true});
        $("#datepicker_to").datepicker({ onSelect: function() { tableMediaOrder.draw();}, changeMonth: true, changeYear: true});
    });

My custom on.click() filter button :

$(".filterButton").on('click', function(){
                        tableMediaOrder.column(1).search($('.input-order-filter').val()).draw();
                        tableMediaOrder.column(8).search($('.input-advertiser-filter').val()).draw();
                        tableMediaOrder.column(7).search($('.input-agency-filter').val()).draw();
                        tableMediaOrder.column(9).search($('.input-brand-filter').val()).draw();

                    });

Here is the button :

<button id="filterButton" class="btn btn-primary filterButton"><i class="fa fa-filter"></i> Filter</button>

here is the screenshot of the button :
Filters and it's filter button

The filter is working so far but the date range filter was filtered before user click the filter button, is anyone can provide an example on how to put it in my onclick() filter button?, thank you!.

Source: JavaSript – Stack Overflow

November 22, 2021
Category : News
Tags: javascript | jquery | laravel

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.