jquery datatables各引數詳細說明及簡單應用

風靈使發表於2018-12-31
jQuery

v1.9.0下載後，將media資料夾裡面的css，images，js資料夾拷貝到你的網站即可。接下來引入以下內容：

<style type="text/css" title="currentStyle">
	@import "./style/datatable/css/demo_page.css";
	@import "./style/datatable/css/demo_table.css";
</style>
<script type="text/javascript" src="./style/datatable/js/jquery.js"></script>
<script type="text/javascript" src="./style/datatable/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	    $('#example').dataTable();//其中example為table的id，table中必須有thead！
	} );
</script>
  1. datatables簡單示例
    http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html
$(document).ready(function() {
$('#example').dataTable();
} );
  1. 進行基本引數配置
    http://www.datatables.net/release-datatables/examples/basic_init/filter_only.html
"bPaginate": true, //翻頁功能
"bLengthChange": true, //改變每頁顯示資料數量
"bFilter": true, //過濾功能
"bSort": true, //排序功能
"bInfo": true,//頁尾資訊
"bAutoWidth": true,//自動寬度

說明：以上引數配置實現的顯示效果和第一個是一樣的。

  1. 預設排序設定，aaSorting
    http://www.datatables.net/release-datatables/examples/basic_init/table_sorting.html
"aaSorting": [[ 4, "desc" ]],//設定第5個元素為預設排序
  1. 多個datatable
    http://www.datatables.net/release-datatables/examples/basic_init/multiple_tables.html

說明：
將表單id改為class：
初始化：

$('.example').dataTable(

即可。

  1. 隱藏部分列的內容，aoColumnDefs
    http://www.datatables.net/release-datatables/examples/basic_init/hidden_columns.html
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },//bSearchable：是否可搜尋；bVisible：是否可見；aTargets：哪一列
{ "bVisible": false, "aTargets": [ 3 ] }//
]
  1. 修改表單各元素顯示位置
    http://www.datatables.net/release-datatables/examples/basic_init/dom.html
"sDom": '<"top"i>rt<"bottom"flp><"clear">'

表示的html為：

<div class="top">這裡顯示 當前條數，總共條數</div>
這裡顯示 請求中的提示資訊，表單內容
<div class="bottom">這裡顯示 搜尋框，每頁數量選擇，翻頁按鈕</div>
<div class="clear"></div>
 
//l - 每頁數量選擇select
//f – 搜尋框search
//t – 表單內容table
//i – 當前條數，總共條數information
//p – 翻頁按鈕pagination
//r – 請求中的提示資訊
//< 和 > – 一個div的開始與結束
//<"class"> – class為div的class名稱
  1. 儲存當前頁面資訊為cookie，預設關閉
    http://www.datatables.net/release-datatables/examples/basic_init/state_save.html
"bStateSave": true

如果使用者關閉頁面後重新開啟該頁面，該列表會和關閉前的狀態完全一樣（長度，過濾，分頁和排序）

  1. 修改預設分頁顯示樣式
    http://www.datatables.net/release-datatables/examples/basic_init/alt_pagination.html
"sPaginationType": "full_numbers"
  1. x軸寬度限制
    http://www.datatables.net/release-datatables/examples/basic_init/scroll_x.html
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true

用的很少

  1. y軸高度限制
    http://www.datatables.net/release-datatables/examples/basic_init/scroll_y.html
"sScrollY": "200px",
"bPaginate": false //該引數為是否顯示分頁，如果設定為true貌似就沒什麼意義了
  1. x軸、y軸均限制
    http://www.datatables.net/release-datatables/examples/basic_init/scroll_xy.html
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%"
  1. 應用主題
    http://www.datatables.net/release-datatables/examples/basic_init/themes.html

需要拷貝examples/examples_support/themes資料夾到style/datatable裡面

@import "./style/datatable/css/demo_table.css";

替換為：

@import "./style/datatable/css/demo_table_jui.css";

主題一：
引入

@import "./style/datatable/themes/smoothness/jquery-ui-1.8.4.custom.css";

主題二：
引入

@import "./style/datatable/themes/ui-lightness/jquery-ui-1.8.4.custom.css";

主題二是橘色系的，木有第一個smoothness好看，這裡就不截圖了！

  1. 語言設定
    http://www.datatables.net/release-datatables/examples/basic_init/language.html
