脚本在前端上运行，但在wp-admin中不起作用

Question

我有一些来自datatables.net的样式和脚本，并且正在通过此功能在前端使用它们：

function datatables_enqueue_child_styles() {
    if(is_page('alumnes') OR is_page('veure-despeses')){ ?>
    <script src=<?php echo "".get_home_url()."/wp-content/themes/CasalMasRomeu/DataTables/jQuery-3.3.1/jquery-3.3.1.min.js" ?>></script>
    <link href=<?php echo "".get_home_url()."/wp-content/themes/CasalMasRomeu/DataTables/datatables.css" ?> rel="stylesheet" type="text/css">
    <script src=<?php echo "".get_home_url()."/wp-content/themes/CasalMasRomeu/DataTables/datatables.js" ?>></script>
<?php }

}
add_action( 'wp_head', 'datatables_enqueue_child_styles' );

然后我用这段代码显示表：

<div id="content" class="site-content">
<?php echo do_shortcode('[INSERT_ELEMENTOR id="459"]'); ?>
    <div class="content-formularis">
        <table id="despeses-table" class="display responsive nowrap" style="width:100%">
            <thead>
                <tr>
                    <th>Alumne</th>
                    <th>Quantitat</th>
                    <th>Tipus</th>
                    <th>Pagat</th>
                    <th>Concepte</th>
                    <th>Altres comentaris</th>
                    <th>Data</th>
                </tr>
            </thead>
            <tbody>
                <?php 
                // args
                $args = array(
                    'numberposts'   => -1,
                    'post_type'     => 'despeses',
                );

                // query
                $the_query = new WP_Query( $args );
                if( $the_query->have_posts() ):
                    while( $the_query->have_posts() ) : $the_query->the_post();
                        $id = get_the_ID();
                        if ( get_field( 'pagat' ) == 1 ) { $pagat = "Pagat"; } else { $pagat = "No pagat"; }
                        echo "<tr>";
                        $post_object = get_field( 'alumnes' );
                        echo '<td>'.get_the_title($post_object).'<br>';
                        echo '<a href="' . get_home_url() . '/edita-objectes/?ptype=despeses&object_id=' . $id . '">Editar despesa</a></td>';
                        echo '<td>'.get_field( "quantitat" ).'</td>';
                        echo '<td>'.get_field( "tipus" ).'</td>';
                        echo '<td>'.$pagat.'</td>';
                        echo '<td>'.get_field( "concepte" ).'</td>';
                        echo '<td>'.get_field( "altres_comentaris" ).'</td>';
                        echo '<td>'.get_the_date("d/m/Y").'</td>';
                        echo "</tr>";
                        endwhile;
                endif;
                wp_reset_query();    // Restore global post data stomped by the_post(). ?>
            </tbody>
            <tfoot>
                <tr>
                    <th>Alumne</th>
                    <th>Quantitat</th>
                    <th>Tipus</th>
                    <th>Pagat</th>
                    <th>Concepte</th>
                    <th>Altres comentaris</th>
                    <th>Data</th>
                </tr>
            </tfoot>
        </table>
    </div>

</div>
<script>
var table = $('#despeses-table').DataTable();
$(document).ready( function () {
    $('#despeses-table').DataTable();
        responsive: true
} );
new $.fn.dataTable.Buttons( table, {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
</script>

这很好，但是当我想在wp-admin页面上使用它时，表显示不正确。我正在使用这段代码：

function cmr_despeses(){ ?>
    <h1>Despeses</h1>
    <table id="despeses-table" class="display responsive nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Alumne</th>
                <th>Quantitat</th>
                <th>Tipus</th>
                <th>Pagat</th>
                <th>Concepte</th>
                <th>Altres comentaris</th>
                <th>Data</th>
            </tr>
        </thead>
        <tbody>
            <?php 
            // args
            $args = array(
                'numberposts'   => -1,
                'post_type'     => 'despeses',
            );

            // query
            $the_query = new WP_Query( $args );
            if( $the_query->have_posts() ):
                while( $the_query->have_posts() ) : $the_query->the_post();
                    $id = get_the_ID();
                    if ( get_field( 'pagat' ) == 1 ) { $pagat = "Pagat"; } else { $pagat = "No pagat"; }
                    echo "<tr>";
                    $post_object = get_field( 'alumnes' );
                    echo '<td>'.get_the_title($post_object).'<br>';
                    echo '<a href="' . get_home_url() . '/edita-objectes/?ptype=despeses&object_id=' . $id . '">Editar despesa</a></td>';
                    echo '<td>'.get_field( "quantitat" ).'</td>';
                    echo '<td>'.get_field( "tipus" ).'</td>';
                    echo '<td>'.$pagat.'</td>';
                    echo '<td>'.get_field( "concepte" ).'</td>';
                    echo '<td>'.get_field( "altres_comentaris" ).'</td>';
                    echo '<td>'.get_the_date("d/m/Y").'</td>';
                    echo "</tr>";
                    endwhile;
            endif;
            wp_reset_query();    // Restore global post data stomped by the_post(). ?>
        </tbody>
        <tfoot>
            <tr>
                <th>Alumne</th>
                <th>Quantitat</th>
                <th>Tipus</th>
                <th>Pagat</th>
                <th>Concepte</th>
                <th>Altres comentaris</th>
                <th>Data</th>
            </tr>
        </tfoot>
    </table>
    <script>
    var table = $('#despeses-table').DataTable();
    $(document).ready( function () {
        $('#despeses-table').DataTable();
            responsive: true
    } );
    </script>
<?php }

我已使用此功能将样式排入管理面板：

function utm_user_scripts() {
    echo "HOLA";
    $plugin_url = plugin_dir_url( __FILE__ );
    wp_enqueue_style( 'admin-dt-css', $plugin_url . "DataTables/datatables.css");
    wp_enqueue_script( 'admin-dt-js',  $plugin_url . "DataTables/datatables.js");
    wp_enqueue_script( 'admin-dt-jquery',  $plugin_url . "DataTables/jQuery-3.3.1/jquery-3.3.1.min.js");
}
add_action( 'admin_enqueue_scripts', 'utm_user_scripts' );

我不知道我在做什么错，为什么它在前端而不在管理面板上起作用。

谢谢！

Answer 1

我解决了它，但jquery库除外。您可以在此处找到更多详细信息：

TypeError: $(...).DataTable is not a function

希望它可以帮助您！