datatable使用介紹

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

1、支持分頁：前台分頁和后台分頁

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

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

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

2、其他功能見官網：舉例、手冊、插件、接口、論壇、博客等，一應俱全。看着樣例，比葫蘆畫瓢總會的

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

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

3、1.10+版本前后，有些參數名字有調整，但是具有向下兼容性

4、后台分頁的例子：https://datatables.net/examples/server_side/

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: "最后"
                    }
          }

      }
      );
});

5、dataTable還可以解釋bootstrap定制css樣式

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

dataTables本身是可以把一些參數從前端傳給后端的，初次之外，你可以增加從前端傳給后端的參數

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

但是我們可以根據下面文章的信息修改搜索觸發事件為：回車

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

8、最后附一個前端搜索的后端執行的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()

 

參考：

1、http://blog.csdn.net/huaishuming/article/details/52211259

2、http://blog.csdn.net/shya_/article/details/55510480

3、http://blog.csdn.net/tomcat_2014/article/details/50177645

4、http://blog.csdn.net/KokJuis/article/details/53925783

5、https://github.com/ssy341/datatables-cn

6、http://blog.163.com/huajin_226/blog/static/1773512302014812256921/

7、http://www.datatables.club/manual/daily/2016/04/21/option-ajax-data.html