Filtering with fixed rows
Filtering with fixed rows
Johny12369
Posts: 2Questions: 1Answers: 0
Hello, I have a following simplified structure of table with DataTables plugin:
<table class="tasks-datatable">
<thead>
<tr>
<td>Head title</td>
</tr>
</thead>
<tbody>
<tr class="head-row">
<td>Category 1</td>
</tr>
<tr>
<td>Subcategory 1</td>
</tr>
<tr>
<td>Subcategory 2</td>
</tr>
<tr class="head-row">
<td>Category 2</td>
</tr>
<tr>
<td>Subcategory 3</td>
</tr>
<tr>
<td>Subcategory 4</td>
</tr>
</tbody>
</table>
and I have enabled bFilter filtering but I need to just filter rows with subcategories and keep all category rows. So if I type for example "Subcategory 1" to filter input the result should look like this:
<table class="tasks-datatable">
<thead>
<tr>
<td>Head title</td>
</tr>
</thead>
<tbody>
<tr class="head-row">
<td>Category 1</td>
</tr>
<tr>
<td>Subcategory 1</td>
</tr>
<tr class="head-row"> <!-- It doesn't matter if this will be visible if it has no subcategories -->
<td>Category 2</td>
</tr>
</tbody>
</table>
Is it possible somehow? My JS code looks like this but of course when I type something to filter input the category rows are treated just like subcategory rows.
$('.tasks-datatable').each(function () {
var options = {
language: {
url: '/assets/js/datatable-langs/czech.json'
},
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Všechny"]],
pageLength: -1,
fixedColumns: true,
scrollCollapse: true,
scrollX: true,
columnDefs: [{width: 150, targets: 0}],
bFilter: true,
scrollY: '60vh',
paging: false,
bSort: false
};
var table = $(this).DataTable(options);
});
Thanks.
This discussion has been closed.
Answers
Hi @Johny12369 ,
That's not possible, I'm afraid. Each row is treated independently of other, so yep, "the category rows are treated just like subcategory rows".
Cheers,
Colin
Hello @colin,
You were right but I eventually did it with Row grouping
Cheers,
John