Home > Software design >  Getting 'Uncaught TypeError: $(...).dataTable is not a function' while using datatable in
Getting 'Uncaught TypeError: $(...).dataTable is not a function' while using datatable in

Time:07-06

I am using a datatable to load items from database in a custom wordpress plugin. But I keep getting this error 'Uncaught TypeError: $(...).dataTable is not a function'. This is a common question but all the solutions are same and I have checked them all. The jquery and datatable libraries are loaded in correct order, no mistake in the library links and none of them loaded twice. what can be any other cause for this error?? Below is how the libraries enqueued:

if (!function_exists('current_actives_mng_enqueue'))
{
    function current_actives_mng_enqueue()
    {
        // JS
        wp_register_script('cur_act_mng_jquery', '//code.jquery.com/jquery.min.js');
        wp_register_script('cur_act_mng_bootstrap_js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
        wp_register_script('cur_act_mng_bootstrap_popper_js', '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js');
        wp_enqueue_script('cur_act_mng_datatable_js','//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js',array('jquery'));

        wp_enqueue_script('cur_act_mng_jquery');
        wp_enqueue_script('cur_act_mng_bootstrap_js');
        wp_enqueue_script('cur_act_mng_bootstrap_popper_js');
        wp_enqueue_script('cur_act_mng_datatable_js');

        // CSS
        wp_register_style('cur_act_mng_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
        wp_register_style('cur_act_mng_datatable_css', '//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css');
        wp_register_style('cur_act_mng_custom', plugins_url('css/style.css', __FILE__));

        wp_enqueue_style('cur_act_mng_bootstrap');
        wp_enqueue_style('cur_act_mng_datatable_css');
        wp_enqueue_style('cur_act_mng_custom');
    }

    add_action('wp_enqueue_scripts', 'current_actives_mng_enqueue');
}

This is the js code for loading the table:

jQuery(document).ready(function($){
    $('#cur_act_tbl').dataTable({    
        ajax: {
            url: "/wp-admin/admin-ajax.php?action=datatables_endpoint",
            cache:false,
        },
        columns: [
            { data: 'mls' },        
            { data: 'status' },        
        ],
        pageLength: 25
    });

CodePudding user response:

Replacing $ with jQuery might help

jQuery('#cur_act_tbl').dataTable(
  • Related