jQuery-Plug-in DataTables-Paging-Entwicklungstechnologie-Sharing

Dieser Artikel teilt Ihnen hauptsächlich die Erfahrungen mit der Entwicklung des jQuery-Plug-Ins DataTables. Ich hoffe, dass er allen helfen kann.

Zweck des Schreibens eines Blogs: Nicht aus Gründen der Popularität, nur um Notizen zu machen; egal, ob es langatmig ist, ich habe Angst, dass ich etwas verpasse und mich nicht erinnern kann es später.

Entwicklungsumgebung: Python 3.6.0, Anaconda 4.3.1, Django, JetBrains PyCharm 2017.1.5

Einfach organisiert nach dem Entwicklungsprozess meines Projekts.

1. Die erste Version, keine Paginierung.

Ich habe DataTables schon einmal verwendet (mehr Datagrid in easyui und der vorherige Server war PHP), daher dachte ich, dass es keinen großen Unterschied zwischen dem Frontend/Client und dem Server gibt, der derselbe ist Geben Sie trotzdem einen JSON-String gemäß dem Standardformat zurück (Djangos Code wird später aussortiert). Außerdem habe ich am Anfang nicht über das Paging von Tabellen nachgedacht, da ich nur drei Feldsortierungsanforderungen hatte (die Sortierung wurde auf der Serverseite durchgeführt und zurückgegeben).
DataTables-Basiscode:

//表格的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. Paging-Funktion hinzufügen

Nachdem ich einige Tage lang das erste Programm geschrieben hatte, habe ich war bereit, die Paginierungsfunktion hinzuzufügen.
Anforderungen an das JSON-String-Format für DataTables:

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

Nach den bisherigen Erfahrungen bei der Verarbeitung der Datagrid-Komponente in easyui ist die Gesamtzahl der Datensätze die Anzahl der Um gefilterte Datensätze usw. zu erhalten, müssen Sie nur die JSON-Zeichenfolge zusammenstellen und zurücksenden, und der Client kann Paging direkt implementieren.

Es stellt sich jedoch die Frage: Wie lässt sich der Draw-Wert steuern?

Nachdem ich die Informationen überprüft und den Browser-Header verfolgt habe, habe ich festgestellt, dass es sich bei der Zeichnung um einen Attributwert von DataTables selbst handelt. Es besteht keine Notwendigkeit, diese Daten an den Server zu übertragen Um diesen Wert zu ändern, geben Sie ihn einfach direkt in einer JSON-Zeichenfolge zurück. Ich habe es versucht, aber ich weiß nicht, wo das Problem liegt. Es scheint, dass das Paging nicht funktioniert, und ich habe immer das Gefühl, dass diese Steuerungsmethode etwas ermüdend ist.

Lassen Sie uns die Idee ändern und die Informationen erneut überprüfen, nämlich serverseitiges Paging (Anfordern entsprechender Daten bei Bedarf). Es gibt wirklich: django-datatables-view (Datentabellen für Django, https:/). /pypi.python.org/ pypi/django-datatables-view), befolgen Sie einfach die Installationsschritte. Auf diese Weise müssen Sie sich keine Gedanken über die Schreibweise der JSON-String-Werte machen. Diese Komponente ist fertig.

Verbesserter Frontend-Code:

$('#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");//降序样式 
   });

Die Sortierung ist erfolgreich, es tritt jedoch ein Problem auf: Nachdem die Sortierfunktion aktiviert wurde , in der Kopfzeile Es wird ein Sortiersymbol geben, aber wir brauchen es nicht (nur Sortieren, kein Klicken), also fügen Sie einfach die Rückruffunktion drawCallback in den obigen Code ein und entfernen Sie ihren Stil.
PS:
Es gibt eine Gefahr: Die Anzahl der Spalten im Rückgabefeld des Servers und im Sortierfeld muss eins zu eins übereinstimmen, und die Spaltendefinitionen des Front-End-DataTables-Anzeigefelds müssen andernfalls ebenfalls in dieser Reihenfolge sein Die Front-End-Sortierung wird durcheinander gebracht, wie zum Beispiel:

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

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

Ich bin neu bei django-datatables-view und dachte, dass die beiden Sammlungswerte ​​​​​kann unterschiedlich sein, also. . . . Weitere Meilen gelaufen.

Verwandte Empfehlungen:

Was tun, wenn die Header von jQuery Datatables nicht ausgerichtet sind?

Was tun, wenn die Header von Datatables nicht ausgerichtet sind nicht ausgerichtet

Einführung in die Datentabellenattribute des JQuery-Plug-Ins und ausführliche Erläuterung zum Erstellen von Paging- und Sortierbeispielen

Das obige ist der detaillierte Inhalt vonjQuery-Plug-in DataTables-Paging-Entwicklungstechnologie-Sharing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!