Column search questions

peterbelove

I have all my questions in this example regarding the column search on the header.

http://live.datatables.net/sodiheke/2/

1/ is there a way to have the header search box to fix the width of the content? the footer search dropdown fits pretty well, for example the 'Age' header box is a bit too wide, while 'Age' footer dropdown fits exact the width. I assume it should be done with 'dom' option but not sure how to archive that.

2/ can I only have the header search box for only certain columns, for example, I only need the search box for 'Age' and 'Salary' columns but not the others. How can I specify that?

3/ I tried to use below code for the header search function and to avoid the sorting once I hit the box as well. but looks like it doesn't work. could anyone advice any issue here?

example.columns().eq(0).each(function(colIdx) {
$('input', example.column(colIdx).header()).on('keyup change', function() {
example
.column(colIdx)
.search(this.value)
.draw();
});

$('input', example.column(colIdx).header()).on('click', function(e) {
    e.stopPropagation();
});

Thanks a lot in advance.

tangerine

For your third question you need this:
https://datatables.net/reference/option/orderCellsTop

peterbelove

looks like it doesn't help with adding

"orderCellsTop": true

tangerine

Did you update your HTML appropriately?

kthorngren

1/ is there a way to have the header search box to fix the width of the content?

See the answer and example in this thread

The example also shows how to use orderCellsTop that Tangerine linked to.

2/ can I only have the header search box for only certain columns,

You can use any of the options in columns-selector to choose the columns desired. Typically people will use an array of column indexes or may assign a classname to the thead to the desired columns and use that as the columns-selector. There are other threads with examples of this.

Kevin