DataTables 2.* Adding custom complex elements to header.

[Banner-Keith]

We are upgrading to DataTables version 2.

In our implementation we are building a row of filters in the header like this:

In DT 1.* we were able to do this by building the table in html and then binding DataTables to it. Here's a simplified example.

<table class="table table-striped table-bordered" id="ExampleTable">
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <th><input class="form-control form-control-sm txt-filter" data-index="1" placeholder="Search..." style="width:100%;" /></th>
      <th><input class="form-control form-control-sm txt-filter" data-index="2" placeholder="Search..." style="width:100%;" /></th>
    </tr>
  </thead>
</table>

In some cases, the elements within that second row of the header are significantly more complex and it would be painful to build them in JavaScript and append them to the header.

In DT 1.* it seems that the automatic header row with the titles and such were only bound to the first header row.
In DT 2 those get bound to any number of rows so both of my header rows end up the same, replacing the custom inputs:

I have looked through the docs, forums, and even the source code and I don't see any way to tell DataTables to only bind the first row of the header.

Is there some way to tell it to only bind to the first row, or to ignore the second row?

If such a thing does not exist would you consider allowing us to add a class to the second header row that then is checked for in the JavaScript and skips overriding that row with the column headers?

[AllanJard]

Hi,

There are two options:

1. The prefered option is to use data-dt-order="disable" as described in this example. That gives fine grained control over which rows / cells trigger ordering.
2. Use orderCellsTop: true in the table initialisation - docs. This option is deprecated since it doesn't offer all the possibilities of data-dt-order, but there is the possibility I might undeprecate it since it is fairly widely used.

[Banner-Keith]

It looks like that removes the ordering controls, but the th tag contents are still replaced:

Here's a fiddle with an example: https://jsfiddle.net/1y27gLfo/

[Banner-Keith]

To give an idea of why we do it this way vs in JavaScript here's what one of our inputs in that second table header row looks like in html:

[AllanJard]

Hmmm - yes. The title will be written to all cells. Interesting one - thanks for letting me know about that. I'll look into what I can do about that.