Child-row search content

taco

Although I have looked at questions (1, 2, 3, 4, 5, 6) on searching through child-row content, none seem to work on a simple jsfiddle example.

Here's my jsfiddle and DataTables debugger results.

Say, for example, I want to search the table for an extension number (which is in the child row). Can someone please guide me on how I can achieve that?

Thanks, taco

---

EDIT: I tried the solution from this post, by adding this:

table.columns().every( function () {
        var that = this;
        var header = this.header();
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            that
            .column( header.getAttribute('data-search-index')*1 ) // *1 to make it a number
            .search( this.value )
            .draw();
        } );
    } );

but it doesn't allow me to search for extension number. Here's the newest jsfiddle.

Any help on this would be appreciated. Thanks