Multiple tables with similar options

kzk

Hello I have 3 tables with different number of columns. I tried to do individual column filtering on all but the first 2 columns for all the tables along with scroll etc (code below).
Unfortunately it works only on the first table and the other 2 tables are not styled. Any pointers on how I can fix this? Also.. if you could help me optimize this it would be great! TIA.

 $(document).ready(function () {
            $('#primary').DataTable({

                initComplete: function () {
                    this.api().columns([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]).every(function () {
                        var column = this;
                        var select = $('<select><option value="">Show All</option></select>')
                            .appendTo($(column.header()))
                            .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) {
                            var val = $('<div/>').html(d).text();
                            select.append('<option value="' + val + '">' + val + '</option>');
                        });
                    });
                },
                paging: false,
                sort: false,
                scrollY: 500,
                scrollX: true,
                fixedColumns: {
                    leftColumns: 2
                },
            });
            $('#secondary').DataTable({

                initComplete: function () {
                    this.api().columns([2, 3, 4, 5, 6, 7, 8, 9]).every(function () {
                        var column = this;
                        var select = $('<select><option value="">Show All</option></select>')
                            .appendTo($(column.header()))
                            .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) {
                            var val = $('<div/>').html(d).text();
                            select.append('<option value="' + val + '">' + val + '</option>');
                        });
                    });
                },
                paging: false,
                sort: false,
                scrollY: 500,
                scrollX: true,
                fixedColumns: {
                    leftColumns: 2
                },
            });
            $('#other').DataTable({

                initComplete: function () {
                    this.api().columns([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]).every(function () {
                        var column = this;
                        var select = $('<select><option value="">Show All</option></select>')
                            .appendTo($(column.header()))
                            .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) {
                            var val = $('<div/>').html(d).text();
                            select.append('<option value="' + val + '">' + val + '</option>');
                        });
                    });
                },
                paging: false,
                sort: false,
                scrollY: 500,
                scrollX: true,
                fixedColumns: {
                    leftColumns: 2
                },
            });
        });

kzk

I kind of fixed it:

$(document).ready(function () {
            $('table.display').DataTable({
                initComplete: function () {
                    this.api().columns('.select-filter').every(function () {
                        var column = this;
                        var select = $('<select><option value="">Show All</option></select>')
                            .appendTo($(column.header()))
                            .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) {
                            var val = $('<div/>').html(d).text();
                            select.append('<option value="' + val + '">' + val + '</option>');

                        })

                    });

                },
                paging: false,
                sort: false,
                scrollY: 500,
                scrollX: true,
                fixedColumns: {
                    leftColumns: 2
                },

            });
        });

For the headers where I do want the filter option I added the class select-filter to it. By doing this I am able to optimize and get the result I need.