Datatables yadcf plugin filling select filters with data from server

Question

First of all I'm grateful for this amazing plugin.

I'm using yadcf version 0.8.8.beta.10.

I'm trying to fetch select filter data from server. But when table is initialized select data is taken from dom. If I hit filter button to call exFilterExternallyTriggered(table) or I press column sort button data in select filter is updated with data from server.

Heres javascript

var table = $('#' + table_id).DataTable({
            "scrollX": true,
            "processing": true,
            "serverSide": true,
            "fnDrawCallback": function( oSettings ) {
              fixDropDowns();
            },
            "order": [[ 15, "desc" ]],
            "ajax": {
                "url": "${createLink(action: 'DataTableAjaxHandler')}",
            },
            "columns": [
             {"data": "edit",
                "searchable": false,
                "sortable": false,
                },
            { "data": "subscriberId",
                "searchable": true,
                "sortable": true},
            { "data": "unitName",
                "searchable": true,
                "sortable": true},
            { "data": "networkType",
                "searchable": false,
                "sortable": true},
           .................................
            ],

            "sDom":"<'dt-toolbar'<'col-xs-18 col-sm-9 filterDiv'>r<'col-sm-3 col-xs-6 hidden-xs'l>>" +
            "t" +
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",

            "autoWidth": true,
            "preDrawCallback": function () {
                // Initialize the responsive datatables helper once.
                if (!responsiveHelper_dt_basic) {
                    responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#' + table_id), breakpointDefinition);
                }
            },
            "rowCallback": function (nRow) {
                responsiveHelper_dt_basic.createExpandIcon(nRow);
            },
            "drawCallback": function (oSettings) {
                responsiveHelper_dt_basic.respond();
            },
            "initComplete": function(){
                var filters = [
                        new Filter(1, "subscriberId", "${message(code: 'radioUnit.subscriberId.label')}"),
                        new Filter(2, "nameFilter", "${message(code: 'radioUnit.unitName.label')}"),
                        new Filter(3, "networkType", "${message(code: 'radioUnit.networkType.label')}"),
                ]

                initFilterInterface(this.api(), filters, "${message(code: 'filter.filterButton.text')}");

                setTimeout(function () {
                    yadcf.init(table, [
                    {
                        column_number: 1,
                        filter_type: "select",
                        filter_container_id: "subscriberId",
                        externally_triggered: true,
                        filter_reset_button_text: false
                    }, {
                        column_number: 2,
                        filter_container_id: "nameFilter",
                        externally_triggered: true,
                        filter_reset_button_text: false
                    }, {
                        column_number: 3,
                        filter_type: "text",
                        filter_container_id: "networkType",
                        externally_triggered: true,
                        filter_reset_button_text: false
                    }]);
                    }, 1000);

            }
        });

        new $.fn.dataTable.FixedColumns( table, {
            leftColumns: 2
        } );

Here's json that I got from server on datatables init:

{"draw":1,"recordsTotal":23,"recordsFiltered":19,
"yadcf_data_1":["somedata"],"yadcf_data_2"
:["someValue","test2","test2","test2"],"data":[...]} 

Just after datatables init: After init

After hitting filter button or sort column: After hitting filter

Sorry for uploading photos to external site, because I don't have 10 rep points I can't use image tag.

As you can see from images after datatable init it uses dom, but after hitting filter it uses values I return from server. So for some kind of reason on first data load from server ignores yadcf_data_1, yadcf_data_2 values and uses DOM.

Maybe I'm doing it wrong. Is there a way too fill select from server when triggering search with external button?

And other question. Is it possible to use select2 search with ajax. Because I have quite few big tables and it would take a while to send all values from server to client.

Answer 1

You are welcome,

First of all there is no need to use the yadcf.init inside the setTimeout,

Your server should send something similar to the flowing (copy paste from showcase page)

aaData: [["Trident", "Internet Explorer 4.0", "Win 95+", "3/15/2015", "1"],…]
draw: "2"
recordsFiltered: 6
recordsTotal: 57
yadcf_data_0: ["KHTML", "Webkit", "Trident", "Misc", "Other browsers", "Tasman", "Presto", "Gecko"]
yadcf_data_1: ["Nintendo DS browser", "Netscape Browser 8", "All others", "Lynx", "Mozilla 1.6", "Mozilla 1.5",…]
yadcf_data_2: ["N800", "Win 95+ / Mac OS 8.6-9.2", "S60", "KDE 3.5", "Win XP SP2+", "KDE 3.3", "OSX.3", "KDE 3.1",…]
yadcf_data_4: ["134", "0"]

To the second question: are you referring to something similar to the following open issue? If you do, then you can provide an example that I requested

p.s

There is no need to use filter_reset_button_text: false because its default behavior when you set externally_triggered: true (which is actually better be set in the init function for the entire table and not per column, see example in showcase

---

if the above wont work I suggest to try a minimal setup of yadcf something like

yadcf.init(table, [
{
    column_number: 1,
    filter_container_id: "subscriberId"
}, {
    column_number: 2,
    filter_container_id: "nameFilter"
}, {
    column_number: 3,
    filter_type: "text",
    filter_container_id: "networkType",
}]);

That way you might pinpoint the problem (if still wont work you can provide a link to your web page)