Server-side processing - initComplete only fires once

Wilshire

I'm using a library "JqueryDataTables" for server-side processing in ASP Core. I have a function that runs in the "initComplete" callback to set up a filter for a specific column. Here's the code that does this:

this.api().columns().every(function () {
                        var column = this;
                        var header = column.header();

                        if ($(header).text() == "Status") {
                            var select = $('<select id="StatusFilter" class="select2"></select>')
                                .appendTo($("#StatusFilterContainer").empty())
                                .on('change', function () {

                                    var data = $.map($(this).select2('data'), function (value, key) {
                                        return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
                                    });

                                    if (data.length === 0) {
                                        data = [""];
                                    }

                                    var val = data.join('|');

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

                            var colData = [];

                            column.data().unique().sort().each(function (data, j) {
                                if (data != "Rejected") {
                                    colData.push(data);
                                }

                                select.append(`<option value="${data}">${data}</option>`)
                            });

                            $('#StatusFilter').select2({
                                multiple: true,
                                closeOnSelect: true,
                                placeholder: "Select Status"
                            });

                            //initially clear select otherwise first option is selected
                            $('.select2').val(colData).trigger('change');
                        }
                    });

When I was just passing a model into the table and doing client-side processing, this worked exactly as I needed. Users could select or deselect an option and the table updated. Since I've switched to server-side processing, this doesn't work at all, and causes other problems in my table. Even if I'm not making a change to this filter, any action results in 0 results returned. Paging, sorting... 0 results returned. If I remove this filter widget, the sorting and paging works as expected.

There are two things I've noticed that I'm confused about. First is that this filter doesn't perform any filtering when processing server-side. The second is that when this filter exists, ANY changes to the filter, any paging, any sorting, results in 0 results returned.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @wilshire ,

If you have serverSide enabled - then all filtering, ordering and paging is performed by the server, nothing is done on the client. It seems from your code you want the client to filter based on the rows returned, but that's not possible - the search would still be passed back to the server.

Cheers,

Colin