I would like to implement DataTables2 in my WordPress plugin. I started from test table to check if it works:
<?php
/*
Plugin Name: WooSKU Updater
Description: A plugin to manage SKUs, quantities, and prices using DataTables.
Version: 1.0
Author: Your Name
*/
function woosku_updater_enqueue_scripts() {
// Enqueue jQuery first
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.7.1.js', array(), null, true);
// Enqueue DataTables after jQuery
wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css');
wp_enqueue_script('datatables-js', 'https://cdn.datatables.net/2.1.8/js/dataTables.js', array('jquery'), null, true);
// Initialize DataTables
wp_add_inline_script('datatables-js', '
jQuery(document).ready(function($) {
$("#woosku-table").DataTable();
});
');
}
add_action('wp_enqueue_scripts', 'woosku_updater_enqueue_scripts');
// Add the WooSKU Updater admin menu
function woosku_updater_menu() {
add_menu_page(
'WooSKU Updater', // Page title
'SKU Updater', // Menu title
'manage_options', // Required capability
'woosku-updater', // Menu slug
'woosku_updater_page', // Function to display the admin page content
'dashicons-update', // Icon
100 // Position
);
}
add_action('admin_menu', 'woosku_updater_menu');
// Callback function for the admin page content
function woosku_updater_page() {
?>
<div class="wrap">
<h1>WooSKU Updater</h1>
<p>Manage your SKUs, quantities, and prices.</p>
<table id="woosku-table" class="display" style="width:100%">
<thead>
<tr>
<th>SKU</th>
<th>QTY</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr><td>SKU001</td><td>10</td><td>£15.00</td></tr>
<tr><td>SKU002</td><td>5</td><td>£25.50</td></tr>
<tr><td>SKU003</td><td>8</td><td>£12.75</td></tr>
<tr><td>SKU004</td><td>20</td><td>£8.99</td></tr>
<tr><td>SKU005</td><td>15</td><td>£10.50</td></tr>
</tbody>
</table>
</div>
<?php
}
It creates example table, but it doesn’t load all Datatables files. The error I have is
load-scripts.php?c=1&load%5Bchunk_0%5D=wp-hooks,jquery-core,jquery-migrate,utils&ver=6.7:4
POST https://example.com.com/wp-admin/admin-ajax.php net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK)
And the code connected to this error:
<script type='text/javascript'>
(function($) {
//(Re)starts the background worker thread
function blcDoWork() {
$.post("https://example.com.com/wp-admin/admin-ajax.php", {
'action': 'blc_work',
'_ajax_nonce': 'a5213e0ea6'
});
}
//Call it the first time
blcDoWork();
//Then call it periodically every X seconds
setInterval(blcDoWork, 421000);
}
)(jQuery);
</script>
Any thoughts? Thank you.