Инициализация JQuery DataTables в Wordpress Разрыв HTML-таблицы

Question

Я работал с DataTables в Wordpress, но столкнулся со странной проблемой, которая кажется специфической для WordPress.

Я могу инициализировать jQuery DataTable без проблем, используя:

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

Но функциональность jQuery исчезает, переводя таблицу обратно в обычный 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>

Это не имеет смысла, потому что оба из вышеперечисленных прекрасно работают в jsfiddle.Есть идеи?

Answer 1

Спасибо за ваш ответ, который имеет смысл,

Я ставлю в очередь свой файл .js, как описано здесь: https://developer.wordpress.org/themes/basics/including-css-javascript/

Через несколько мучительных часов мне удалось заставить его работать:

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();
            }
    });
    });
}); 

Я переместил

var table = jQuery('#test_table').DataTable();

в строку 2.

Если кто-то еще столкнется с этой проблемой, мои настройки:

Wordpress 5.0.3Плагины: Грозные Формы 3.0.5 Грозные Формы Pro 3.0.5