DataTable插件Hello world

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"%>








	



	

		

			

				
Column 1
				
Column 2
				
Column 3
				
Column 4
				
Column 5
				
Column 6
			
		
		

			

				
战士
				
男
				
23
				
苹果
				
华宇
				
567235234

			
			

				
战士
				
男
				
23
				
苹果
				
华宇
				
567235234
			
			

				
战士
				
男
				
23
				
苹果
				
华宇
				
567235234
			
			

				
战士
				
女
				
23
				
苹果
				
华宇
				
567235234
			
			

				
战士
				
女
				
23
				
苹果
				
华宇
				
567235234
			
			

				
李四
				
男
				
23
				
苹果
				
华宇
				
18456456
			
			

				
战士
				
男
				
23
				
桃子
				
华宇
				
567235234
			
			

				
战士
				
男
				
23
				
苹果
				
华宇
				
567235234
			
			

				
战士
				
男
				
23
				
苹果
				
华宇
				
567235234
			
			

				
战士
				
男
				
23
				
苹果
				
华宇
				
567235234
			
			

				
战士
				
男
				
58
				
苹果
				
华宇
				
567235234
			
		
	
	

至此完成，加载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 += "" + item.xfbs + "";
				con += "" + item.kssj + "";
				con += "" + item.jssj + "";
				con += "" + item.xfxsdm + "";
				con += "" + item.xfxsmc + "";
				con += "" + item.state + "";
			});
			//alert(con);
			console.log(con);
			$("#xfbstbody").append(con);
		},
		error : function(resource) {
			console.log("ajax请求出错了");
		}
	});
	//修饰信访标识表格
    decorateTable();
}
function decorateTable(){
	$('#XfbsTable').DataTable();
}