do not alter filter row in header

craigh

I have a row of filters in the row below the headers.

<thead>
  <tr><td>col1</td><td>col2</td><td>col3</td></tr>
  <tr><td><input></td><td><select></td><td><input></td><td><input></td></tr>
</thead>

It appears datatables is wrapping my second-row form elements inside a <span class="dt-column-title"><select></span> which causes invalid html ("Element div not allowed as child of element span in this context.") because my <select> is a tom-select which adds a div.

Is there a way to tell dt to ignore the second header row or is there a better way to handle this?

allan

Unfortunately no, there isn't an option to have it not wrap the content in a span at the moment. The idea there was to introduce a semantically neutral element to allow layout control for things like the ordering icons and ColumnControl.

Does it actually cause any rendering issues, or is it just a strict HTML error? I could possibly make the span a div, or add an option for that, but it is already a child of a div (used as the flex container), so span was the obvious choice.

Allan

kthorngren

Without seeing a test case with the issue it's hard to say. I copied your code into this test case:
https://live.datatables.net/bunisiqu/1/edit

I did get this error:

dataTables.js:2092 Uncaught TypeError: Cannot read properties of undefined (reading 'sClass')

The problem with the code above is there are three columns in the top header but four in the bottom. Removing the last column in the second header fixes the issue. Not sure if that is the same issue for you. If not please update the test case to show the issue you are having. Or provide a link to a test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

craigh

@kthorngren your test case is accurate but as I said above, I am using tom-select on the <select> element. This js lib adds a <div> element after the <select>. When dt wraps the contents of the <td> you now get something like

<td data-dt-column="1" rowspan="1" colspan="1" class="dt-orderable-asc dt-orderable-desc">
    <div class="dt-column-header">
        <span class="dt-column-title">
            <select></select>
            <div class="ts-wrapper form-select form-select-sm datatable-column-filter datatable-multiple-select-filter multi plugin-checkbox_options plugin-remove_button plugin-limit_display"><div class="ts-control"><input type="text" autocomplete="off" size="1" tabindex="0" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="dt-column-0-filter-ts-dropdown" id="dt-column-0-filter-ts-control" aria-labelledby="dt-column-0-filter-ts-label" placeholder="Any"></div></div>
        </span>
        <span class="dt-column-order" role="button" aria-label="col2: Activate to sort" tabindex="0"></span>
    </div>
</td>

note the injected <div> after the <select>

This is invalid HTML - a div inside a span.

I can't figure out how to add the tom-select lib to your test case generator, so I cannot provide the exact situation.

@allan it renders fine. The problem is meeting .gov standards for html in my client's use case.

craigh

https://live.datatables.net/bunisiqu/2/edit?html,css,js,output

here is a test case. you have to inspect the html around the select element to see the problem.

allan

I think the only realistic way to address this is to change the span to be a div. I can't do that for DataTables 2.x, but I'm willing to consider that change for DT3, which I'm working on at the moment. That said, it could be an optional parameter for DT2. Would that resolve the issue for you?

Allan

craigh

@allan I think optional would solve it for me, yes. thanks!

allan

I'll aim to get that implemented on Monday. Also aiming to make a release for DT on Monday, so it should be a quick turn around

Allan