Using Filter/Sort with hidden child rows

[etombaugh]

I have made a pretty complex table, and in the interest of showing important items without making the page overwhelming, I've made child rows in the table with the additional breakout of information. Then the user can click on the table row itself, the child row will expand and the details revealed using Bootstrap Accordion.

When I do this though, I get an error saying "Cannot read property 'innerHTML' of undefined", but removing the child rows make everything work again.

I only want the filtering to work on the parent rows, and leave the child rows alone. I would imagine that since the child row does not have the same structure as the parent row (essentially tables within the <tr>), it is not able to generate the filtering correctly.

Any suggestions? Perhaps a method to tell datatable to only filter/sort on the parent rows?

[Holt59]

Could you show me a bit of the table layout? And also the line where the error occurs (if you are not using the minified version)?

You can specify a function in place of a filter, e.g.:

{
    filters: [
        function(data, text) { // First column
            return data == text; 
        }
    ]
}

[etombaugh]

Here is the error I am getting:

Uncaught TypeError: Cannot read property 'innerHTML' of undefined
    at new DataTable (datatable.js:135)
    at HTMLTableElement.<anonymous> (datatable.jquery.js:42)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.$.fn.datatable (datatable.jquery.js:21)
    at HTMLDocument.<anonymous> (view_all_rates:87014)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

Table for example purposes (simplified). First row is the parent row, the second tag is for the hidden detail row.

<tr data-toggle="collapse" data-target="#rate_detail-1" class="accordion-toggle">
        <td rowspan="1" colspan="1">Test Data</td>
    <td rowspan="1" colspan="1">Test Data</td>
    <td rowspan="1" colspan="1">Test Data</td>

</tr>

<div id="rate_detail-1">
  <tr class="accordian-body collapse">
    <td colspan="10">
      <div class="col-md-6">
        <div class="box box-danger">
          <div class="box-header with-border">
            <h4 class="box-title">Rate Details</h4>
          </div>
          <div class="box-body">
            <table class="table table-bordered table-hover">
              <tbody>
                <tr>
                  <td>Carrier</td><td>Sample</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>
    </td>
  </tr>
</div>

[Holt59]

I do not really understand your example... You have two different rows each time? And you have one <tr> within a <div>? I am not sure this is valid HTML...

If you really have two different rows, it'll be quite complicated to do what you want... To use datatable at all actually since your two rows will probably get messed up when sorting / etc.