Que sont les tables de données jQuery ? Comment utiliser les tables de données ?

Introduction aux Datatables

DataTables est un plug-in de table jQuery. Il s'agit d'un outil très flexible basé sur des améliorations progressives qui ajouteront des contrôles interactifs avancés et la prise en charge de n'importe quel formulaire HTML. Principales fonctionnalités :

• Traitement automatique de la pagination

• Filtrage des données de table en temps réel

• Tri des données et détection automatique des types de données

• Gérer automatiquement les largeurs de colonnes

• Le style peut être personnalisé via CSS

• Prise en charge des colonnes masquées

• Facilité d'utilisation

• Évolutivité et flexibilité

• International

• Création dynamique de tableaux

• Gratuit

2. Comment utiliser
Lors de l'exécution du backend, il n'y a pas d'artistes ou d'ingénieurs front-end pour coopérer avec vous pour créer la page afin d'afficher la page. données et avoir un certain sens de la beauté, nous pouvons utiliser le plug-in jQuery DataTables pour nous aider à accomplir la tâche
1 La configuration par défaut de DataTables

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

2. Quelques configurations d'attributs de base des DataTables

 "bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度

3. Tri des données

$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc" ] 
] 
} ); 
} );

À partir de la colonne 0, trier dans l'ordre inverse avec la colonne 4

4 , Masquer certaines colonnes

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumnDefs": [ 
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, 
{ "bVisible": false, "aTargets": [ 3 ] } 
] } ); 
} );

5. Internationalisation

$(document).ready(function() { 
$('#example').dataTable( { 
"oLanguage": { 
"sLengthMenu": "每页显示 _MENU_ 条记录", 
"sZeroRecords": "抱歉， 没有找到", 
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", 
"sInfoEmpty": "没有数据", 
"sInfoFiltered": "(从 _MAX_ 条数据中检索)", 
"oPaginate": { 
"sFirst": "首页", 
"sPrevious": "前一页", 
"sNext": "后一页", 
"sLast": "尾页" 
}, 
"sZeroRecords": "没有检索到数据", 
"sProcessing": "<img src=&#39;./loading.gif&#39; />" 
} 
} ); 
} );

6. Fonction de tri :

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} );

7. 4 types : comme suit

• •Données du document DOM
  

• • Tableau Javascript tableau js
  

• •Source Ajax Données de requête Ajax
  

• •Traitement côté serveur Données côté serveur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!