wordpress quick setup

wordpress quick setup

lkowitz@gmail.comlkowitz@gmail.com Posts: 2Questions: 1Answers: 0

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();
} );

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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.comlkowitz@gmail.com Posts: 2Questions: 1Answers: 0

    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();
    
    } );
    
  • fhuofhuo Posts: 7Questions: 0Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.