Make a filter condition with a custom button

neha6

Hello,
I need help.
I'm using a dataTable for which I'ld like add a button that searches for the following condition:
"search for all people present this week"
So I wrote in Js the condition allowing me to do this. I get the result in the browser console, but I can't update my dataTable.

Here is the example which is the closest to what I'm looking for: http://live.datatables.net/bexukuka/1/edit
Here is my dataTable: https://datatables.net/forums/uploads/editor/2q/flv2h310o7r1.png
Here is my script:

    $(document).ready(function () {
        $('#dataTable').DataTable({
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.1/i18n/fr-FR.json"
            },
            columnDefs: [
                {
                    target: 7,
                    visible: true,
                    searchable: true,
                },
                {
                    target: 8,
                    visible: true,
                },
            ],
        });

        var hebergeSemaine = document.getElementById('week')
        var table = $('#dataTable').DataTable();

        hebergeSemaine.addEventListener('click', (ev => {
            if (hebergeSemaine.checked) {

                // GET DATATABLE DATAS
                let data = [];
                data = table.rows().data();

                // GET FIRST AND LAST DAY OF WEEK
                let curr = new Date(); // get current date
                let first = curr.getDate() - curr.getDay() + 1; // get first day of the week: monday
                let last = first + 6; // get last day of the week: sunday
                let firstday = new Date(curr.setDate(first)).toISOString().slice(0, 10);
                let lastday = new Date(curr.setDate(last)).toISOString().slice(0, 10);

                // GET PERSONNE PRESENT THIS WEEK
                let results = data.filter(item => item[8] >= firstday && item[7] <= lastday);
                table.search(results).draw();
            }
        }));
    });

thanks for your help.

kthorngren

Sounds like you want a date range search. See this example. See if this date range search plugin will work.

If you still need help please build a test case with example values that you want to search.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

neha6

Good morning,
thanks for your help! it works well!

Another question: is it possible to reload the dataTable without having to press the enter button when the user deletes the entered dates?
Like, for example, with the input 'search' of the dataTable.

Here's the search results:

Here's the table not reload:

Here's my script:

var minDate, maxDate;

    // Custom filtering function which will search data in column four between two values
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var min = minDate.val();
            var max = maxDate.val();
            var dateEntree = new Date(data[7]);
            var dateSortie = new Date(data[8]);

            if (
                (min === null) ||
                (max === null) ||
                (dateSortie >= min && dateEntree <= max)
            ) {
                return true;
            }
            return false;
        }
    );

    $(document).ready(function () {
        // Create date inputs
        minDate = new DateTime($('#min'), {
            format: 'DD-MM-yyyy'
        });
        maxDate = new DateTime($('#max'), {
            format: 'DD-MM-yyyy'
        });

        var table = $('#dataTable').DataTable({
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.1/i18n/fr-FR.json"
            },
            columnDefs: [
                {
                    target: 7,
                    visible: true,
                    searchable: true
                },
                {
                    target: 8,
                    visible: true,
                    searchable: true,
                },
            ],
        });

        // Refilter the table
        $('#min, #max').on('change', function () {
            table.draw();
        });

kthorngren

Looks like you are using the DatTime. One option is to add a clear button using buttons.clear. If the user is backspacing maybe create a keyup event and in the event when the input is empty call table.draw();.

Kevin

neha6

Thank you for your advice!
I found an alternative solution. I'll post my solution if it can help someone else.

here's my script when we delete the content of the date fields

 // Refilter the table
     $('#min, #max').on('change', function () {
          table.draw();

      // Reload the dataTable on a delete event
          if ($('#min').val() || $('#max').val) {
               $('#min, #max').keyup(function(e){
                    if(e.keyCode == 46 || e.keyCode == 8) {
                        table.draw();
                    }
                });
            }
       });

kthorngren

I think you will want to move the keyup event handler outside the change event handler. Otherwise you will end up creating additional event handlers each time the code in line 7 is reached. Something like this:

// Refilter the table
    $('#min, #max').on('change', function () {
         table.draw();
       });

     // Reload the dataTable on a delete event
              $('#min, #max').keyup(function(e){
                   if(e.keyCode == 46 || e.keyCode == 8) {
                       table.draw();
                   }
               });

Kevin