[jQuery] DataTables 套件範例及入門 - 後端開發必備功能


DataTables 表格插件(jQuery)


DataTables是jQuery Javascript庫的插件。是一個非常靈活的工具,基於漸進增強的基礎,並可以添加高級交互控件到任何HTML表格中。

以下範例已經由本站測試可以達成 AJAX輸出、分頁換頁,以及自建一個篩選表單等功能,
其中 server_processing.php 以陣列方式模擬資料庫輸出資料,讀者可自行替換資料來源。
 

引入函式庫

使用DataTables很簡單,只需要引入兩個文件,一個 css 樣式文件和 DataTables 本身的腳本文件。在DataTables CDN上,可以使用下面這些文件:

<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">

<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script><!-- jQuery庫 -->
<script type="text/javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
 

最簡易的使用 DataTables 

怎樣簡單地使用DataTables?使用下方簡單的幾行代碼,一個方法初始化 table。

$(document).ready(function(){
  $('#webgoldsTable').DataTable();
});
 

初始化表


<script>

var dlang = {
    "sProcessing": "Loading...",
    "sLengthMenu": "每頁顯示 _MENU_ 筆",
    "sZeroRecords": "沒有符合結果",
    "sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 筆",
    "sInfoEmpty": "無任何資料",
    "sInfoFiltered": "(過濾總筆數 _MAX_)",
    "sInfoPostFix": "",
    "sSearch": "搜索:",
    "sUrl": "",
    "sEmptyTable": "無任何資料",
    "sLoadingRecords": "Loading...",
    "sInfoThousands": ",",
    "oPaginate": {
        "sFirst": "首頁",
        "sPrevious": "上頁",
        "sNext": "下頁",
        "sLast": "末頁",
        "sJump": "跳頁"
    },
    "oAria": {
        "sSortAscending": ": 以升序排列此列",
        "sSortDescending": ": 以降序排列此列"
    }
};

$(document).ready(function() {
    $('#example').DataTable( {
        "language":dlang,  //提示信息
        
        "processing": true,
        "serverSide": true,
        'responsive':  {
         details: true
        },//RWD響應式
        //"bSort": false,//是否有排序
        "pagingType": "full_numbers",  //分页样式: simple,simple_numbers,full,full_numbers
        "searching": false,  //禁用原生搜索
        //"orderMulti": true,  //啟用多列排序
          'colReorder': false, //列可拖移
        "deferRender": true,//延遲渲染數據,提高處理能力。用於大數據時。
        "ajax": {
            "url": "server_processing.php",
            "type": "POST",
            "data": function ( d ) {
              var dataArray = $("#formFilter :input[value!='']").serializeArray(),
                  dataObj = {};
              $(dataArray).each(function(i, field){
                dataObj[field.name] = field.value;
              });
              return $.extend({}, d, dataObj)
            }
        },
        //"destroy" : true,
        "bFilter" : false,               
        "bLengthChange": false
        //"pageLength": 20
        
    } );

    $('#reload_table').on('click', function(){
      $('#example').DataTable().ajax.reload();
    });

});
</script>
 

HTML表格及搜尋篩選欄位

讓DataTable 可以透過 AJAX 傳遞篩選框欄位值給後台。
<form id="formFilter" action="form_action.asp" method="get">
  First name: <input type="text" name="fname" /> Last name: <input type="text" name="lname" />
  <input type="button" id="reload_table" value="篩選" />
</form>

<table id="example" class="display" cellspacing="0" 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>

</p>

