jQuery Datatable filter nested rows

by Alvin Olavarrieta

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th data-search-index="0">Name</th>
            <th data-search-index="0">Position</th>
            <th data-search-index="0">Primary Office</th>
            <th data-search-index="0">Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th data-search-index="0">Name</th>
            <th data-search-index="0">Position</th>
            <th data-search-index="0">Primary Office</th>
            <th data-search-index="0">Salary</th>
        </tr>
    </tfoot>
</table>

CSS

td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

function format(d) {
        // `d` is the original data object for the row
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
            '<tr>' +
            '<td>Full name:</td>' +
            '<td>' + d.name + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extension number:</td>' +
            '<td class="extNo">' + d.extn + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>All Offices:</td>' +
            '<td>' + d.allOffices + '</td>' +
            '</tr>' +
            '</table>';
    }

$(document).ready(function () {
    
    var mdata = [
      {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "allOffices":"Edinburgh, New York, San Francisco",
      "extn": "5421"
    },
    {
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "allOffices":"Edinburgh, New York, San Francisco",
      "extn": "8422"
    },
    {
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "allOffices":"Edinburgh, New York, San Francisco",
      "extn": "1562"
    }
]

    var details = [];
    var table = $('#example').DataTable({
        data: mdata,
          columns: [{
            className: 'details-control',
            orderable: false,
            data: null,
            defaultContent: '',
            render: function(data, type, row, meta) {  
                details[meta.row] = format(data);
            }    
         }, 
         { "data": "name" }, 
         { "data": "position" }, 
         { "data": "office" }, 
         {  "data": "salary" }],
         "order": [
            [1, 'asc']
        ]
    });
    
     $('#example tfoot...