How can I use use an external Form to search for data inside a Date Range

timcadieux

I have multiple Datatables that inside a tabbed view, which are built on the fly based on some json data.

I have an external form with filtering data that is populated in the initComplete event and thenbound to my Submit click event which allows me to search on those fields. The below code works fine but now the last piece of the puzzle is to also allow a Date Range search, this is proving difficult. if I use my existing code and simply search for whats in my DatePicker t works, but I cannot figure out how to Search for a range of dates between a start and end date using the same method.

               $("#table-" + tabid).DataTable({
                 //etc..
                initComplete: function () {
                    var column1 = this.api().column(1); //Cities Column
                    var column6 = this.api().column(6); //Cause Column
                    var column8 = this.api().column(8); //Start Date Column


                    //External Search form receive Submit Event
                    $('#submit-' + tabid).click(function () {
                        var c = $('#city-' + tabid).val();
                        var s = $('#style-' + tabid).val();
                        column1.search(c).draw()
                        column6.search(s).draw()

                        // Date range filter
                        var StartDate = $('#from' + tabid).val();
                        var EndDate= $('#to' + tabid).val();

                        column8.search(s).draw()  <----How to do a Date Range Search here.

                    });

colin

Hi @timcadieux ,

This example here may be useful. This is searching between a range of integers, but could be tweaked to search for dates (using Moment.js based plugins for example). Another option is to YADCF which also supports ranges.

Cheers,

Colin

timcadieux

Unfortunately, every single example I've seen has the code referring to the Table from outside the table, whereas my click event is inside the initComplete event and so table.draw() is returned as $(...).draw is not a function

colin

But, if you're looking for a range, between two dates, you need those input elements that'll be outside the DataTables table - those examples I posted had those two controls (YADCF even has it as part of the table)

timcadieux

Forgot to respond to this..I ended up instead simply handling the click event and then

initComplete: function () {
```$('#submit-' + tabid).on('click', SubmitButton);

timcadieux

I also cannot seem to close this as some else HAS to come up with an acceptable answer?