在Wordpress Breaking HTML表中初始化jQuery DataTables

Question

我一直在Wordpress中使用DataTables，但遇到了一个奇怪的问题，这似乎是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插件: Forms 3.0.5 Forms Pro 3.0.5