jquery datatables各参数详细说明及简单应用

其他 2018-12-31 21:48:18 阅读次数: 0

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示例仅适用于数据量少时的情况.

猜你喜欢

转载自blog.csdn.net/WuLex/article/details/85068225
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022