Datatables 行数据删除、行上升、行下降功能演示

asdjkl

2015-03-20

Datatables 是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

官方网站：http://www.datatables.net

最近在研究Datatables 的使用，其中包括行删除，行编辑，行上升，行下降。Google了一把，没有发现太多有用的资料，索性自己写一个简单的Demo，为了记录，也为了方便DataTables 的粉丝。

首先上HTML 结构（其中引入了jquery, Boostrap 和 Font-Awesome 图标）：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>DataTables Demo - Row up and down</title>

	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.2/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="font-awesome-4.3.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="DataTables-1.10.5/css/jquery.dataTables.css">

	<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="bootstrap-3.3.2/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="DataTables-1.10.5/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="demo.js"></script>

</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<table id="demo" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th>姓名</th>
							<th>职位</th>
							<th>办公室</th>
							<th>薪水</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>张三</td>
							<td>System Architect</td>
							<td>Edinburgh</td>
							<td>$320,800</td>
							<td></td>
						</tr>
						<tr>
							<td>李四</td>
							<td>Accountant</td>
							<td>Tokyo</td>
							<td>$170,750</td>
							<td></td>
						</tr>
						<tr>
							<td>王五</td>
							<td>Junior Technical Author</td>
							<td>San Francisco</td>
							<td>$86,000</td>
							<td></td>
						</tr>
						<tr>
							<td>赵六</td>
							<td>Senior Javascript Developer</td>
							<td>Edinburgh</td>
							<td>$433,060</td>
							<td></td>
						</tr>
						<tr>
							<td>小明</td>
							<td>Accountant</td>
							<td>Tokyo</td>
							<td>$162,700</td>
							<td></td>
						</tr>
						<tr>
							<td>小丽</td>
							<td>Integration Specialist</td>
							<td>New York</td>
							<td>$372,000</td>
							<td></td>
						</tr>
						<tr>
							<td>小春春</td>
							<td>Sales Assistant</td>
							<td>San Francisco</td>
							<td>$137,500</td>
							<td></td>
						</tr>

					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

再就是JS 文件的写法：

$(document).ready(function() {

	$('#demo').DataTable({
		"paging": false,
		"ordering": false,
		"info": false,
		"searching": false,
		"columnDefs": [{
			// 定义操作列
			"targets": 4,
			"data": null,
			"render": function(data, type, row) {
				var html = '<a href="javascript:void(0);" class="delete btn btn-default btn-xs"><i class="fa fa-times"></i> 删除</a>'
				html += ' <a href="javascript:void(0);" class="up btn btn-default btn-xs"><i class="fa fa-arrow-up"></i> 上升</a>'
				html += ' <a href="javascript:void(0);" class="down btn btn-default btn-xs"><i class="fa fa-arrow-down"></i> 下降</a>'
				return html;
			}
		}],
		language: {
			"processing": "处理中...",
			"lengthMenu": "显示 _MENU_ 项结果",
			"zeroRecords": "没有匹配结果",
			"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
			"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
			"infoFiltered": "(由 _MAX_ 项结果过滤)",
			"infoPostFix": "",
			"search": "搜索:",
			"url": "",
			"emptyTable": "表中数据为空",
			"loadingRecords": "载入中...",
			"infoThousands": ",",
			"paginate": {
				"first": "首页",
				"previous": "上页",
				"next": "下页",
				"last": "末页"
			},
			"aria": {
				"sortAscending": ": 以升序排列此列",
				"sortDescending": ": 以降序排列此列"
			}
		}
	});

	// 初始化刪除按钮
	$('#demo tbody').on('click', 'a.delete', function(e) {
		e.preventDefault();

		if (confirm("确定要删除该属性？")) {
			var table = $('#demo').DataTable();
			table.row($(this).parents('tr')).remove().draw();
		}

	});

	// 初始化上升按钮
	$('#demo tbody').on('click', 'a.up', function(e) {
		e.preventDefault();
		var table = $('#demo').DataTable();
		var index = table.row($(this).parents('tr')).index();
		if ((index - 1) >= 0) {
			var data = table.data();
			table.clear();
			data.splice((index - 1), 0, data.splice(index, 1)[0]);
			table.rows.add(data).draw();
		} else {
			alert("亲，已经到顶了");
		}

	});

	// 初始化下降按钮
	$('#demo tbody').on('click', 'a.down', function(e) {
		e.preventDefault();

		var table = $('#demo').DataTable();
		var index = table.row($(this).parents('tr')).index();
		var max = table.rows().data().length;
		if ((index + 1) < max) {
			var data = table.data();
			table.clear();
			data.splice((index + 1), 0, data.splice(index, 1)[0]);
			table.rows.add(data).draw();
		} else {
			alert("亲，已经到底了");
		}
	});
});

最后来一张效果图片：

Datatables 行数据删除、行上升、行下降功能演示