脚本在前端工作，但不在 wp-admin 中

Posted 2023-03-06

【中文标题】脚本在前端工作，但不在 wp-admin 中

【英文标题】：Script is working on Frontend but not in wp-admin

【发布时间】：2020-08-01 11:43:18

【问题描述】：

我有一些来自 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' );

我不知道我做错了什么以及为什么它在前端工作但不在管理面板上。

谢谢！

【问题讨论】：

在管理员中，您的开发者控制台中是否有任何错误？

您好！是的，我有这个错误： TypeError: $(...).DataTable is not a functionadmin.php:295:38

【参考方案1】：

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

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

希望对你有帮助！