i have problem with implementation DataTables in WordPress. I Want use table in function. Data is displayed but DataTables does not work.
when I watch YT with sample , datatables is not use in WordPress. I can’t handle the problem. I think my code has a problem with including the .js file
My code
<?php
/*
* Plugin Name: Tabela Wyników
*
*
*/
// Załaduj plik z funkcjami w wtyczce
add_shortcode("tabelaWynikow","table_show");
function table_show(){
// get_table_data() ;
global $wpdb;
$table_name = $wpdb->prefix . 'table_in_database';
$results = $wpdb->get_results("SELECT * FROM $table_name");
echo ' <head>';
echo ' <title>Data tables</title>';
echo ' <meta charset="utf-8" />';
echo ' <meta name="viewport" content="width=device-width, initial-scale=1.0">';
echo ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />';
echo' <link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css" />';
echo' <script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script> ';
echo ' <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>';
echo ' <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>';
echo ' <script src="/js/ajax-script.js"></script>';
echo ' <script type="text/javascript" src="/js/main.js"></script>';
echo '</head> ';
// Sprawdzanie, czy mamy jakiekolwiek dane
if (!empty($results)) {
// Zaczynamy tworzenie tabeli HTML
echo '<body>';
echo '<table id="myTable" class="display">';
echo '<thead>';
echo '<tr>';
echo '<th>ID</th>';
echo '<th>Imie</th>';
echo '<th>Nazwisko</th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';
// Pętla po wynikach i wyświetlanie danych
foreach ($results as $row) {
echo '<tr>';
echo '<td>' . esc_html($row->id) . '</td>';
echo '<td>' . esc_html($row->imie) . '</td>';
echo '<td>' . esc_html($row->nazwisko) . '</td>';
echo '</tr>';
}
echo '</tbody>';
echo '</table>';
echo ' </body>';
}
else {
echo 'no data';
}
}
In
i have:
$(document).ready( function () {
$('#myTable').DataTable();
} );