1

i have a plugin that i've started developing, and i want to try to use datatables.net to display table data. i wasn't sure how to achieve this, and after searching and trying different stuff i'm lost. here's what i have in my plugin. currently, when i load the page it displays the table, and i can see in the page source that the dataTables-js, dataTables-css, and customScriptDatatables are loaded.

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(
        $wpdb->prepare( "SELECT date,id_result FROM tableName where user_id=2" )
); # $getTheRows =...

echo '<table id="dataTable"';
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

inside my plugin directory is an includes directory and inside that is a js directory. i put customScriptDatatables.js in there, and put the default datatables.net example in that with a reference to id dataTable. customScriptDatatables.js is below:

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

i'm new to wordpress and javascript so forgive any unknown ignorance and bad practice- but please feel free to correct me. the plan was to put different functions for different tables in the customScriptDatatables.js file and load it in pages where i wanted to use datatables, but i'm not getting a datatables looking table. can someone tell me where i went wrong? or maybe suggest a better way? i'm not entirely sure where to write the javascript code, and that's why i put it in a .js file and tried to use wp_enqueue_script. thanks!

  • If you remove the JS part, does your code output a standard table correctly without issue? Keep in mind that DataTables is not WP code, and so that part of your question is out of scope and unrelated to WP. Also, why are you calling prepare if you have no variables to insert into the query? That should be screaming out warnings in the PHP error log, prepare requires more than 1 argument. Have you checked that your query actually works and pulls in data? I see you never check if it found stuff and assumed it did – Tom J Nowell Apr 8 '18 at 15:39
  • the query does pull in data and show the table on the page without issue even with the js stuff. i can remove the prepare and it works the same. this was thrown together as a test to see how to use datatables so i'm not doing any checking. i'm mainly trying to understand how to use javascript with the plugin. – robocopgodzilla Apr 8 '18 at 16:44
  • Then it sounds like this is a pure JS problem regarding DataTables. You've done the WP side already. You never mentioned that you don't know how to load JS on the frontend so I assume that part is fine? AKA it's what the JS does not wether it loads? I presume if you put alert("it loaded"); at the top, you see the it loaded message? – Tom J Nowell Apr 8 '18 at 17:19
  • yes. when i add alert("it loaded") to the customScriptDatatables.js file i get the alert when i load the page. thanks for that testing idea. glad that the wordpress stuff is correct. i guess i'll look in the datatables forums for help. thanks tom. – robocopgodzilla Apr 8 '18 at 18:46
0

there were a few issues.

  1. my table element wasn't closed.
  2. datatables needs thead and tbody elements.
  3. wordpress uses jquery.noconflict so i had to change my javascript file. i took out the $ and replaced it with jQuery: http://api.jquery.com/jQuery.noConflict/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.