Correct placement of select inputs at table head.

rdm

I'm looking at Individual column searching (select inputs) and have a question.

The example has the dropdowns in the footer. I placed the dropdowns in the header instead, but the dropdowns replaced the column titles in the header row.

    appendTo( $(column.header()).empty() )

In other words, I started out with this:

And it changed to this.

I can immediately see why the examples show the selects at the bottom of the table. Unfortunately my users expect to see filters at the top of the table, so I need to make it work that way. How to I place the dropdowns above the header titles instead of overwriting them?

rdm

...and I figured it out. It's as simple as taking out the .empty().

So the select statement should look like this:

var select = 
     $('<select><option value=""></option></select>')
             .appendTo($(column.header()))

Instead of this:

var select = 
    $('<select><option value=""></option></select>')
           .appendTo($(column.header()).empty())

rdm

Scratch that idea. While it works great in the browser, it fails spectacularly when exporting to Excel or printer. All the table data gets placed into the header rows.

There has to be a way to do this.

rdm

So I tried to apply an inline css rule to the tfoot, forcing it to appear at the top of the table, and there's something, somewhere in the codebase that is overwriting my css rule.

<style>
        .showTop {
            display: table-row-group !important;
        }
    </style>

I can see in the browser that this class is still present in the rendered HTML. I can see that really fast blip as something in the DataTables code moves the footer to the bottom of the table. The problem is that I can't figure out what part of the code is causing this behavior.

<tfoot class="showTop">
    <tr>
        <th></th>
        <th></th>

kthorngren

I haven't tried re-working this for dropdown search but it may help you. Basically there are two header rows, the second for the search. It uses orderCellsTop to move the sorting to the top header.

http://live.datatables.net/giharaka/1/edit

Kevin

rdm

@kthorngren -- I didn't know about orderCellsTop. It certainly helps with the display.

However, I still have the problem where full list of dropdown content makes it to the Excel and print exports.

I added a class to the tr I want to keep hidden: <tr class="doNotExport">

Now all I need to do is tell excelHtml5 and print not to export that row.

I know how to hide columns from export, but not a specific row.

rdm

From Stack Overflow, I tried this without success.

buttons: [
                    {
                        extend: 'excelHtml5',
                        exportOptions:{
                            rows: ':not(.notPrintable)'
                        }
                    },

where I declared this in the specific TR.

<thead>
    <tr class="notPrintable">
        <th></th>

kthorngren

I just tried it here with my example and the select inputs don't appear in the export:
http://live.datatables.net/saqozowe/1/edit

I don't have time at the moment to update the example to use drop down lists to test with.

Maybe make sure you are using the latest buttons extension.

Kevin

rdm

Thanks for the attempt, but it's simply not working for me. And yes, I updated all of my datatables and editor code yesterday (including buttons), so that shouldn't be the problem.

rdm

I ran out of time to make this approach work. In the meantime, it looks like I'll have to use an MVC solution. It means more server trips, but at least I know that it will export as intended.

kthorngren

I was able to put the drop down in the 2nd header and it doesn't appear in the export:
http://live.datatables.net/saqozowe/2/edit

HTH,
Kevin

rdm

@kthorngren -- I copied your code exactly that the dropdowns aren't appearing. I did notice that you're using jQuery version 1 in your CDN. I'm on jQuery version 3. I wonder if that's part of the problem.

rdm

It turns out I had to add an empty TR row at the bottom of my existing TR row used to hold the column titles.

<tr><th></th><th></th><th></th><th></th><th></th><th></th></tr>

As promised, the exports work as they should work.

It works, but I still don't understand why it suddenly works now. It could be the infamous cache problem.

kthorngren

Feel free to update the example as you wish. I changed the jQuery version to 3.1.0 and it still works.

Make sure this portion matches your table ID: .appendTo( $("#example. I also have two headers in my table. Make sure you add the second.

http://live.datatables.net/saqozowe/3/edit

Kevin

rdm

Thanks for your work. This looks stable on my side too. Now I don't have to use MVC dropdowns and create more server traffic.