Footer select filter with ajax.reload()

Slimu

Hello, I've got a problem with this filter:

initComplete: function () {
            this.api().columns([2, 3, 5, 6, 9]).every( function () {
                var column = this;
                var select = $('<select style="width: 100%;"><option value="">all</option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex($(this).val());

                        column.search( val ? '^'+val+'$' : '', true, false ).draw();
                    });

                column.data().unique().sort().each(function (d) {
                    select.append('<option value="'+d+'">'+d+'</option>')
                });
            });
        }

Everything works fine when datatable is first initialized, but when I'm reloading DT using ajax.reload() with new data filter does not reload. I tried using drawCallback but it deletes filters selected options.

Is there any other callback which I should use to refresh these filters dynamically ? Or should I just put this function inside ajax.reload(callback) ?

colin

Hi @Slimu ,

Another option would be to put that code there a function, and call it both from initComplete, and either ajax.reload() as you said or xhr.

Cheers,

Colin

Slimu

Well, don't want to create new topic so I'm gonna ask for help here.
I've got this code:

function dtFilter(table) {
    table.columns([2, 3, 5, 6, 9]).every( function () {
        var select = $('<select style="width: 100%;"><option value="">all</option></select>')
            .appendTo($(table.footer()).empty())
            .on('change', function () {
                var val = $.fn.dataTable.util.escapeRegex($(this).val());

                table.search( val ? '^'+val+'$' : '', true, false ).draw();
            });

        table.data().unique().sort().each(function (d) {
            select.append('<option value="'+d+'">'+d+'</option>')
        });
    });
}

$('#platnosciTableMain').DataTable({
        ajax: "ajax.php?do=platnosci&ac=platnosciTableMain",
        order: [[5, "asc"]],
        processing: true,
        columnDefs: [ {
            targets: "nosort",
            orderable: false
        }, {
            targets: '_all',
            className: 'th-after-none'
        } ],
        initComplete: dtFilter($('#platnosciTableMain').DataTable())
    });

and I'm getting this error: table.footer is not a function

Don't really know how to change this function to work

colin

Yep, it's table().footer(), so you'll need to change line 4 to be:

.appendTo($(table.table().footer()).empty())

Cheers,

Colin

Slimu

Well, that helped but I can't get it.
I need to make this function separate and then pass to it object ex. like this:

$('example').DataTable().ajax.reload(dtFilter(this), false);

But it doesn't work like it should. All the data from table is included in one big select. Don't know how to give you jsfiddle with that particular case using ajax and server cause this DT is huge. The problem is only this dtFilter() function. I can't get id to work properly in this case.

kthorngren

There are some options to use ajax data with the Datatables JS BIN site:
https://datatables.net/manual/tech-notes/9

Click the example link next to arrays.txt - Array of arrays data source (example) to open the base example. You can add your code to create a test case.

Kevin

Slimu

Thanks, I know about JS BIN but the problem is that this table is big and it has a lot of options/buttons/checkboxes which reload this table after certain event occurs so it
s hard to create a test case. I know what to do to refresh filters after that events occurs but I don't know how to prepare this function to call it in ajax.reload()
So all I need from your side is to help me creating this function from the code I posted on top

kthorngren

All the data from table is included in one big select.

Looks like this might be the problem.

        table.data().unique().sort().each(function (d) {
            select.append('<option value="'+d+'">'+d+'</option>')
        });

My suggestion is to change the code in dtFilter() to look more like the example code.

Kevin

Slimu

Thanks, yes but when I will use this function inside initComplete: then after new data is added and table is reloaded using ajax.reload() new options are not showed in this select. I tried using drawCallback it is updating options but it is also resetting currently choosen filters.
I thought about using initComplete to create default filter and after any change in table using drawCallback to insert new options to default filter but I don't know how to do it. Maybe there's easier solution I don't know about like using ajax.reload(dtFilter(this), false) which I also don't know how to use in this particular case.

kthorngren

I built a simple test case for you:
http://live.datatables.net/sifinelu/1/edit

It uses the code from the example to build the options. I added var count just for illustration purposes. It appends the value of count to the option label so you can see it runs each time loaded. The value is 0 when initialized the increments each time the "Reload" button is clicked.

Changed your initComplete option to this so it can pickup the Datatables API to pass to your dtFilter() function:

    initComplete: function() {
        dtFilter(this.api())
    }

Kevin