recherche

Maison >interface Web >js tutoriel >Résumé des tables de données du plug-in de table jQuery utilisation_jquery

Résumé des tables de données du plug-in de table jQuery utilisation_jquery

WBOY
WBOYoriginal
2016-05-16 15:07:351277parcourir

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 

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
  <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
 </head>
 <body>
  <table id="table_id" class="display">
 <thead>
  <tr>
   <th>Column 1</th>
   <th>Column 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Row 1 Data 1</td>
   <td>Row 1 Data 2</td>
  </tr>
  <tr>
   <td>Row 2 Data 1</td>
   <td>Row 2 Data 2</td>
  </tr>
 </tbody>
</table>
 </body>
</html>

Initialisation en js

$(document).ready( function () {
 $('#table_id').DataTable();
} );

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

. 
$("#vivo_table_list").dataTable({
   pageLength: 10,  //更改初始页面长度 （每页的行数）
   processing: true, //显示正在处理字符串
   serverSide: false, // 服务器模式，这一点非常奇怪*
   ordering: true,   // 是否启用Datatables排序
   searching: false,  // 开启搜索
   autoWidth: false,
   zeroRecords: "没有查询数据",
   destroy: true,   // 从当前上下文销毁掉Datatables对象 (妹搞懂)
   pagingType: "input", // 分页按钮种类显示选项
   language: {
    url: "cn.txt" // 本地化
   },
   dom: "tr<'row-fluid'<'span6'i><'span6'p>>", // 按什么顺序定义表的控制元素在页面上出现(妹搞懂)
   ajax: {
    url: "/url",
    type: "post", // ajax请求的类型 **
    data: function () {
     return that.getQueryParams(); // ajax的参数
    }
   },
   columns: [
    {title: "id", data: "id", orderable: true},
    {title: "uid", data: "uid", orderable: false},
    {title: "昵称", data: "nick", orderable: false},
    {title: "姓名", data: "name", orderable: false},
    {title: "电话", data: "tel", orderable: false},
    {title: "申请时间", data: "stimeshow", orderable: true},
    {title: "状态", data: "statshow", orderable: false},
    {
     title: "操作", orderable: false, render: function (data,type,full) {
     return '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' +
      ' <button id="forbidButton" class="forbid glyphicon glyphicon-thumbs-down"></button>'+
      '<input type="hidden" value="'+full.id+'"/>';
    }
    }
   ]
  });

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 :
. 

{
  title: "操作", orderable: false, render: function (data,type,full) {
  return '<input type="hidden" value="'+full.id+'"/>';
  }
}
Notez que la fonction après le rendu a trois paramètres, data/type/full, où le paramètre complet correspond à toutes les données de la ligne (le site officiel note ici : seules les données de la ligne, pas la valeur des données attribut, donc même si les données sont dans Il y a la valeur que vous voulez, mais vous ne pouvez pas l'obtenir si vous ne lui donnez pas de colonne). Vous pouvez directement utiliser la valeur que vous souhaitez masquer dans le rendu si vous le souhaitez. pour référencer cette valeur en dehors du tableau, vous pouvez assembler un < caché dans render. ;input>, il peut être obtenu en externe, mais cette méthode est vraiment stupide. Si vous avez une bonne méthode, dites-le-moi.

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.

Site officiel de DataTables

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Processus de mise en œuvre de l'effet carrousel Jquery Analysis_jqueryArticle suivant：Processus de mise en œuvre de l'effet carrousel Jquery Analysis_jquery

Articles Liés

Voir plus