自定义函数从未调用

时间:2019-01-17 11:08:54

标签: javascript datatables yadcf

我试图使用multi_select filter_typemulti_select_custom_func实现排除按钮。我也尝试过custom_funcp。问题是自定义函数从未调用。我确定它在yadcf的范围内,因为我在初始化之前就进行了调用以对其进行测试。

我想将其与服务器端数据检索(用于表和选择框)以及AJAX分页一起使用,因此,如果还有其他建议需要考虑,请告诉我。

我无法在代码段上重现该问题,因为它需要服务器端加载。但是我设法在没有服务器端加载的情况下使它工作。我认为问题与columns数据表参数有关。

这些是我正在使用的参数。

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}
        );

2 个答案:

答案 0 :(得分:1)

当您将searching设置为false时,自定义功能不起作用。更改代码

  oTable = $('.mytable2').DataTable({
    pageLength: 10,
    scroller: false//,
    //Should not disable the searching function
    //searching: false
  });

尝试此更新的code snippet

答案 1 :(得分:0)

我无法通过 yadcf 找到解决方案,所以最终我实现了自己的排除切换,并将排除切换状态添加到了DataTables发送的AJAX数据中。

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;
                }
}, [...]

对于排除切换,您可以使用

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

在click事件内部,以强制DataTables向服务器发送新请求。