DataTables est un plug-in de table jQuery. Cet article explique avec vous comment utiliser le plug-in de table datatables et présente quelques connaissances de base. Le contenu spécifique est le suivant
.1. Initialisation
Dans la page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
Initialisation en js
1 2 3 |
|
2. Configurations communes
Lors de l'initialisation, vous pouvez configurer la table via certains éléments de configuration couramment utilisés. C'est ce que j'ai réellement utilisé dans le projet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
|
Les données renvoyées par l'arrière-plan doivent être une carte, la clé est "data" et la valeur est les données (si les données sont une liste, toArray() est requis), où data est également l'un des paramètres de DataTables, indiquant les données à afficher dans le tableau, vous pouvez donc mettre d'autres paramètres de table dans cette carte, définissez simplement la clé sur le nom du paramètre.
* : Dans la configuration, serverSide active le mode serveur Pendant le travail, les données de la table sont obtenues en arrière-plan via ajax, ce mode est donc activé. bien sûr, mais le tableau est certain. La fonction de tri par une colonne a été désactivée, puis j'ai désactivé ce mode et j'ai découvert que je pouvais trier les colonnes du tableau, et les données du tableau étaient toujours obtenues depuis le serveur... Ce mode reste donc à étudier
** : Dans le projet, les paramètres reçus par le contrôleur d'arrière-plan sont des tableaux. Lorsque la requête ajax contient des paramètres complexes, le type de requête doit être post ;
3. Fonctions avancées
1. Colonnes masquées
Vous pouvez spécifier si la colonne est affichée via l'attribut "columns.visible", mais de cette façon, vous ne pouvez pas obtenir la valeur de cette colonne. Si vous souhaitez masquer la colonne id et déclencher un événement basé sur l'identifiant, vous ne pouvez pas. do it = =. Plus tard, après avoir vérifié l'API, j'ai eu une idée stupide. La solution est d'utiliser l'attribut columns.render. L'utilisation est la suivante :
.
1 2 3 4 5 |
|
2. Entrez le numéro de page pour accéder à la page
Nous pouvons définir le style du bouton de pagination du tableau via l'attribut pagingType, mais plusieurs styles par défaut de DataTables n'ont pas le style pour saisir le numéro de page à sauter requis dans le projet. Cependant, plusieurs plug-ins de bouton de pagination sont présentés sur la page du plug-in du site officiel, parmi lesquels le plug-in de pagination d'entrée peut répondre à nos besoins. Il suffit d'introduire le js du plug-in et de modifier la valeur de pagingType. à "saisir". Le CDN des fichiers js est :
//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.