Initialising in Wordpress Column Search Code Breaking Table

chachipereira

Hello all,

I'm not what I would describe as a developer at all but I managed to get DataTables working by initialising the table in Wordpress using:

<script>
jQuery(document).ready( function () {
    jQuery('#test_table').DataTable( {
    dom: 'lBfrtip',
        buttons: [
            { extend:'copy', attr: { id: 'allan' } }, 'csv', 'excel', 'pdf', 'print'
        ]
} );
} );
</script>

I'd like to add column searching functionality but using the following code does not initialise DataTables at all and reverts the table back to basic html.

<script>
jQuery(document).ready(function() {
    // Setup - add a text input to each footer cell
    jQuery('#test_table tfoot th').each( function () {
        var title = jQuery(this).text();
        jQuery(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = jQuery('#test_table').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        jQuery( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
</script>

I've replaced all $ with jQuery.
Can someone with the knowledge point me at my error? I can't understand why this doesn't work.

colin

Hi @chachipereira ,

This works for me here. Does your table have an ID of test_table? Are there any errors in the console?

Cheers,

Colin

chachipereira

Thanks Colin,

No errors were showing at all.
After an excruciating few hours I managed to get it working with:

jQuery(document).ready(function() {
    var table = jQuery('#test_table').DataTable();
    // Setup - add a text input to each footer cell
    jQuery('#test_table tfoot th').each( function () {
        var title = jQuery(this).text();
        jQuery(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    });
    table.columns().every( function () {
        var that = this;
        jQuery( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
    });
    });
}); 

I moved var table = jQuery('#test_table').DataTable(); to line 2.

Strange I have no idea why this makes a difference. If anyone else runs into this problem my setup is:

Wordpress 5.0.3
Plugins:
Formidable Forms 3.0.5
Formidable Forms Pro 3.0.5

Im enqueueing my .js file as described here: https://developer.wordpress.org/themes/basics/including-css-javascript/

colin

Hi @chachipereira ,

Very odd - glad all sorted and thanks for posting back with the solution.

Cheers,

Colin