Jquery Datatables add search filter to header for a few columns only-CodePudding

I have added a searchbox to the header of my table generated by the Datatables plugin. It places a searchbox above every colomn in the header. I need the search filter to be aplied to only a few colomns. Lets say colomn 0 and 6 need a search filter the others not. Is there a way to do this? I cant find a answer anywhere on how to make this happen and I am new to coding so I have not yet found a way to make this happen. Below code i use to create the search header.

$('#OBTable thead tr')
        .clone(true)
        .addClass('filters')
        .appendTo('#OBTable thead');
                
                var table = $('#OBTable').dataTable({
                
                 "ajax": {
                    "url": "SelectData.php",
                    "dataSrc": "data",
                },
                 orderCellsTop: true,
                 select: true,
                   initComplete: function () {
            var api = this.api();
 
            // For each column
            api
                .columns()
                .eq(0)
                .each(function (colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    $(cell).html('<input type="text" placeholder="'   title   '" />');
 
                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('keyup change', function (e) {
                            e.stopPropagation();
 
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
 
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '((('   this.value   ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
 
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        });
                });
        },

CodePudding user response：

The DataTables columns() API function can be given a column selector. This can take various forms. One option is to provide an array containing the indexes of the columns you want to contain a search filter.

So, for example you can specify:

.columns( [0, 6] )

I recommend you also look at the approaches in the following official examples:

You should also remove the eq(0) call - I don't believe that is a valid DataTables API function here.

As you can see from the documentation there are other options you can also use - such as providing a class name in the relevant heading cells - but an array of indexes is probably the simplest approach.

Update

The follow-up question is:

now the rest of the columns contain the name of the column header.. Is there a way to leave those empty?

You have not shown us what your HTML table looks like, so this is a guess, based on the assumption that you start with one heading row... I think this is a reasonable assumption...

If you want to avoid having repeated column headings, then you need to clear the contents of the cloned heading row, after you have performed the colone().

One way to do this is as follows:

$('#OBTable thead tr:eq(1) th').text("");

This means the cloned row will start out with no values in any of the heading cells.

This needs to be added after your command which performs the clone operation, and before you create the DataTable.