Footer select filter with ajax.reload()

Footer select filter with ajax.reload()

SlimuSlimu Posts: 5Questions: 1Answers: 0
edited August 2018 in Free community support

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) ?

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    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

  • SlimuSlimu Posts: 5Questions: 1Answers: 0

    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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

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

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

    Cheers,

    Colin

  • SlimuSlimu Posts: 5Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    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

  • SlimuSlimu Posts: 5Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

    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

  • SlimuSlimu Posts: 5Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

    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

This discussion has been closed.