Search child-row content

taco

Although I have looked at similar questions (1, 2, 3, 4, 5, 6) on this, 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 jsfiddle.

Any help on this would be appreciated. Thanks

taco

I'd prefer not to make hidden columns like in this post