Datatables快速入門開發--一款好用的JQuery表格插件

時間 2019-11-06

標籤 datatables 快速入門開發一款好用 jquery 表格插件欄目 JQuery 简体版

原文原文鏈接

　　博主是一個java後端程序員,前端技術會用但不精通,作後臺的一些功能常常要涉及表格的展現,分頁,搜索,排序等等一系列功能,在經歷了一段時間的原始手段,開始接觸並使用Datatables,一個jquery表格插件,上手很快,重點是超級好用,有完善的中文文檔,今天有空,整理一下Datatable的一些使用方法及注意事項,以便隨時查閱.css

DataTables支持的功能:

　　1.分頁,只須要返回符合規範的數據類型,Datatable能幫咱們實現好用的分頁,同時支持排序,和即時搜索.html

　　2.豐富的數據源的支持前端

　　3,支持國際化,支持多種主題.java

快速使用

　　1.使用Datatables很是簡單,只須要引入一個css樣式文件和一個js腳本文件,便可,官網提供了文件的cdn地址可直接引用.jquery

　　CSS: //cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css程序員

　　JS: //cdn.datatables.net/1.10.15/js/jquery.dataTables.min.jsajax

　　2.js中,使用一下簡單的幾行代碼,就能初始化datatables風格的表格樣式,並使用Datatable提供的豐富功能.json

1 $(document).ready(function(){
2         $('#myTable').DataTable();
3     });

　　html頁面中的table標籤訂義一個id,好比id="myTable".後端

豐富配置項

　　以上就能夠實現基本風格的datatables樣式,datatables默認狀況下已啓用一些功能,好比搜索,排序,分頁,要想更加自由的控制樣式,咱們須要更詳細的配置.服務器

DOM定位

　　dom定位能夠實現你自由的佈局分頁,搜索框等等這些組件,如下是一些組件以及字符縮寫.

l - Length changing 每頁顯示多少條數據選項
f - Filtering input 搜索框
t - The Table 表格
i - Information 表格信息
p - Pagination 分頁按鈕
r - pRocessing 加載等待顯示信息

　　若是咱們使用下面的代碼來控制樣式,表示 i顯示在top(頂部),flp顯示在bottom(底部).這樣就能夠自定義組件位置了.

$('#example').dataTable( {
        "dom": '<"top"i>rt<"bottom"flp><"clear">'
    } );

國際化配置

　　datatables使用的語言選項能夠經過language來配置,語言配置做爲初始化配置的一部分,能夠經過一下配置來自定義頁面各個地方的顯示文本.　　

$('#example').DataTable({
    language: {
        "sProcessing": "處理中...",
        "sLengthMenu": "顯示 _MENU_ 項結果",
        "sZeroRecords": "沒有匹配結果",
        "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
        "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
        "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中數據爲空",
        "sLoadingRecords": "載入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首頁",
            "sPrevious": "上頁",
            "sNext": "下頁",
            "sLast": "末頁"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }
});

限制水平寬度/垂直高度

　　若是須要在一個定寬或者定高的table裏展現數據,爲了可以展現全部的數據,就要限制寬度,或高度,使用垂直或水平滾動條,在Datatable中使用以下配置:

$(document).ready(function() {
  $('#example').dataTable( {
    //開啓水平滾動條
    "scrollX": true
    //設置固定高度爲200px 數據量溢出時出現滾動條
    "scrollY": "200px",
    "scrollCollapse": "true",
     //不啓用分頁(展現全部)
     "paging": "false"
  } );
} );

其餘配置功能:

$(document).ready(function() {
  $('#example').dataTable( {
    //禁用分頁
    "paging":   false,
    //禁用排序
    "ordering": false,
    //禁用本地搜索
    "searching":false,
    //開啓選擇每頁顯示多少記錄的下拉框 若是pageing配置爲false,此配置會自動置爲false
     "lengthChange":true,
     //是否顯示正在處理的狀態。開啓後在數據加載過程當中,會有正在加載狀態
     "processing": "true"
    //是否顯示正在處理的狀態。開啓後在數據加載過程當中,會有正在加載狀態,在處理耗時數據時比較有用
     "processing": "true"
     //開啓延遲渲染,假設加載1000條數到表格.每頁顯示10條,開啓後datatables只會建立10個節點,即根據分頁的生命週期來建立行
     "deferRender": true
      //禁用自動列寬的計算,若是以自定義列寬,建議禁用,由於此操做會耗費一些額外時間計算列寬
      "autoWidth": false,
      //禁用狀態保存 開啓後再次加載頁面表格狀態會被設成以前的狀態
      "stateSave" : false,
  } );
} );

數據源

　　這裏主要講解ajax獲取對象數據

$(document).ready(function() {
    $('#example').DataTable( {
//ajax能夠接收string,object,fucntion 
        "ajax": {
                //type url 不需多說
                "type": "POST",
                "url":$('#game_detail_data').attr("data-url"),
                //從服務器得到json數據,使用dataSrc屬性把data改成aodata
                "dataSrc": "aoData",
               //請求參數,添加額外的參數發送到服務器 接受一個fucntion
                "data":function(d){
                    d.pageType='DETAIL';
                    d.channelName=$("#channelname").val().trim();
                    d.tag=$("#tag").val();
                    d.startTime=$("#startTime").val();
                    d.endTime=$("#endTime").val();
                }
            },
       //返回數據是對象列表的時候須要使用以下方式與列名一一對應好
        "columns": [
            { "data": "name" },
            { "data": "age" },
            { "data": "sex",
       //渲染數據顯示在表格中,render可讓你在table顯示很是多樣化的格式
　　　　　　　　"render" : function(data, type, full, meta) {
    　　　　　　　　　　if(data=='boy'){
      　　　　　　　　　　  data ="男";
  　　　　　　　　　　  }else{
      　　　　　　　　　　  data ="女";
   　　　　              }
                   return  data;
}},
 },
            { "data": "phone" },
            { "data": "address" },
            { "data": "salary" }
        ]
    } );
} );

回調函數

　　datatable支持在數據初始化的各個時機進行一些自定義操做,下面說兩個比較經常使用的:

$('#example').dataTable( {
//數據初始化表格繪製成功後調用此函數
  "initComplete": function() {
    alert( '初始化之後調用' );
  }
//每次表格重繪的時候都調用這個函數
"drawCallback": function( settings ) {
        alert( '每次表格重繪時調用' );
    }
} );