Mise à jour du site PHP 8.2 Jquery 3.7.1 - Datatable 1.13.4 - Scroller 2.1.1 le 16/6/2023
DataTables est un plugin Javascript jQuery. C'est un outil très flexible, qui ajoute des contrôles d'interaction avancés aux tables HTML ou MYSQL. Voici une liste non exhaustive des fonctionnalités de DataTables :
-
Pagination
-
Recherche multi colonnes
-
Ordre multi colonnes
-
Traitement côté client
-
Traitement côté serveur
Les derniéres version de Jquey et dataTables
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.1.1/js/dataTables.scroller.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
Le code CSS
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.1.1/css/scroller.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css">
Le javascript
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
var dataTable = $('#news-grid').DataTable( {
serverSide: true, // active le traitement côté serveur
columnDefs: [
{
"targets": [ 5 ],
"visible": false,
"searchable": false
}
],
columnDefs: [ { "orderable": false, "targets": [0,1,2,3,4] } ],
language: { "url": "//cdn.datatables.net/plug-ins/1.13.4/i18n/French.json" },
ajax:{
url :"cote_serveur.php", // json lecture de la table Mysql cote serveur
type: "post", // par default get
error: function(){ // gestion des erreurs
$(".news-grid-error").html("");
$("#news").append('<tbody class="news-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#news-grid_processing").css("display","none");
}
},
dom: "frtiS",
scrollY: 780, // Défilement vertical
deferRender: true, // Rendu différé
scroller: { // active l'extension scroller
loadingIndicator: true // Montre l'indicateur de chargement
}
});
setTimeout(function() { $("#news-grid_filter").hide(); },80);
$('.search-input-text').tagsInput({ // initialisation du plugin tags input
'height':'100%',
'width':'100%',
'interactive':true,
'defaultText':'Add critére',
'hide':true,
'delimiter':',',
'unique':true,
'onAddTag':tagDraw,
'onRemoveTag':tagDraw,
'removeWithBackspace' : true,
'minChars' : 0,
'maxChars' : 0, //if not provided there is no limit,
'placeholderColor' : '#AAA'
});
function tagDraw(){ //draw a request on add or remove tag
var v= $(".search-input-text").val();
dataTable.search(v).draw();
}
$('.search-input-select').on( 'change', function () { // for select box
var i =$(this).attr('data-column');
var v =$(this).val();
dataTable.columns(i).search(v).draw();
} );
});
</script>
HTML
<div class='header'>RECHERCHER DANS L'ENSEMBLE DU SITE</div>
<div class="container">
<table id="news-grid" cellpadding="0" cellspacing="0" border="0" class="display cell-border" width="100%">
<thead>
<tr>
<th style="width:920px;">Titre des news</th>
<th>Nb Visite</th>
<th>Afficher</th>
<th>Rubrique</th>
<th>Date</th>
</tr>
</thead>
<thead>
<tr>
<td colspan="1">
Recherche dans les titres - (Entrer un critére puis appuyé sur <b>Entrée</b>, le nombre de critére est illimité.)
<input type="text" data-column="0" class="search-input-text"></td>
<td></td><td></td>
<td>
<select data-column="3" class="search-input-select">
<?php
include('select_rub.php'); //select les rubriques du site
?>
</select>
</td><td></td>
</tr>
</thead>
</table>
</div>
Traitement coté serveur cote_serveur.php
include('base.php');
$conn = mysqli_connect($host,$login_host,$pass_host,$hostname);
mysqli_set_charset($conn, "utf8");
$requestData= $_REQUEST;
$columns = array(
0 => 'titre',
1 => 'cclic',
2 => 'afficher',
3 => 'type',
4 => 'date',
);
// obtenir le nombre total d'enregistrements sans aucune recherche
$sql = 'SELECT id, titre, type, date, cclic FROM news_ WHERE info!="Post\'it" AND construc!="n"';
$query=mysqli_query($conn, $sql) or die("Query erreur".$sql.'<br>'.mysqli_error());
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData;
// lorsqu'il n'y a pas de paramètre de recherche, alors nombre total de lignes = nombre total de lignes filtrées.
$sql = 'SELECT id, titre, type, date, cclic FROM news_ WHERE 1=1 AND info!="Post\'it" AND construc!="n"';
if( !empty($requestData['search']['value']) ) {
// si paramètre de recherche, $requestData['search']['value'] contient un paramètre de recherche
$searchString = "'%" . str_replace(",", "%", $requestData['search']['value']) . "%'";
$sql.=" AND ( titre LIKE ".$searchString." ) ";
}
if( !empty($requestData['columns'][3]['search']['value']) ){
// si paramètre de recherche, $requestData['search']['value'] contient un paramètre de recherche
$sql.=" AND type LIKE '".$requestData['columns'][3]['search']['value']."' ";
}
$query=mysqli_query($conn, $sql) or die("Query erreur".$sql.'<br>'.mysqli_error());
$totalFiltered = mysqli_num_rows($query);
// si paramètre de recherche, nous devons modifier le nombre total de lignes filtrées.
$sql.=" ORDER BY id DESC LIMIT ".$requestData['start']." ,".$requestData['length']." ";
$query=mysqli_query($conn, $sql) or die("Query erreur".$sql.'<br>'.mysqli_error());
$data = array();
while( $row=mysqli_fetch_array($query) ) { // préparer un tableau
$nestedData=array();
$nestedData[] = $row["titre"];
$nestedData[] = $row["cclic"];
$nestedData[] = '<a class="button1" href="genet-'.$row["id"].'-aff.php-'.$row["type"].'.html">voir</a>';
$nestedData[] = $row["type"];
$nestedData[] = $row["date"];
$data[] = $nestedData;
}
$json_data = array(
"draw" => intval( $requestData['draw'] ),
"recordsTotal" => intval( $totalData ), // nombre total d'enregistrements
"recordsFiltered" => intval( $totalFiltered ), // nombre total d'enregistrements après la recherche.
"data" => $data // tableau de données total
);
echo json_encode($json_data); // envoyer des données au format json
Le site du plugin datatables accéder
