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>
$(document).ready(function() {
$('#example').dataTable();
} );
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": true, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true,//自动宽度
说明:以上参数配置实现的显示效果和第一个是一样的。
- 默认排序设置,
aaSorting
http://www.datatables.net/release-datatables/examples/basic_init/table_sorting.html
"aaSorting": [[ 4, "desc" ]],//设置第5个元素为默认排序
说明:
将表单id
改为class
:
初始化:
$('.example').dataTable(
即可。
- 隐藏部分列的内容,
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 ] }//
]
"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名称
- 保存当前页面信息为
cookie
,默认关闭
http://www.datatables.net/release-datatables/examples/basic_init/state_save.html
"bStateSave": true
如果用户关闭页面后重新打开该页面,该列表会和关闭前的状态完全一样(长度,过滤,分页和排序)
"sPaginationType": "full_numbers"
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
用的很少
"sScrollY": "200px",
"bPaginate": false //该参数为是否显示分页,如果设置为true貌似就没什么意义了
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%"
需要拷贝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
好看,这里就不截图了!
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_条",
"sZeroRecords": "没有找到符合条件的数据",
"sProcessing": "<img src=’./loading.gif’ />",
"sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
"sInfoEmpty": "木有记录",
"sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
}
也可以直接指定语言包,txt
文件:
"sUrl": "media/language/de_DE.txt" //文件格式和上面一样
最前面加入:
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>
在最前面引入函数:
/* 构造每一行详情的函数 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
示例仅适用于数据量少时的情况.