本文摘要 ·對于10,000元以下的外包專案，通常CRUD業務占據50%以上，每個專案雖然業務不同，但是對資料庫中每個表的操作都是一定的，在做了n個專案之后，我覺得程式員不能無腦進行CRUD操作，這樣我賺錢的效率太低了（哈哈）！
·本文將介紹一個在jquery.dataTable框架上二開的組件，幫助大家無腦開發，
作者：CSDN 征途黯然.
??
一、組件介紹
??本dataTable組件是基于jquery.dataTable進行二開的，其官方網址是https://datatables.net/，
??組件的最終效果如下圖：
??本組件支持的功能如下：
????· 自定義表格樣式
????· 資料匯出、列印、復制
????· 隱藏列、顯示列
????· 選中（多）行資料
????· 搜索表格內容
????· 按表頭排序
????· 分頁【這個是服務器端分頁，即時請求】
二、組件使用說明
?? 獲取組件源代碼，您可以關注公眾號‘三黃作業室’回復‘dataTable’獲取，專案的目錄樹如下圖所示：
??其中，zh.json存放國際化資源，主要用來做中文顯示；images中的3張圖片，用作表頭排序時顯示降序、升序；API.php與connect.php來模擬后端介面；其他都是組件需要用到的資源檔案，
??下載好源代碼后，大家可以修改index.html里面的代碼來測驗不同的效果，最后移植到自己的專案中就可以了，
三、組件引數詳解
?? index.html檔案內容如下：
<html>
<title>組件一 | 資料表格</title>
<!-- dataTable基礎樣式 -->
<link rel="stylesheet" href="plugs/dataTable/datatables.min.css">
<!-- 左上方按鈕組樣式 -->
<link rel="stylesheet" href="plugs/dataTable/buttons.dataTables.min.css">
<!-- 選中行資料樣式 -->
<link rel="stylesheet" href="plugs/dataTable/select.dataTables.min.css">
<!-- jquery -->
<script src="plugs/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
<!-- dataTable.js -->
<script src="plugs/dataTable/jquery.dataTables.min.js" type="text/javascript"></script>
<!-- 按鈕組點擊事件、配置支持 -->
<script src="plugs/dataTable/dataTables.buttons.min.js" type="text/javascript"></script>
<!-- 匯出、復制、列印支持 -->
<script src="plugs/dataTable/jszip.min.js" type="text/javascript"></script>
<script src="plugs/dataTable/buttons.html5.min.js" type="text/javascript"></script>
<script src="plugs/dataTable/buttons.print.min.js" type="text/javascript"></script>
<!-- 隱藏列支持 -->
<script src="plugs/dataTable/buttons.colVis.min.js" type="text/javascript"></script>
<!-- 選中行資料支持 -->
<script src="plugs/dataTable/dataTables.select.min.js" type="text/javascript"></script>
<body>
<button id="loading">重新加載</button>
<table id="Table" width="100%"></table>
</body>
<script>
$(document).ready( function () {
var table = $('#Table').DataTable({
/******配置表格資料源********/
ajax: {
url: "API.php",// 資料介面，后臺接收資料要滿足dataTable的格式
dataSrc: 'data'// 規定資料源在后臺資料的位置
},
/******配置插件按鈕組********/
dom: 'Blfrtip',// 按鈕組放置的位置在左側
buttons: [
{extend:'copy',},// 復制
{extend:'excel',},// 匯出excel
{extend:'csv',},// 匯出csv
{extend:'print'},// 列印
{
extend: 'colvis',// 隱藏、顯示列
columns: ':not(.noVis)'// 設定有樣式為.noVis的列，不在隱藏的范圍內
}
],
/******配置選擇資料的樣式********/
select: {
style: 'os',
selector: 'td:first-child'// 表示通過點擊第一個cell來選中行
},
/******配置服務器模式********/
serverSide: true,
/******配置表頭********/
columns: [
{
className: 'select-checkbox noVis',
orderable: false,
searchable: false,
data: null,
defaultContent: '',
},
{
data: 'id',
title:'用戶ID',
searchable: true,
// "visible": false,
render: function ( data, type, row, meta ) {
return '<a href="'+data+'">'+data+'</a>';
},
className: 'noVis'
},
{
data: "user_name",
title:"賬號",
render: function ( data, type, row, meta ) {
return type === 'display' && data.length > 5 ?
'<span title="'+data+'">'+data.substr( 0, 38 )+'...</span>' :
data;
}
},
{ data: "true_name","title":"姓名" },
{ data: "register_time","title":"注冊時間" },
{ data: "last_login_time","title":"最近登錄" },
{ data: "last_login_ip","title":"登錄IP"},
{ data: "user_desc","title":"用戶描述" },
],
/******i18n -- 設定中文語言配置********/
language: {
url:'plugs/dataTable/i18n/zh.json'
},
/******設定各個組件是否顯示********/
"bPaginate": true, //翻頁組件是否開啟
"sPaginationType": "full_numbers",// 首頁、尾頁按鈕是否開啟
"bLengthChange": true, //改變每頁顯示資料數量組件是否開啟
"aLengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "所有"]],//每頁顯示數量的可選項與對應文字
"bFilter": true, //查詢過濾組件是否開啟
"bSort": true, //排序功能是否開啟
"bInfo": true,//頁腳資訊是否顯示
// "bStateSave": true,//狀態保存，使用了翻頁或者改變了每頁顯示資料數量，會保存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容，
"bProcessing" : true,
});
/***
* 重新加載表格
* */
$('#loading').click( function () {
table.draw( false );
});
/***
* 配置隱藏列功能
* */
$('.toggle-vis').on( 'click', function (e) {
e.preventDefault();
var column = table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
} );
});
</script>
</html>
?? 【引入資源檔案】----第3-22行，引入了必要的css、js資源，各自的作用詳見注釋；
?? 【表格基本樣式】----第26行，添加了一個table標簽，必須有id值，需要設定width為100%，這是最基本配置，沒有什么樣式，在我們二開中，可以給table加上class，這樣就支持各種漂亮的樣式了，
?? 【初始化】----第32-123行，初始化表格，里面加入了很多配置；
?? 【配置表格資料源】----第33-37行，指定此表格資料來源的介面；url指定介面，dataSrc指定我們的表格資料在后臺回傳資料中的位置，例如：
/******配置表格資料源********/
ajax: {
url: "API.php",// 資料介面，后臺接收資料要滿足dataTable的格式
dataSrc: 'data'// 規定資料源在后臺資料的位置
},
對應的后臺資料格式為：
{
"data" : [
{...},
{...},
...
]
}
?? 【配置插件按鈕組】----第38-49行，配置插件按鈕，包括復制、匯出、列印功能，注釋介紹的很清楚，唯一值得注意的是，這樣的寫法看似很簡單，其實都是呼叫的其他js檔案里面exports出來的模塊，
?? 【配置選擇資料的樣式】----第50-54行，值得注意的是，selector屬性規范了選擇表格資料的行為，'td:first-child'規定了只能點擊每一行的第一個格子才能選中此行，默認是點擊一行的任何位置就可以選中，
?? 【配置服務器模式】----第56行，非常重要，開啟服務器來承載分頁功能，開啟之后，前端請求的資料格式如下：
?? 而我們在后端必須把資料封裝成一定的格式，如下：
?? 不管我們后端是什么語言，都需要接收dataTable封裝好的資料格式，包括如下（我的后端是PHP版本，主要看注釋）：
// 起始索引
@$start=$_GET['start'];
// 頁面長度
@$length=$_GET['length'];
// 搜索關鍵字
@$search=$_GET['search']['value'];
// 表頭屬性
@$columns=$_GET['columns'];
// 排序屬性
@$order=$_GET['order'];
?? 這里給出我封裝好的PHP后端的例子，語言不重要，主要是理解一下就行：
<?php
require('connect.php');
date_default_timezone_set("PRC"); //設定成亞洲時區
// 起始索引
@$start=$_GET['start'];
// 頁面長度
@$length=$_GET['length'];
// 搜索關鍵字
@$search=$_GET['search']['value'];
// 表頭屬性
@$columns=$_GET['columns'];
// 排序屬性
@$order=$_GET['order'];
$result_json = [];
/**
* 拼接sql陳述句
*/
$sql_all = "SELECT * from sy_users ";
$sql = $sql_all;
// 搜索關鍵字
$flag = true;
foreach($columns as $c){
if($c['data'] == '') continue;
if($search != '' && $c['searchable'] && $flag) {
$sql.=" where ".$c['data']." like '%$search%' ";
$flag = !$flag;
}else if($search != '' && $c['searchable']){
$sql .= " or ".$c['data']." like '%$search%' ";
}
}
// 排序
if(count($order)!=0 && $order[0]['column']!=0 ){
$sql.=" order by ";
foreach($order as $o){
$sql .= $columns[ $o['column'] ]['data']." ".$o['dir']." ";
}
}
// 分頁
$sql_page =$sql." limit $start,$length";
/**
* 設定回傳資料
*/
$result_mysqli=mysqli_query( $con, $sql_all );
while(@$obj = mysqli_fetch_object($result_mysqli))
$result_json[]=$obj;
// 資料的總條數
$recordsTotal = count($result_json);
$result_json = [];
$result_mysqli=mysqli_query( $con, $sql );
while(@$obj = mysqli_fetch_object($result_mysqli))
$result_json[]=$obj;
// 最終過濾后資料的總條數
$recordsFiltered = count($result_json);
$result_json = [];
$result_mysqli=mysqli_query( $con, $sql_page );
while(@$obj = mysqli_fetch_object($result_mysqli))
$result_json[]=$obj;
$json = array(
'data'=> $result_json,
'recordsTotal' => $recordsTotal,
'recordsFiltered' => $recordsFiltered
);
echo json_encode($json);
?>
?? 【配置表頭】----第58-90行，非常重要，配置表頭的屬性，data表示該列在回傳的資料中的欄位，title表示表頭名稱，orderable表示是否能排序，searchable表示是否參與檢索，className為資料行設定class，render是一個回呼函式，具體有2種常用用法，見上面的代碼，
?? 【設定中文語言配置】----第92-95行，顯示中文版本，呼叫本地的json檔案，不用管，
?? 【設定各個組件是否顯示】----第97-106行，注釋很詳細，可以自己測驗看一下效果，
本組件的源代碼
如果需要本組件的源代碼，請掃描關注我的公眾號，回復“dataTable”即可，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/295576.html
標籤：其他