DataTable插件Hello world_jquery.datatables.min.js下载-优快云博客

本文链接：https://blog.youkuaiyun.com/CSxiaoyuhan/article/details/77866077

DataTables 插件下载地址http://datatables.club/

或者

DataTables 我的网盘地址（包括demo）：链接：http://pan.baidu.com/s/1chLkUM密码：bejv

效果图：

需要用到的插件：

dataTables.min.css

jquery-2.1.0.min.js

jquery.dataTables.min.js 这些都可以在我的网盘中或这自己下载的插件中找到

Html页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DataTables example</title>

<script type="text/javascript"
	src="js/DataTables-1.10.2/js/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="js/DataTables-1.10.2/css/jquery.dataTables.min.css" media="all" />
<script type="text/javascript"
	src="js/DataTables-1.10.2/js/jquery.dataTables.min.js"></script>
	
</head>

<body>
	<table id="table_id_example" class="display">
		<thead>
			<tr>
				<th>Column 1</th>
				<th>Column 2</th>
				<th>Column 3</th>
				<th>Column 4</th>
				<th>Column 5</th>
				<th>Column 6</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>战士</td>
				<td>男</td>
				<td>23</td>
				<td>苹果</td>
				<td>华宇</td>
				<td>567235234</td>

			</tr>
			<tr>
				<td>战士</td>
				<td>男</td>
				<td>23</td>
				<td>苹果</td>
				<td>华宇</td>
				<td>567235234</td>
			</tr>
			<tr>
				<td>战士</td>
				<td>男</td>
				<td>23</td>
				<td>苹果</td>
				<td>华宇</td>
				<td>567235234</td>
			</tr>
			<tr>
				<td>战士</td>
				<td>女</td>
				<td>23</td>
				<td>苹果</td>
				<td>华宇</td>
				<td>567235234</td>
			</tr>
			<tr>
				<td>战士</td>
				<td>女</td>
				<td>23</td>
				<td>苹果</td>
				<td>华宇</td>
				<td>567235234</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>23</td>
				<td>苹果</td>
				<td>华宇</td>
				<td>18456456</td>
			</tr>
			<tr>
				<td>战士</td>
				<td>男</td>
				<td>23</td>
				<td>桃子</td>
				<td>华宇</td>
				<td>567235234</td>
			</tr>
			<tr>
				<td>战士</td>
				<td>男</td>
				<td>23</td>
				<td>苹果</td>
				<td>华宇</td>
				<td>567235234</td>
			</tr>
			<tr>
				<td>战士</td>
				<td>男</td>
				<td>23</td>
				<td>苹果</td>
				<td>华宇</td>
				<td>567235234</td>
			</tr>
			<tr>
				<td>战士</td>
				<td>男</td>
				<td>23</td>
				<td>苹果</td>
				<td>华宇</td>
				<td>567235234</td>
			</tr>
			<tr>
				<td>战士</td>
				<td>男</td>
				<td>58</td>
				<td>苹果</td>
				<td>华宇</td>
				<td>567235234</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#table_id_example').DataTable({
				language : {
					"sProcessing" : "处理中...",
					"sLengthMenu" : "显示 _MENU_ 项结果",
					"sZeroRecords" : "没有匹配结果",
					"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
					"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
					"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
					"sInfoPostFix" : "",
					"sSearch" : "搜索:",
					"sUrl" : "",
					"sEmptyTable" : "表中数据为空",
					"sLoadingRecords" : "载入中...",
					"sInfoThousands" : ",",
					"oPaginate" : {
						"sFirst" : "首页",
						"sPrevious" : "上页",
						"sNext" : "下页",
						"sLast" : "末页"
					},
					"oAria" : {
						"sSortAscending" : ": 以升序排列此列",
						"sSortDescending" : ": 以降序排列此列"
					}
				}
			});
		});
	</script>

</body>
</html>

至此完成，加载tomcat测试一下把，就可以出现页面了。

注意：

使用转换dataTable表格（默认）的时候注意：

$(document).ready(function() {   //一定要在表格加载完成之后使用
			$('#table_id_example').DataTable();
		});

如果是ajax的形势要么设置同步方法，在加载完之后在调用，要么设置延迟加载时间

function getXfbsTable() {
	$.ajax({
		type : 'post',
		url : '/xfjkcj/getXfbsTable',
		dataType : 'json',
		async : false,
		success : function(datalist) {
			var dataObject = datalist,
			con = "";
			$.each(dataObject, function(index, item) {
				con += "<tr><td>" + item.xfbs + "</td>";
				con += "<td>" + item.kssj + "</td>";
				con += "<td>" + item.jssj + "</td>";
				con += "<td>" + item.xfxsdm + "</td>";
				con += "<td>" + item.xfxsmc + "</td>";
				con += "<td>" + item.state + "</td></tr>";
			});
			//alert(con);
			console.log(con);
			$("#xfbstbody").append(con);
		},
		error : function(resource) {
			console.log("ajax请求出错了");
		}
	});
	//修饰信访标识表格
    decorateTable();
}
function decorateTable(){
	$('#XfbsTable').DataTable();
}