WordPress没有调用默认的jQuery文件

Question

I'm trying to call jQuery DataTable JS file for my plugin that uses DataTable to display the query from the database. The JS file is stored locally on the server.

WordPress: v4.0.1 jQuery: v1.11.1 DataTable: v1.10.5

The WordPress default jQuery file is not getting called. When I register and call the jQuery file hosted on Google, it seems to work. Is there a reason why this is happening?

Here is what I have so far:

functions.php:

function load_jquery_datatables() {
    wp_enqueue_script('jquery');
    wp_register_script( 'jquery-datatables', plugins_url('js/jquery.dataTables.min.js'), array('jquery'));
    wp_enqueue_script('jquery-datatables');
}

index.php:

<?php add_action('wp_enqueue_scripts', 'load_jquery_datatables');?>

<script>
    $(document).ready(function() {
        $('#example').DataTable();
    });
</script>

<table id="example" class="display">
            <form>
            <thead>
                <tr>
                    <td style="text-align: center;"><input type="checkbox" id="selectall"></td>
                    <?php
                    foreach ( $wpdb->get_col( "DESC " . $table_name, 0 ) as $column_name ) 
                    {
                        echo '<th style="text-align: center;">' . $column_name . '</th>';
                    }
                    ?>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <td style="text-align: center;"><input type="checkbox" id="selectall"></td>
                    <?php
                    foreach ( $wpdb->get_col( "DESC " . $table_name, 0 ) as $column_name ) 
                    {
                        echo '<th style="text-align: center;">' . $column_name . '</th>';
                    }
                    ?>
                </tr>
            </tfoot>
            <tbody>
                <?php
                foreach ( $results as $row ) 
                {
                    echo '<tr>';
                        echo '<td><input type=\'checkbox\' class=\'check\' value=' . $id . '></td>';
                        echo '<td>' . $row->id . '</td>';
                        echo '<td>' . $row->status . '</td>';
                        echo '<td>' . $row->create_time . '</td>';
                        echo '<td>' . $row->start_time . '</td>';
                        echo '<td>' . $row->duration . '</td>';
                        echo '<td>' . $row->source . '</td>';
                        echo '<td>' . $row->source_id . '</td>';
                    echo '</tr>';
                }
                    ?>
            </tbody>
</form>
    </table>

Answer 1

The following change fixed the issue:

Changing the jQuery in index.php from:

<script>
    $(document).ready(function() {
        $('#example').DataTable();
    });
</script>

to the following:

<script>
    jQuery(document).ready(function() {
        $('#example').DataTable();
    });
</script>