记datatables.js(数据表)

Datatables是一款jquery表格插件。

它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

中文官网:http://www.datatables.club

功能与实现:


  1. 分页,即时搜索和排序
  2. 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理。
  3. 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation。
  4. 各式各样的扩展: Editor, TableTools, FixedColumns ……。
  5. 丰富多样的option和强大的API
  6. 支持国际化。
  7. 超过2900+个单元测试。
  8. 免费开源 ( MIT license )! 商业支持。

简单实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据表</title>
		<link rel="stylesheet" type="text/css" href="datatables/css/jquery.dataTables.min.css" />
		<link rel="stylesheet" type="text/css" href="datatables/css/buttons.dataTables.min.css" />
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="datatables/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="datatables/js/dataTables.buttons.min.js"></script>
		<script type="text/javascript" src="datatables/js/jszip.min.js"></script>
		<script type="text/javascript" src="datatables/js/buttons.html5.min.js"></script>
	</head>
	<body>
		<input type="text" id="uername" /><button οnclick="seaRch()">查询</button>
		<table id="table_example" class="layui-table display nowrap" width="100%">
			<thead>
				<tr>
					<th width="5%">用户ID</th>
					<th width="8%">用户名称</th>
					<th width="8%">联系人</th>
					<th width="8%">手机号</th>
					<th width="8%">状态</th>
					<th width="5%">功能</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td colspan="12" align="center">
						<div id="div_pager"></div>
					</td>
				</tr>
			</tfoot>
		</table>
	</body>
	<script type="text/javascript">
		var table
		$(document).ready(function() {
			/*表格排序,分页*/
			table = $('#table_example').DataTable({
				"dom": 'Bfrtip',
				"aoColumnDefs": [{
					"bSortable": false,
					"aTargets": [0, 4 , 5]
				}], //指定那几列不可以排序   
				/*"aaSorting": [[ 3, "desc" ]],*///默认按那几列排序
				"columnDefs": [{
					"targets": [0],
					"searchable": false
				}], //设置第一列不参与搜索
				"serverSide": true,//服务器模式
				//true:客户端处理模式——此模式下如:过滤、分页、排序的处理都在浏览器中进行。
				//false:服务器端处理模式——此模式下如:过滤、分页、排序的处理都放在服务器端进行。
				"ajax": {
					//例json数据:{"status": 0,"data": [{"user_id": 1,"user_name": "名字1","contacts":"联系人a","phone":"10086","state":"开启"},{"user_id": 2,"user_name": "名字2","contacts":"联系人b","phone":"10010","state":"关闭"},]}
					"url": "users/data.json",
					"type": "get",
					"data": function(d) { //添加额外的数据传给后台
						d.uername = $("#uername").val();
					}
				},//解析返回数据显示到页面
				"columns": [{
						"data": "user_id"
					},
					{
						"data": "user_name"
					},
					{
						"data": "contacts"
					},
					{
						"data": "phone",
						render: function(data, type, row, meta) {
							return '<a href="getPlayers?user_id=' + row.user_id + '">' + data + '</a>';
						}
					},
					{
						"data": "state",
						render: function(data, type, row, meta) {
							if (data == "关闭") {
								return '<span style="color:green">' + data + '</span>';
							} else if (data == "开启") {
								return '<span style="color:red">' + data + '</span>';
							}
						}
					},
					{
						"data": null,
						render: function(data, type, row, meta) {
							if (row.state == '关闭') {
								return '<a class="b" href="#" style="color: blue" οnclick="okAudits("' + row.user_id +
									'",1)">开启</a><a href="#" class="bb" style="color: blue" οnclick="okAudit("' + row.user_id +
									'",0)">关闭</a>';
							} else if (row.state == '开启') {
								return '<a href="#" style="color: blue" οnclick="okAudit("' + row.user_id +
									'",1)">开启</a><a href="#" style="color: blue" οnclick="okAudit("' + row.user_id + '",0)">关闭</a>';
							}
						}
					}
				],
				"bStateSave": true, //跳转回来还在当前页
				"paging": true,//分页
				"searching": true,//搜索
				"responsive": true,
				"bLengthChange": true,
				"processing": true,
				"sPaginationType": "full_numbers",//间隔类型
				"lengthMenu": [//自定义选择每页面显示多少条数据
					[10, 20, 30, 50, -1],
					[10, 20, 30, 50, "所有"]
				],
				"sDom": '<"top"fl>rt<"bottom"ip><"clear">', //控制元素的位置
				"oLanguage": {
					"sProcessing": "努力加载数据中.",
					"sLengthMenu": "每页显示 _MENU_ 条记录",
					"sZeroRecords": "抱歉, 没有找到",
					"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
					"sInfoEmpty": "没有数据",
					"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
					"sZeroRecords": "没有检索到数据",
					"sSearch": "模糊查询:  ",
					"oPaginate": {
						"sFirst": "首页",
						"sPrevious": "前一页",
						"sNext": "后一页",
						"sLast": "尾页"
					}
				}
			});
			$('#table_example tbody').on('click', '.b', function() {
				var data = table.row($(this).parents('tr')).data();
				alert(data.user_id);
				alert("您确定要开启吗?");
			});
			$('#table_example tbody').on('click', '.bb', function() {
				var data = table.row($(this).parents('tr')).data();
				alert("您确定要关闭吗?" + data.user_id);
			});
		})
		function seaRch() {
			table.ajax.reload();
		}
	</script>
</html>

更多功能与实现可到此搜索:http://www.datatables.club/reference/option/

转载请注明出处凌夕博客 »漫小猫原文地址《记datatables.js(数据表)

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)