Column filters in header causing problems with column widths, need filter advice
Column filters in header causing problems with column widths, need filter advice
Ironwil616
Posts: 50Questions: 0Answers: 0
I'm using datatables 1.9.3. It would be nice if most people wanted filters in the table foot section, as that's what nearly all of datatables examples show, but nearly all of my users want it in the header. I added another row to the 'thead' section of my table, gave it a CSS class that removes all styles from the cells (I just wanted my drop-down lists visible without the other thead styles), and hooked my drop-down list up to filter its column. I actually ran into 2 problems here that I'll mention quickly in case anyone has a quick and fairly easy fix for them:
1. Filtering a column where the 'td' element has some other tag inside didn't work. If I wrapped the value to filter on within a 'div' element, for instance, it was not found as a match. I'd like to make the match search for any occurrence of the search value within its column. Here's an example of a 'td' element that won't be matched:
this is the value I want to match
All of my table rows need to be kept to a single line, which is where this div comes in.
2. Filtering a column on multiple values didn't work. Much the same as the first problem, if my drop-down list value had multiple text values, columns with only 1 of the values were not matched. I need an easy "OR" filter.
I read about enabling reg ex and smart filtering, but I'm on a real time crunch here and I don't have time to mess around with this for a long time trying to understand how those work. If anyone can list a clear example on how to filter for any value within a table cell, please let me know.
The style problem is what is giving me trouble right now. For the filtering, if I got desperate I can always filter by an integer value mapped to a hidden column, rather than text comparisons, but having a 'thead' row with a drop-down filter in it is causing my column widths to mess up. I even replaced the 'th' cells with 'td' cells, as I read somewhere that was required. It did not help. I have this in my init code:
[code]
"aoColumnDefs": [
{ "sWidth": "30px", "aTargets": [1] },
{ "sWidth": "80px", "aTargets": [3] },
{ "sWidth": "100px", "aTargets": [4] },
{ "sWidth": "50px", "aTargets": [5] },
{ "sWidth": "80px", "aTargets": [6] },
{ "sWidth": "60px", "aTargets": [7] },
{ "sWidth": "170px", "aTargets": [8] },
{ "sWidth": "50px", "aTargets": [9] },
{ "sWidth": "60px", "aTargets": [10] }
],
[/code]
This works as expected, unless I add the extra row to the 'thead' section with the drop-down filter. Then all my width values are ignored completely. If I move the filter row to a 'tfoot' section, the column widths are all correct. That's the only change I make - put the filter row in the thead, column widths break. Put it in tfoot, column widths are fixed. I'd really like to get this working and looking correct, so any advice would be appreciated.
1. Filtering a column where the 'td' element has some other tag inside didn't work. If I wrapped the value to filter on within a 'div' element, for instance, it was not found as a match. I'd like to make the match search for any occurrence of the search value within its column. Here's an example of a 'td' element that won't be matched:
this is the value I want to match
All of my table rows need to be kept to a single line, which is where this div comes in.
2. Filtering a column on multiple values didn't work. Much the same as the first problem, if my drop-down list value had multiple text values, columns with only 1 of the values were not matched. I need an easy "OR" filter.
I read about enabling reg ex and smart filtering, but I'm on a real time crunch here and I don't have time to mess around with this for a long time trying to understand how those work. If anyone can list a clear example on how to filter for any value within a table cell, please let me know.
The style problem is what is giving me trouble right now. For the filtering, if I got desperate I can always filter by an integer value mapped to a hidden column, rather than text comparisons, but having a 'thead' row with a drop-down filter in it is causing my column widths to mess up. I even replaced the 'th' cells with 'td' cells, as I read somewhere that was required. It did not help. I have this in my init code:
[code]
"aoColumnDefs": [
{ "sWidth": "30px", "aTargets": [1] },
{ "sWidth": "80px", "aTargets": [3] },
{ "sWidth": "100px", "aTargets": [4] },
{ "sWidth": "50px", "aTargets": [5] },
{ "sWidth": "80px", "aTargets": [6] },
{ "sWidth": "60px", "aTargets": [7] },
{ "sWidth": "170px", "aTargets": [8] },
{ "sWidth": "50px", "aTargets": [9] },
{ "sWidth": "60px", "aTargets": [10] }
],
[/code]
This works as expected, unless I add the extra row to the 'thead' section with the drop-down filter. Then all my width values are ignored completely. If I move the filter row to a 'tfoot' section, the column widths are all correct. That's the only change I make - put the filter row in the thead, column widths break. Put it in tfoot, column widths are fixed. I'd really like to get this working and looking correct, so any advice would be appreciated.
This discussion has been closed.