Partage de technologie de développement de pagination DataTables du plug-in jQuery

Cet article partage principalement avec vous l'expérience du développement de la pagination DataTables du plug-in jQuery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Objectif d'écrire un blog : pas pour la popularité, juste pour garder des notes ; peu importe si c'est long, j'ai peur de rater quelque chose et de ne pas pouvoir m'en souvenir plus tard.

Environnement de développement : Python 3.6.0, Anaconda 4.3.1, Django, JetBrains PyCharm 2017.1.5

Simplement organisé selon le processus de développement de mon projet.

1. La première version, pas de pagination.

J'ai déjà utilisé DataTables (plus de Datagrid dans easyui, et le serveur précédent était PHP), donc j'ai pensé qu'il n'y avait pas beaucoup de différence entre le front-end/client et le serveur est le même de toute façon. Renvoie une chaîne JSON selon le format standard (le code de Django sera trié plus tard). De plus, je n'ai pas pensé à la pagination des tableaux au début, j'avais juste trois exigences de tri des champs (le tri a été fait et renvoyé côté serveur).
Code de base de DataTables :

//表格的HTML代码略过
$('#dtList').DataTable({
        "bPaginate": false, //翻页功能
        "bInfo": false,//页脚信息
        "ordering": false, //不排序
        "searching": false,  //搜索框，不显示
        "bLengthChange": false, //改变每页显示数据数量，不显示
        "iDisplayLength": 10,  //每页默认显示数量（不显示了，这个设置也起不了作用）
        "serverSide":true, //服务端
        "retrieve":false, //意思是如果已经初始化了，则继续使用之前的Datatables实例。

        "ajax": {
          "type": "POST",
          "url": "/manage/getlist/",
          "data":{'csrfmiddlewaretoken': '{{ csrf_token }}'}, //Django的token值
          "dataSrc": function (result) { //使用dataSrc属性来设置获取到的数据格式，其值是服务端拼好的key-value（数据字段名称-字段值）【服务端走了弯路，后续有时间再写文章说明】
            var json = JSON.parse(result).data;
            return json;
          }
        },
        "columns": [ //表格要显示的列定义(字段名称做了处理)
          { "data": "field0",
            "visible":false,
            "render": function ( data, type, full, meta ) {
              //return &#39;<input type="checkbox"/>&#39;;
              return data;
            }
          },
          { "data": "field1" },
          { "data": "field2" , //此列名要与服务端返回的JSON串中的值一致
            "render": function ( data, type, full, meta ) {
              return &#39;<p style="text-align:left">&#39;+data+&#39;</p>&#39;;
            }
          },
          //其余字段定义省略
          ]
        });

2. Ajouter la fonction de pagination

Après avoir écrit le premier programme pendant quelques jours, j'ai était prêt à l'ajouter à la fonction de pagination.
Exigences de format de chaîne JSON pour les DataTables :

{
  "draw": n, 
  "recordsTotal": n, //总记录数
  "recordsFiltered": n, //条件过滤后的记录数，与总记录数可能会不同
  "data": [{}] //获取到的记录集合
}

Selon l'expérience précédente dans le traitement du composant Datagrid dans easyui, le nombre total d'enregistrements, le nombre de les enregistrements filtrés, etc. sont obtenus, il suffit de rassembler la chaîne JSON et de la renvoyer, et le client peut directement implémenter la pagination.

Toutefois, la question se pose : Comment contrôler la valeur du tirage ?

Après avoir vérifié les informations et suivi l'en-tête du navigateur, j'ai découvert que draw est une valeur d'attribut de DataTables lui-même. Chaque fois que les données sont obtenues, elles seront transmises au serveur. pour modifier cette valeur, il suffit de la renvoyer directement dans une chaîne JSON. Je l'ai essayé, mais je ne sais pas quel est le problème. Il semble que la pagination ne fonctionne pas, et j'ai toujours l'impression que cette méthode de contrôle est un peu fatigante.

Changeons d'idée et vérifions à nouveau les informations, c'est-à-dire la pagination côté serveur (demandant les données correspondantes à la demande), il y a vraiment : django-datatables-view (datatables pour django, https : //pypi.python.org/pypi/django-datatables-view), suivez simplement les étapes d'installation. De cette façon, vous n'avez pas à vous soucier de la façon d'épeler les valeurs de la chaîne JSON. Ce composant sera prêt.

Code frontal amélioré :

$('#dtList').DataTable({
    "bPaginate": true, //翻页功能
    "bInfo": true,//页脚信息
    "ordering":true, //开启排序
    "searching": false, //搜索框，不显示
    "bLengthChange": true, //改变每页显示数据数量，不显示
    "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], //每页显示记录菜单选项
    "iDisplayLength": 10, //每页默认显示数量
    "serverSide":true, //开启服务端请求模式
    'pagingType': 'full_numbers',
    "retrieve":true,

    "ajax": { //这边就不需要dataSrc属性来处理值了
     "type": "GET",
     "url": "{% url 'scheme_list_json' %}",
     "data":{
      'sSearch':'',
      'csrfmiddlewaretoken': '{{ csrf_token }}'},
     },
    "columns": [ //表格要显示的列定义
     { "data": 0,
      "visible":false,
      "render": function ( data, type, full, meta ) {
       //return &#39;<input type="checkbox"/>&#39;;
       return data;
      }
     },
     { "data": 1
     "bSortable":false
     },
     { "data": 2,
      "bSortable":false, //此字段不排序
      "render": function ( data, type, full, meta ) {
       return &#39;<p style="text-align:left">&#39;+data+&#39;</p>&#39;;
      }
     },
     //其余字段定义省略
     ......
     ],
    "aaSorting": [ //指定排序的列（索引从0开始）及规则
     [ 8, "asc" ],
     [ 9, "asc" ],
     [ 10, "desc" ]
     ],
    "drawCallback": function( settings ) { //绘制表格时的回调函数
     $("th").removeClass("sorting_asc"); //删除排序图标，升序样式
     $("th").removeClass("sorting_desc");//降序样式 
   });

Le tri est réussi, mais un problème survient : une fois la fonction de tri activée , dans la ligne d'en-tête, il y aura une icône de tri, mais nous n'en avons pas besoin (juste un tri, pas de clic), alors ajoutez simplement la fonction de rappel drawCallback dans le code ci-dessus et supprimez son style.
PS :
Il y a un piège : le nombre de colonnes dans le champ de retour du serveur et le champ de tri doivent correspondre un à un, et les définitions des colonnes du champ d'affichage DataTables front-end doivent également être dans cet ordre, sinon le tri frontal sera foiré, tel que :

 # 需要显示的字段
 columns = ['jyjhbid', 'tzbd', 'clsc', 'clzt', 'jlscrq', 'jlxgrq', 'clcz'] 

 # 排序
 order_columns = ['jyjhbid', 'tzbd', 'clsc', 'clzt', 'jlscrq', 'jlxgrq', 'clcz']

Je suis nouveau sur Django-datatables-view et je pensais que les deux valeurs de collection ça peut être différent, donc. . . . J'ai parcouru plus de kilomètres.

Recommandations associées :

Que faire si les en-têtes jQuery Datatables ne sont pas alignés

Que faire si les en-têtes Datatables sont non aligné

Introduction aux attributs des tables de données du plug-in jquery et explication détaillée de la création d'exemples de pagination et de tri

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!