javascript datatables in a plugin

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!

Read more here:: javascript datatables in a plugin

Leave a Reply

Your email address will not be published. Required fields are marked *