Question about initComplete() column search/sort and Server Sider Processing.

teojicd

Hello,

I am currently trying to understand how datatables work. Currently I am looking at this piece of code:

            $('#table_id').DataTable({
                initComplete: function () {
                    this.api().columns().every(function () {
                        var column = this;
                        var select = $('<select><option value=""></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, j) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                }, colReorder: true
            } );

If I am not mistaken, what this does is when the Datatable is initialized with data, at the footer of every column, create a <select> dropdown box. When the value of the <select> dropdown box is changed, it will do a search on the entire Datatable based on the selected <select> dropdown value. This piece of code is working normally when the data in the datable is hardcoded in html.

My question is now, if I want to use serverSide true, with data processing done at the server side, does that means the above code's search mechanism has to be written on the server side?

colin

Hi @teojicd ,

Exactly. In that example it's creating the dropdowns because the client has access to the entire dataset - if serverSide is enabled then the client only has access to the visible data. There's other examples, like this one here, that has an input element instead which may be an alternative and would work with server-side processing.

Cheers,

Colin