Initialising jQuery DataTables in Wordpress Breaking HTML Table

Question

I've been working with DataTables in Wordpress but ran into a weird issue which seems like a wordpress specific problem.

I can initialise the jQuery DataTable without a problem using:

<script>
jQuery(document).ready( function () {
    jQuery('#test_table').DataTable( {
    dom: 'lBfrtip',
} );
} );
</script>

But the jQuery functionality disappears rendering the table back to plain html when I use:

<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>

It doesn't make sense because both of the above work fine in jsfiddle. Any ideas?

I can confirm that your Datatables code works fine, so it's probably some interaction with Wordpress. Can you provide more info on how you're including this code in WP? — TrojanName
– TrojanName, Commented Feb 17, 2019 at 13:59
Thanks for commenting. Please see the answer below. I got it working I have no idea why the new code makes a difference. I simply moved var table = jQuery('#test_table').DataTable(); to line 2. Strange. — maybeicode
– maybeicode, Commented Feb 18, 2019 at 21:34

maybeicode · Accepted Answer · 2019-02-18 13:50:11Z

Thanks for your reply that makes sense,

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

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.

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

Collectives™ on Stack Overflow

Initialising jQuery DataTables in Wordpress Breaking HTML Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related