\server_processing.php
以陣列方式模擬資料庫輸出資料,讀者可自行替換資料來源。
<?php
//webgolds 提供 PHP 陣列輸出 JSON格式參考範例
$draw = isset ( $_REQUEST['draw'] ) ?
intval( $_REQUEST['draw'] ) :
0;
$start = isset($_REQUEST['start'] ) ? $_REQUEST['start']  : 0;
$length = isset($_REQUEST['length'] ) ?  $_REQUEST['length'] : 10;
$dataArr = array(
    array("web1", "test1" , "Software1", "webgolds", "4th Jan 10", "$1"),
    array("web2", "test2" , "Software2", "webgolds", "4th Jan 10", "$2"),
    array("web3", "test3" , "Software3", "webgolds", "4th Jan 10", "$3"),
    array("web4", "test4" , "Software4", "webgolds", "4th Jan 10", "$4"),
    array("web5", "test5" , "Software5", "webgolds", "4th Jan 10", "$5"),
    array("web6", "test6" , "Software6", "webgolds", "4th Jan 10", "$6"),
    array("web7", "test7" , "Software7", "webgolds", "4th Jan 10", "$7"),
    array("web8", "test8" , "Software8", "webgolds", "4th Jan 10", "$8"),
    array("web9", "test9" , "Software9", "webgolds", "4th Jan 10", "$9"),
    array("web10", "test10" , "Software10", "webgolds", "4th Jan 10", "$10"),
    array("web11", "test11" , "Software11", "webgolds", "4th Jan 10", "$11"),
    array("web12", "test12" , "Software12", "webgolds", "4th Jan 10", "$12"),
    array("web13", "test13" , "Software13", "webgolds", "4th Jan 10", "$13"),
    array("web14", "test14" , "Software14", "webgolds", "4th Jan 10", "$14"),
    array("web15", "test15" , "Software15", "webgolds", "4th Jan 10", "$15"),
    array("web16", "test16" , "Software16", "webgolds", "4th Jan 10", "$16"),
    array("web17", "test17" , "Software17", "webgolds", "4th Jan 10", "$17"),
    array("web18", "test18" , "Software18", "webgolds", "4th Jan 10", "$18"),
    array("web19", "test19" , "Software19", "webgolds", "4th Jan 10", "$19"),
    array("web20", "test20" , "Software20", "webgolds", "4th Jan 10", "$20"),
    array("web21", "test21" , "Software21", "webgolds", "4th Jan 10", "$21"),
    array("web22", "test22" , "Software22", "webgolds", "4th Jan 10", "$22"),
    array("web23", "test23" , "Software23", "webgolds", "4th Jan 10", "$23"),
    array("web24", "test24" , "Software24", "webgolds", "4th Jan 10", "$24"),
    array("web25", "test25" , "Software25", "webgolds", "4th Jan 10", "$25"),
);
echo json_encode(
    array(
        'draw' => $draw,
        'recordsTotal' => count($dataArr),
        'recordsFiltered' => count($dataArr),
        'data' => array_slice($dataArr, $start, $length)
    )
);


照著以上實作就可以透過 DataTable 展示從後台讀取 25筆資料,並且達到 3 頁面切換功能。

注意事項

輸出的 draw 欄位必須是數字型別。

 

補充功能

如何讓狀態有保存功能(bStateSave)

啟用或禁用狀態保存。當頁面刷新之後,顯示上一次表的狀態。啟用時,將使用Cookie來保存表格顯示信息,如分頁信息,顯示長度,過濾和排序。因此,當最終用戶重新加載頁面時,將與之前設置的內容相匹配。
$(document).ready( function () {
  $('#example').dataTable( {
    "bStateSave": true //啟用或禁用狀態保存
  } );
} );
 

特別處理某一列

Row created callback
createRow方法,在每一行生成後調用一次回調函數,
有了這個方法使得可以額外添加一些東西,比如數字超過 100 時用紅色高亮顯示,
column.createCell也可以達到類似的功能。
 
<style>
.red{
  color:red;
}
</style>
<script>
$(document).ready(function() {
  $('#example').DataTable( {
    "createdRow": function ( row, data, index ) {
      // 如果數字超過 100 補 .red 樣式
      if ( data[5].replace(/[\$,]/g, '') * 1 > 100 ) {
          $('td', row).eq(5).addClass('red');
      }
    }
  });
});
</script>
 

在表格下方列重複上方標題列


<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>edit</th>
         <th>del</th>
      </tr>
   </thead>
   <!--tfoot--><!-- 在thead 之後補 tfoot 標籤 -->
   <!--/tfoot-->
</table>

<script>
$(document).ready(function (){
  $( "#example thead" ).after( "<tfoot></tfoot>"); //在 thead 之後補 tfoot 標籤
  $("#example thead tr" ).clone().appendTo( "tfoot" );
});



 

參考資料

www.gyrocode.com/articles/jquery-datatables-custom-control-does-not-work-on-second-page/?webgolds

keenthemes.com/preview/metronic/theme/admin_2/table_datatables_buttons.html?webgolds
demos.creative-tim.com/paper-dashboard-pro/examples/tables/datatables.net.html?webgolds
demos.creative-tim.com/material-dashboard-pro/examples/tables/datatables.net.html#
eantheme.com/color-admin-v3.0/admin/apple/table_manage_combine.html

 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 2220
Last updated :2017-11-15