Filtering with fixed rows

Filtering with fixed rows

Johny12369Johny12369 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.

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • Johny12369Johny12369 Posts: 2Questions: 1Answers: 0

    Hello @colin,

    You were right but I eventually did it with Row grouping

    Cheers,
    John

This discussion has been closed.