datatable使用介紹

時間 2019-11-21

標籤 datatable 使用介紹简体版

原文原文鏈接

Datatables是一款jquery表格插件。它是一個高度靈活的工具，能夠將任何HTML表格添加高級的交互功能。php

一、支持分頁：前臺分頁和後臺分頁css

前臺分頁：後臺一次把數據傳過來，交給前端渲染。缺點：初次渲染時間長；優勢：渲染完成後，搜索和排序速度很快html

後臺分頁：前端把每頁顯示的條數、查詢的頁數、搜索的內容、排序列等信息傳給後端，後端收到這些信息後，去數據庫裏查詢指定頁的信息，並統計出總共條數等信息，然後傳給前端。缺點：每次排序、搜索、翻頁都要去後臺查庫，耗時；優勢：初次渲染快前端

共同點：隨着數據量的增大，兩者的查詢時間都會變成。可是前臺分頁，須要網絡傳輸大量的後臺信息到前臺，網絡傳輸時間長，前端渲染壓力大；後臺分頁每次只傳輸固定量的數據，網絡耗時少，可是查庫次數多。總得來看，對於數據量遞增的狀況，仍是選用後臺分頁python

二、其餘功能見官網：舉例、手冊、插件、接口、論壇、博客等，包羅萬象。看着樣例，比葫蘆畫瓢總會的jquery

中文官網：http://datatables.club/example/ 裏面有大量的信息git

英文官網：https://datatables.net/examples/server_side/post.htmlgithub

三、1.10+版本先後，有些參數名字有調整，可是具備向下兼容性ajax

四、後臺分頁的例子：https://datatables.net/examples/server_side/sql

JS代碼

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,      //翻頁或者搜索的時候，前端是否給出「正在搜索」等提示信息
        "serverSide": true,     // true表示使用後臺分頁
        "ajax": {
            "url": "scripts/post.php",  // 異步傳輸的後端接口url
            "type": "POST"      // 請求方式
        },
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

html代碼：添加一個table標籤,表頭和表尾信息，必須有表頭信息<thead>; <tbody></tbody> 能夠不用，dataTables.js能夠動態加載

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

ajax調用後端接口，後端接口返回信息的格式

{
  "draw": 1,       //這個本身不要寫，本身寫會有問題，系統會默認附帶這個參數，而起每次請求，值會自動加一；官方解釋這個參數的目的是基於安全角度
  "recordsTotal": 57,  //總條數、總行數
  "recordsFiltered": 57,  //過濾出來的總行數、條數
//下面是前端展現的數據內容
  "data": [
    {
      "first_name": "Airi",
      "last_name": "Satou",
      "position": "Accountant",
      "office": "Tokyo",
      "start_date": "28th Nov 08",
      "salary": "$162,700"
    },
    {
      "first_name": "Angelica",
      "last_name": "Ramos",
      "position": "Chief Executive Officer (CEO)",
      "office": "London",
      "start_date": "9th Oct 09",
      "salary": "$1,200,000"
    }]
}

下面是數據表的初始化設置：控制前端界面展現狀況

$(function () {
    $('#test-interface-table').dataTable(
      {
          "ajax": {
              "url": "/a/b",
              "type": "POST"
          },
          "processing": true,
          "serverSide": true,
          "bPaginate" : true,//分頁工具條顯示
          "bFilter" : true, //搜索欄
          "bSort" : false, //是否支持排序功能
          "order": [[3, "desc"]],//默認使用第幾列排序
//中文化界面顯示
          "language": {
              "lengthMenu": "每頁顯示 _MENU_條數據",
              "sSearch": "搜索: ",   //搜索框label
              "sSearchPlaceholder":"區域、項目名稱、場景名字、執行人", //搜索框裏的提示信息placeholder
              {#info: "當前是_PAGE_頁，總共_PAGES_ 頁，顯示第_START_ 到第 _END_ ，篩選以後獲得 _TOTAL_ 條，初始_MAX_ 條 ",//左下角的信息顯示，大寫的詞爲關鍵字。#}
              "info": "第_PAGE_/_PAGES_頁, 顯示第_START_到第_END_, 搜索到_TOTAL_/_MAX_條",
              "infoFiltered":"", //過濾時的顯示信息
              "sProcessing": "正在加載數據，請稍等",  //翻頁、搜索時的前端提示信息
              "zeroRecords": "抱歉，沒有數據",  //無數據時的前端信息

              paginate: {//分頁的樣式內容。
                        previous: "上一頁",
                        next: "下一頁",
                        first: "第一頁",
                        last: "最後"
                    }
          }

      }
      );
});

五、dataTable還能夠解釋bootstrap定製css樣式

六、option ajax data 根據參數查詢表格數據

dataTables自己是能夠把一些參數從前端傳給後端的，初次以外，你能夠增長從前端傳給後端的參數

七、修改搜索框的觸發事件：默認是隻要鍵盤彈起(keyup)，就會開始搜索，好比你想搜索‘ab’，當你鍵盤輸入完a再輸入b時，會先搜索a，而後搜索ab。要麼就把ab粘貼進去，就只會搜索ab，不會搜索a了。

可是咱們能夠根據下面文章的信息修改搜索觸發事件爲：回車

http://blog.csdn.net/u012088516/article/details/52423248

八、最後附一個前端搜索的後端執行的python代碼：https://www.cnblogs.com/rgcLOVEyaya/articles/RGC_LOVE_YAYA_350days.html

使用sqlalchemy進行多表聯合查詢，對於搜索內容search_content進行數據庫搜索，並對結果根據時間排序，而後根據頁碼和頁面大小篩選

from sqlalchemy import desc, or_


search_result = s.query(Table1, Table2, Table3, Table4) \
                .filter(Table1.delete == False) \
                .filter(Table1.exec_Table4_id == Table4.Table4_id) \
                .filter(Table1.scene_id == Table3.id) \
                .filter(Table1.scene_id == OnlinePerfRelation.scene_id) \
                .filter(Table2.project_id == OnlinePerfRelation.project_id) \
                .filter(or_(Table1.scene_zone.like('%'+search_content+'%'),
                            Table2.project_name.like('%' + search_content + '%'),
                            Table3.scene_name.like('%' + search_content + '%'),
                            # Table1.create_time.like('%'+search_content+'%'),
                            Table4.realname.like('%'+search_content+'%'))).order_by(desc(Table1.create_time)).limit(page_size).offset(page_start).all()