Search code examples
javascriptdatatablesyadcf

Custom function never called


I was trying to implement a exclude button for the multi_select filter_type, using multi_select_custom_func. I also tried custom_funcp. The problem is the custom function is never called. I'm sure it is in the scope of yadcf since I do a call right before the initialization to test it.

I would like to use this with server-side data retrieval (for both the table and the select boxes) and AJAX pagination so if there are any other tip to consider please let me know.

I can't reproduce the issue on a snippet since it requires server side loading. However I managed to get it working without the server-side loading. I think the problem is related to the columns datatable parameter.

These are the parameters that I'm using.

columns = [
                { data: "count" ,             title: "Occurrences" },
                { data: "source" ,            title: "Source" },
                { data: "relationship" ,      title: "Relation"},
                { data: "target_label" ,      title: "Target" },
                { data: "target_type" ,       title: "Target Type"},
                { data: "relationship_uri" ,  title: "Details", sortable: false,
                    render: function ( data, type, row, meta ) {
                        return `<a href="${data}"><i class="material-icons text-info">info</i></a>`;
                    }
                }
            ]

table = $(table_html).DataTable({
            pageLength: 10,
            buttons: [
                {
                    text: 'Reset Filters',
                    action: function ( e, dt, node, config ) {
                        yadcf.exResetAllFilters($(table_html).DataTable());
                    }
                }
            ],
            sDom: "<'row'<'col-sm-4'l><'col-sm-4'B><'col-sm-4'i>><'row'<'col-sm-12'tr>><'row'<'col-sm-12'p>>",
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            serverSide: true,
            ajax: url,
            processing: true,
            deferRender: false,
            responsive: true,
            //stateSave: true,
            bAutoWidth: false,
            bSortCellsTop: true,
            columns: columns,
            order: [0, 'desc']
        });


yadcf.init(table, [
                    {
                        column_number: 0,
                        filter_type: "range_number"
                    }, 
                    {
                        column_number: direction == 'in' ? 1 : 3,
                        filter_type: "multi_select",
                        select_type: 'select2',
                        sort_as: 'none'
                    }, 
                    {
                        column_number: 2,
                        filter_type: "multi_select",
                        select_type: 'select2',
                        sort_as: 'none'
                    }, 
                    //3rd is the 1
                    {
                        column_number: 4,
                        filter_type: "custom_func",
                        select_type: 'select2',
                        sort_as: 'none',
                        custom_func: myCustomFilterFunction,
                        data: [{
                          value: 'Donna',
                          label: 'Donna'
                        }, {
                          value: 'sad',
                          label: 'Sad'
                        }, {
                          value: 'angry',
                          label: 'Angry'
                        }, {
                          value: 'lucky',
                          label: 'Lucky'
                        }, {
                          value: 'january',
                          label: 'January'
                        }],
                        filter_default_label: "Custom func filter"
                    }
                ], 
                {filters_tr_index: 1}
        );

Solution

  • I couldn't find the solution to this with yadcf so in the end I implemented my own exclude toggles and I added the exclude toggle status to the AJAX data sent by DataTables.

    ajax: {
                    url: url,
                    data:  function(data, settings) {
                        var table = $(`#${settings.sTableId}`); //get current table
                        table.find('.exclude_toggle').each(function(idx, element){
                            var field = $(element).attr('field');
                            var exclude = $(element).attr('exclude');
                            var column = _.find(data.columns, column => column.data == field);
                            column.search.exclude = JSON.parse(exclude.toLowerCase());
                        });
                        return data;
                    }
    }, [...]
    

    For the exclude toggle you can use

    $(`#${table_id}`).DataTable().ajax.reload();
    

    inside the click event to force DataTables sending a new request to the server.