How to disable column filtering on specific column.

rdm

I pulled this column filtering code from one of the DataTables pages (which I can't seem to find now). It works, but I'd like to be able to disable the filtering for a specific column.

I think the key phrase is this.api().columns().every(function () {. My guess is that this is DataTables-specific language.

By doing a console log on column.index(), I know the specific column index is 10. Is there a way I can tweak the code so -- using pseudocode -- it reads something like this.api().columns().every_except_column_10(function () {.

The desired result is that the filter boxes appear in the second thead row except for the last column.

var TableController = function () {
    const init = function () {
        $("#ContentTable").DataTable({
            orderCellsTop: true,
            dom: "Blftipr",
            paging: false,
            buttons: ["excelHtml5", "print"],
            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo($("#ContentTable thead tr:eq(1) th").eq(column.index()).empty())
                        .on("change",
                            function () {
                                const 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>`);
                    });
                });
            }
        });
    };

    return {
        init: init
    }
}();

For context, this is what the relevant HTML looks like. This happens to be in an MVC Index View, where the last column of the table typically has action likes (Edit, Delete, Detail) and so shouldn't be searchable.

<thead>
    <tr>
        <th>Col 0</th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
        <th>Col 6</th>
        <th>Col 7</th>
        <th>Col 8</th>
        <th>Col 9</th>
        <th>Action</th> 
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th> // The only content is a "Delete Link", so shouldn't be searchable
    </tr>
</thead>

kthorngren

The example is here:
https://datatables.net/examples/api/multi_filter_select.html

The columns() API can use a column-selector parameter with one of those being a jQuery selector, ie, class. This example uses text inputs but the concept would be the same:
http://live.datatables.net/vuruhosa/1/edit

Kevin

rdm

I tried something. It appears to work, but it feels a bit hacky and ugly to me.

Please tell me there's a better way.

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

        if (column.index() === 10) {
            return; // exits the function, being the last (and desired) column
        }
        
        [code...]

rdm

Thanks @kthorngren. It looks like the Array approach works.

initComplete: function () {
    this.api().columns([0,1,2,3,4,5,6,7,8,9]).every(function () {

Maybe I'm not seeing it, but there's no way use a math expression. (I tried, with and without quotes).

    this.api().columns(<10).every(function () {

kthorngren

The column-selector doc shows all the options. Using a math expression is not one of the supported options. You could use a function but you would need some programatic why to determine which columns to use.

You can use columns.className to add a class to the desired columns.

Kevin

allan

You can use jQuery expressions which includes the lt() operator:

this.api().columns(':lt(10)').every(function () {

jQuery has loads of CSS expression options.

Alternatively, as Kevin says, if you want something more complex than that, using a function is a good way to gain complete control over which columns are selected.

Allan

rdm

Thanks @allan -- this is exactly what I needed and I verified it works as intended. And, it gives me a better idea of what I can do with this function.