wordpress quick setup

lkowitz@gmail.com

hi,
i've used datatables in other technologies, but i'm struggling to implement it in wordpress. does anyone here have any experience with it?

i'm using wp_enqueue_script to reference datatables js and css cdn files as well as my own local javascript file- i see each inside <script> tags when i view the web page's source in a browser. i've tested with an alert() command in javascript and i'm properly referencing my .js file, but when i put the simple datatables function from the datatables.net page in my .js file nothing happens. i've included some code from my plugin and .js files below if that's helpful. the table displays on the page just fine, though it doesn't have even the zero configuration datatables styling.
thanks!

plugin

add_action('create_datatable', 'show_datatable');
function show_datatable (){

function add_datatables_javaScript (){
        wp_register_script( 'dataTables-js', 'https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js' , '', '', true );
        wp_register_script( 'customScriptDatatables', plugins_url( 'includes/js/customScriptDatatables.js', __FILE__, '', true ) );
        wp_register_style( 'dataTables-css', 'https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css', '', '', true );

        wp_enqueue_script( 'dataTables-js' );
        wp_enqueue_script( 'customScriptDatatables' );
        wp_enqueue_style( 'dataTables-css' );
}
add_action( 'load_datatables_javascript', 'add_datatables_javaScript' );

global $wpdb;
$getTheRows = $wpdb->get_results(
        "SELECT date,id_result FROM tableName where user_id=2" 
); # $getTheRows =...

echo '<table id="RGdataTable"';
echo "<tr><th>Date</th><th>ID</th></tr>";
foreach($getTheRows as $gotRow){
        $date = $gotRow->date;
        $id = $gotRow->id_result;
echo "<tr><td>" . $date . "</td><td>" . $id . "</td></tr>";
}

echo "</table>";
} # function show_datatable

customScriptDatatables.js file

alert("test load");

$(document).ready( function () {
    $('#RGdataTable').DataTable();
} );

allan

Your HTML isn't valid which might be causing the problem. The opening table tag doesn't have a >. Also, DataTables fundamentally requires that thead and tbody elements be used.

With those corrections hopefully it should start working.

Allan

lkowitz@gmail.com

thanks for catching those issues. they were certainly a problem, but not the entire problem. wordpress uses jQuery.noConflict so using $ in my javascript file was another problem. after editing the html and javascript i now have elements from datatables on my table. thanks for the help. customScriptDatatables.js edits are below

jQuery(document).ready( function () {
    jQuery('#RGdataTable').DataTable();

} );

fhuo

Hi
I have a similar task (get db data and display as datatable). I copy'd your code but the <script type .. with the cdn information are not generated.
Can you display the full plugin for me?
Thanks - Freddy

allan

Hi Freddy,

The getting started documentation for DataTables is here. If you are having a problem with it, please open a new discussion with a link to your page so we can offer some help.

Allan