Issue when using both Search Panes and customer filter function (ext.search.push)

JinbeiStudio

Link to test case: Only local

Debugger code (debug.datatables.net):
onakid

Error messages shown:
Uncaught TypeError: data[4] is undefined

Description of problem:

I am trying to use simultaneously both the search panes and a custom search function (start date and end date). However I have an error saying the data is undefined and the search panes is not working. The error appears when I am trying to use the search panes, even if I have not used the custom function. Without the custom function the search pane used to work well.

Thank you for your help.

Here is my code :

<script>
    $('#tableHide').hide();
    /* -------------------------------------------------------------------------- */
    /*                         Initialisation Data Tables                         */
    /* -------------------------------------------------------------------------- */
    $(document).ready(function() {
        var table = $('#listeTable').DataTable({
            "scrollY": "55vh",
            "scrollCollapse": true,
            "paging": false,
            dom: 'Bfrtip',
            buttons: [{
                extend: 'searchPanes',
                text: 'Filtrer',
                config: {
                    cascadePanes: true
                }
            }, {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'LEGAL',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6],
                },
            }, {
                extend: 'excel',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6],
                }
            }, {
                extend: 'print',
                text: 'Imprimer',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6],
                }
            }],
            "order": [
                [0, "asc"],
                [1, "asc"],
                [4, "desc"],
            ],
            "orderFixed": [10, 'asc'],
            "colReorder": true,
            columnDefs: [{
                    searchPanes: {
                        show: true,
                    },
                    targets: [0, 1, 2, 3, 6],
                },
                {
                    searchPanes: {
                        show: false,
                    },
                    targets: [4, 5, 7, 8, 9, 10],
                },
                {
                    "orderable": false,
                    "targets": [9, 10]
                }
            ],
            "initComplete": function(settings, json) {
                $('#loader').hide();
                $('#tableHide').show();
            },
            language: {
                "sEmptyTable": "Aucune donnée disponible dans le tableau",
                "sInfo": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
                "sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément",
                "sInfoFiltered": "(filtré à partir de _MAX_ éléments au total)",
                "sInfoPostFix": "",
                "sInfoThousands": ",",
                "sLengthMenu": "Afficher _MENU_ éléments",
                "sLoadingRecords": "Chargement...",
                "sProcessing": "Traitement...",
                "sSearch": "Rechercher :",
                "sZeroRecords": "Aucun élément correspondant trouvé",
                "oPaginate": {
                    "sFirst": "Premier",
                    "sLast": "Dernier",
                    "sNext": "Suivant",
                    "sPrevious": "Précédent"
                },
                "oAria": {
                    "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                    "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
                },
                "select": {
                    "rows": {
                        "_": "%d lignes sélectionnées",
                        "0": "Aucune ligne sélectionnée",
                        "1": "1 ligne sélectionnée"
                    }
                },
                "searchPanes": {
                    clearMessage: 'Supprimer filtres',
                    collapse: 'Filtrer',
                    title: {
                        _: 'Filtres sélectionnés : %d',
                    },
                    emptyPanes: 'Aucun élément correspondant trouvé'
                }
            }
        });

        table.columns.adjust();

        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex) {
                var min_date = document.getElementById("min").value;
                var min = new Date(min_date);
                var max_date = document.getElementById("max").value;
                var max = new Date(max_date);
                //console.log(min);
                //console.log(max);

                startSplit = data[4].split("/");
                endSplit = data[5].split("/");
                var startDate = new Date(endSplit[2].substring(0, 4), parseInt(endSplit[1], 10) - 1, parseInt(endSplit[0], 10));
                var endDate = new Date(endSplit[2].substring(0, 4), parseInt(endSplit[1], 10) - 1, parseInt(endSplit[0], 10));
                //console.log(startSplit[2].substring(0, 4), parseInt(startSplit[1], 10), parseInt(startSplit[0], 10));
                //console.log(startDate);
                if (!min_date && !max_date) {
                    return true;
                }
                if (!min_date && endDate <= max) {
                    return true;
                }
                if (!max_date && startDate >= min) {
                    return true;
                }
                if (endDate <= max && startDate >= min) {
                    return true;
                }
                return false;
            }
        );

        // Event listener to the two range filtering inputs to redraw on input
        $('#min, #max').change(function() {
            table.draw();
        });
    });
    /* -------------------------------------------------------------------------- */
</script>

JinbeiStudio

I managed to find a solution for my issue.

I found out that data[4] and data[5] had undefined values so I had to deal with this case in my function.

Moreover I had to disable cascadepane in search panes so that it would work with my custom date range search. Apparently cascade panes does not work well with custom search function.

If you know a way to make both work together...

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin