Utilisation de l'extension jQuery.datatables.js et des exemples d'API détaillés

1Configuration par défaut de DataTables

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

Exemple :http://www.guoxk.com/html/DataTables/Zero-configuration.html

2Configuration de base des propriétés de DataTables

"bPaginate": true, //Fonction de pagination
"bLengthChange": true, //Changer le nombre d'éléments affichés par page
"bFilter": true, //Fonction de filtrage
"bSort": false, //Fonction de tri
"bInfo": true,//Informations de pied de page
"bAutoWidth": true//Largeur automatique

Exemple :http://www.guoxk.com/html/DataTables/Fonctionnalité-enablement.html

3Tri des données

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

Débutant par la colonne 0, en utilisant la colonne4Tri décroissant des colonnes

Exemple :http://www.guoxk.com/html/DataTables/Tri-data.html

4Triage par plusieurs colonnes

Exemple :http://www.guoxk.com/html/DataTables/Multi-column-sorting.html

5Cacher certaines colonnes

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

Exemple :http://www.guoxk.com/html/DataTables/Caché-columns.html

6Modifier la position des éléments sur la page

$.document.ready(function() {
$('#example').dataTable({
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
});
});
//l- Nombre d'éléments par page
//f - Filtrage des entrées
//t - Formulaire Table
//i – 信息
//p – 翻页
//r – pRocessing
//< and > – div elements
//<"class" and > – div with a class
//Examples: <"wrapper"flipt>, <lf<tip>

Exemple :http://www.guoxk.com/html/DataTables/DOM-positioning.html

7、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。

$.document.ready(function() {
$('#example').dataTable({
"bStateSave": true
});
});

Exemple :http://www.guoxk.com/html/DataTables/State-saving.html

8、显示数字的翻页样式

$.document.ready(function() {
$('#example').dataTable({
"sPaginationType": "full_numbers"
});
});

Exemple :http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

9、水平限制宽度

$.document.ready(function() {
$('#example').dataTable({
"sScrollX": ""100%
"sScrollXInner": ""110%
"bScrollCollapse": true
});
});

Exemple :http://www.guoxk.com/html/DataTables/Horizontal.html

10、垂直限制高度

Exemple :http://www.guoxk.com/html/DataTables/Vertical.html

11、水平和垂直两个方向共同限制

Exemple :http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12、改变语言

$.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='#'" /loading.gif' /">
}
});
});

Exemple :http://www.guoxk.com/html/DataTables/Change-language-row

13、click事件

Exemple :http://www.guoxk.com/html/DataTables/event-click.html

14/配合使用tooltip插件

Exemple :http://www.guoxk.com/html/DataTables/tooltip.html

15、定义每页显示数据数量

$.document.ready(function() {
$('#example').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
});

Exemple :http://www.guoxk.com/html/DataTables/length_menu.html

16、row callback

Exemple :http://www.guoxk.com/html/DataTables/RowCallback.html

Le dernier élément de la colonne est en gras si sa valeur est "A"

17、Contrôle du tri

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

Exemple :http://www.guoxk.com/html/DataTables/sort.html

Explication : Le premier clic sur la première colonne trie par défaut, le deuxième clic trie en ordre, le troisième clic inverse, deux fois en ordre, les quatrièmes et cinquièmes clics ne trient pas

18、Lire les fichiers de langue à partir du fichier de configuration

$.document.ready(function() {
$('#example').dataTable({
"oLanguage": {
"sUrl": "cn.txt"
}
});
});

19、C'est une source AJAX

$.document.ready(function() {
$('#example').dataTable({
"bProcessing": true
"sAjaxSource": "."/arrays.txt'
});
});

Exemple :http://www.guoxk.com/html/DataTables/ajax.html

20、Utiliser AJAX pour organiser les données côté serveur

$.document.ready(function() {
$('#example').dataTable({
"bProcessing": true
"bServerSide": true
"sPaginationType": "full_numbers"
"sAjaxSource": "."/server_processing.php"
/*Si vous ajoutez ce segment ci-dessous, utilisez le mode de transmission POST
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json'
"type": "POST"
"url": sSource
"data": aoData
"success": fnCallback
});
}*/
"oLanguage": {
"sUrl": "cn.txt"
“
"aoColumns": [
{"sName": "platform"},
{"sName": "version"},
{"sName": "engine"},
{"sName": "browser"},
{"sName": "grade"}
]//$_GET['sColumns'] recevra les données transmises par aoColumns
});
});

Exemple :http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21de charger l'id et la classe pour chaque ligne

Le format des données retournées par le serveur :

}}
}8″: “
“DT_RowId”: “row_
“DT_RowClass”: “gradeA”,
1“0″: “Gecko”, 15″: “
2″: “Firefox 98+ / ″: “Win2+OSX.
3”,18″: “
4″,
“

Exemple :http://www.guoxk.com/html/DataTables/″: “A”

22}+add_id_class.html

Exemple :http://www.guoxk.com/html/DataTables/” pour afficher les détails en détail, cliquez sur le début de la ligne “-with-row

23information.html

Exemple :http://www.guoxk.com/html/DataTables/、Sélection multiple de lignes

22、Intégration de l'extension jQuery jEditable

Exemple :http://www.guoxk.com/html/DataTables/jEditable-integration.html

Plus de références :

Il est important de noter que le tableau objet à traiter par dataTable doit avoir thead et tbody, et la structure doit être régulière (les données n'ont pas besoin d'être complètes), afin de pouvoir traiter correctement.

Les paramètres supplémentaires que vous pouvez ajouter lors de la liaison à dataTable :

Voici l'utilisation de l'extension jQuery.datatables.js et les exemples d'API détaillés présentés par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, n'hésitez pas à laisser un message, je répondrai à temps. Je remercie également tous ceux qui soutiennent le site de tutoriels d'alarme !

Déclaration : Le contenu de cet article est issu du réseau, propriété de l'auteur original. Le contenu est自发贡献并由互联网用户自行上传，ce site ne détient pas de propriété, n'a pas été édité par l'homme, et n'assume pas de responsabilité juridique. Si vous trouvez du contenu présumé enfreignant les droits d'auteur, veuillez envoyer un email à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un email pour signaler une violation, fournissez des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé enfreignant les droits d'auteur.)