"oLanguage": {
"sLengthMenu": "每頁顯示 _MENU_條",
"sZeroRecords": "沒有找到符合條件的資料",
"sProcessing": "&lt;img src=’./loading.gif’ /&gt;",
"sInfo": "當前第 _START_ - _END_ 條　共計 _TOTAL_ 條",
"sInfoEmpty": "木有記錄",
"sInfoFiltered": "(從 _MAX_ 條記錄中過濾)",
"sSearch": "搜尋：",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "前一頁",
"sNext": "後一頁",
"sLast": "尾頁"
}
}

也可以直接指定語言包，txt檔案：

"sUrl": "media/language/de_DE.txt" //檔案格式和上面一樣
  1. 各列資料input過濾
    http://www.datatables.net/release-datatables/examples/api/multi_filter.html

最前面加入：

var asInitVals = new Array();
$('#example').dataTable 修改為：var oTable =$('#example').dataTable

加入：

/*過濾程式碼開始*/
$("tfoot input").keyup( function () {
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );

tfoot裡面加入：

<tr>
    <th><input type="text" name="search_engine" value="Search engines" class="search_init" /></th>
    <th><input type="text" name="search_browser" value="Search browsers" class="search_init" /></th>
    <th><input type="text" name="search_platform" value="Search platforms" class="search_init" /></th>
    <th><input type="text" name="search_version" value="Search versions" class="search_init" /></th>
    <th><input type="text" name="search_grade" value="Search grades" class="search_init" /></th>
</tr>
  1. 每一行點選詳情效果
    http://www.datatables.net/release-datatables/examples/api/row_details.html

在最前面引入函式：

/* 構造每一行詳情的函式 fnFormatDetails*/
function fnFormatDetails ( oTable, nTr ){
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="6" cellspacing="0" border="0" style="padding-left:50px;">'; //在這裡定義要返回的內容
    sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
    sOut += '</table>';
    return sOut;
}

ready(function)裡面開頭加入：

/*顯示每一行詳情用_start*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '<img src="./style/datatable/images/details_open.png">';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
    this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example tbody tr').each( function () {
    this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*顯示每一行詳情用_end*/

ready(function)裡面末尾加入：

/*加入展開，收縮每一行詳情按鈕用*/
$('#example tbody td img').live('click', function () {
    var nTr = $(this).parents('tr')[0];
    if ( oTable.fnIsOpen(nTr) )
    {
        this.src = "./style/datatable/images/details_open.png";
        oTable.fnClose( nTr );
    }
    else
    {
        this.src = "./style/datatable/images/details_close.png";
        oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
    }
} );

值得注意的是，如果加入了tfoot，必須手動在裡面加入多一行th！

最後，是寒風寫的簡單的php+mysql+datatables的簡單示例，很多寒風都做了詳細的註釋說明：


<?php 
$mysqli=new mysqli("localhost","root","","database");
$mysqli->query("SET NAMES utf8");
 
$result=$mysqli->query("SELECT * FROM `table` limit 500");
if(!$result){
	echo "查詢出錯！";
	exit;
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" title="currentStyle">
	@import "./style/datatable/css/demo_page.css";
	@import "./style/datatable/css/demo_table_jui.css";
	@import "./style/datatable/themes/smoothness/jquery-ui-1.8.4.custom.css";
	body{ font-size:12px;}
	table{ font-size:12px;}
</style>
<script type="text/javascript" src="./style/datatable/js/jquery.js"></script>
<script type="text/javascript" src="./style/datatable/js/jquery.dataTables.min.js"></script>
 
<script type="text/javascript">
	/* 構造每一行詳情的函式 fnFormatDetails*/
	function fnFormatDetails ( oTable, nTr ){
		var aData = oTable.fnGetData( nTr );
		var sOut = '<table cellpadding="6" cellspacing="0" border="0" style="padding-left:50px;">'; //在這裡定義要返回的內容
		sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
		sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
		sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
		sOut += '</table>';
		return sOut;
	}
 
	/*頁面元素載入完成後開始執行*/
	$(document).ready(function() {
		/*顯示每一行詳情用_start*/
		var nCloneTh = document.createElement( 'th' );
		var nCloneTd = document.createElement( 'td' );
		nCloneTd.innerHTML = '<img src="./style/datatable/images/details_open.png">';
		nCloneTd.className = "center";
		$('#example thead tr').each( function () {
			this.insertBefore( nCloneTh, this.childNodes[0] );
		} );
		$('#example tbody tr').each( function () {
			this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
		} );
		/*顯示每一行詳情用_end*/
 
		var asInitVals = new Array(); //用於每一列搜尋過濾
	    var oTable =$('#example').dataTable( //var oTable用於每一列搜尋過濾
	    	{
				/*基本引數設定，以下引數設定和預設效果一致*/
	    		"bPaginate": true, //翻頁功能
	    		"bLengthChange": true, //改變每頁顯示資料數量
	    		"bFilter": true, //過濾功能
	    		"bSort": true, //排序功能
	    		"bInfo": true,//頁尾資訊
	    		"bAutoWidth": true,//自動寬度
	    		/*預設排序設定*/
	    		"aaSorting": [[ 4, "desc" ]],//設定第5個元素為預設排序
                /*預設翻頁樣式設定*/
	    		"sPaginationType": "full_numbers",
	    		/*是否開啟主題*/
	    		"bJQueryUI": true,
				/*語言設定*/
	            "oLanguage": {
	                "sLengthMenu": "每頁顯示 _MENU_條",
	                "sZeroRecords": "沒有找到符合條件的資料",
	                "sProcessing": "<img src=’./loading.gif’ />",
	                "sInfo": "當前第 _START_ - _END_ 條　共計 _TOTAL_ 條",
	                "sInfoEmpty": "木有記錄",
	                "sInfoFiltered": "(從 _MAX_ 條記錄中過濾)",
	                "sSearch": "搜尋：",
                	"oPaginate": {
    	            	"sFirst": "首頁",
    	            	"sPrevious": "前一頁",
    	            	"sNext": "後一頁",
    	            	"sLast": "尾頁"
    		        }
	            }
			}
	    );
 
		/*每一列搜尋過濾程式碼開始*/
	    $("tfoot input").keyup( function () {
	        oTable.fnFilter( this.value, $("tfoot input").index(this) );
	    } );
	    $("tfoot input").each( function (i) {
	        asInitVals[i] = this.value;
	    } );
	    $("tfoot input").focus( function () {
	        if ( this.className == "search_init" )
	        {
	            this.className = "";
	            this.value = "";
	        }
	    } );
	    $("tfoot input").blur( function (i) {
	        if ( this.value == "" )
	        {
	            this.className = "search_init";
	            this.value = asInitVals[$("tfoot input").index(this)];
	        }
	    } );
 
		/*加入展開，收縮每一行詳情按鈕用*/
		$('#example tbody td img').live('click', function () {
			var nTr = $(this).parents('tr')[0];
			if ( oTable.fnIsOpen(nTr) )
			{
				this.src = "./style/datatable/images/details_open.png";
				oTable.fnClose( nTr );
			}
			else
			{
				this.src = "./style/datatable/images/details_close.png";
				oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
			}
		} );
	} );
</script>
</head>
 
<body>
<div style=" width:800px; margin:0 auto;">
<table cellpadding="0" cellspacing="0" class="display" border="0" id="example">
<thead>
  <tr>
    <th>ID</th>
    <th>時間</th>
    <th>數量</th>
    <th>次數</th>
    <th>消耗</th>
  </tr>
</thead>
<tbody>
<?php
while($rows=$result->fetch_assoc()){
	$rows['time']=date("Y-m-d H:i:s",$rows['time']);
	echo "
	<tr>
	  <td>{$rows['ID']}</td>
	  <td>{$rows['time']}</td>
	  <td>{$rows['r_num']}</td>
	  <td>{$rows['r_times']}</td>
	  <td>{$rows['money']}</td>
	</tr>";
}
?>
</tbody>
<tfoot>
  <tr>
    <th></th>
    <th>ID</th>
    <th>時間</th>
    <th>數量</th>
    <th>次數</th>
    <th>消耗</th>
  </tr>
	<tr>
		<th></th>
		<th><input type="text" name="search_engine" value="Search engines" class="search_init" /></th>
		<th><input type="text" name="search_browser" value="Search browsers" class="search_init" /></th>
		<th><input type="text" name="search_platform" value="Search platforms" class="search_init" /></th>
		<th><input type="text" name="search_version" value="Search versions" class="search_init" /></th>
		<th><input type="text" name="search_grade" value="Search grades" class="search_init" /></th>
	</tr>
</tfoot>
</table>
<style>
#example tr.even:hover {background-color: #ECFFB3;}
#example tr.even:hover td.sorting_1 {background-color: #DDFF75;}
#example tr.even:hover td.sorting_2 {background-color: #E7FF9E;}
#example tr.even:hove3 {background-color: #E2FF89;}
#example tr.odd:hover {background-color: #E6FF99;}
#example tr.odd:hover td.sorting_1 {background-color: #D6FF5C;}
#example tr.odd:hover td.sorting_2 {background-color: #E0FF84;}
#example tr.odd:hover td.sorting_3 {background-color: #DBFF70;}
</style>
</div>
</body>
</html>

實現了上面絕大部分功能！以上php+datatables示例僅適用於資料量少時的情況.

相關文章