DataTables实际使用

依赖

datatables中文官网 http://www.datatables.club 可以下载和查找详细使用方法。
本人结合自己开发和学习的经历，列出如下代码，以供参考。

如果使用requirejs，则使用如下配置。(需在whiteList.html引入requirejs和jquery依赖)

//userDefineRequireConfig.js
requirejs.config({
	paths:{
		"datatables":"DataTables-1.10.15/media/js/jquery.dataTables",
		"datatables.net":"DataTables-1.10.15/media/js/jquery.dataTables.min",
		"datatables.net-buttons":"DataTables-1.10.15/extensions/Buttons/js/dataTables.buttons.min"
	}
});

<!-- whiteList.html -->
<script type="text/javascript">
	require(['userDefineRequireConfig.js'],function(){
		require(['whiteList.js'],function(app){
			app.init();
		});
	});
</script>

//whiteList.js
define([
	"datatables"
	],function(){
	//var app ={...};
	//return app;
});

html代码

<!--whiteList.html-->
<!--datatables-->
<table id="WhiteList" class="display" cellspacing="0" width="100%">
	<thead>
		<tr>
			<th width="50%">name</th>
			<th width="50%">remark</th>
		</tr>
	</thead>
</table>

javascript代码

//whiteList.js
var app={
	table:null,
	//初始化页面
	init:function(){
		var _self=this;
		_self.table=this.setPage();
	},
	//初始化datatables
	setPage:function(){
		var _self=this;
		var table=$("#WhiteList").DataTable({
			//定义项
			language:{
				emptyTable:"暂无数据",
				paginate:{
					next:">",
					previous:"<"
				},
				loadingRecords:"加载中..."
			},
			//组件分布位置
			dom:"<<t>ilp>",
			//禁止搜索
			searching:false,
			//开启分页
			paging:true,
			//开启后端分页模式
			serverSide:true,
			autoWidth:false,
			//初始页面尺寸
			pageLength:2,
			//页面尺寸下拉框选项
			lengthMenu:[1,2,10],
			//自定义ajax请求数据
			ajax:function(data,callback,settings){
				//查询参数
				var params=_self.dealParam();
				//length为分页长度
				params.pageSize=data.length;
				//页码，start为开始查询的位置
				params.pageNo=(data.start/data.length)+1;
				$.ajax({
					type:"POST",
					url:"list_whitegroup.json",
					cache:false,
					data:params,
					dataType:"json",
					success:function(result){
						var returnData={};
						//数据记录总数
						returnData.recordsTotal=result.page.totalCount;
						returnData.recordsFiltered=result.page.totalCount;
						var datas=[];
						//自己根据需求封装列数据
						$.each(result.data,function(){
							var _this=this;
							var itemArray={};
							var name={
								headimgurl:_this.headimgurl,
								nickName:_this.nickName
							};
							var remark={
								remark:_this.remark
							};
						});
						returnData.data=datas;
						//调用自带的callback,才能传递数据到列
						callback(returnData);
					}
				});
				
			},
			//列填充数据
			columns:[
				{
					data:"name",
					render:function(data,type,full,meta){
						return "<span class='name'><imgsrc="
						+data.headimgurl+"/>"+data.nickName+"</span>";
					}
				},
				{
					data:"remark",
					render:function(data,type,full,meta){
						return data.remark;
					}
				}
			],
			//禁止排序
			ordering:false
		});
		return table;
	},
	//刷新分页，参数true在第一页刷新，false在当前页刷新
	reloadPage:function(boolean){
		var _self=this;
		if(!!_self.table){
			//刷新方法
			_self.table.draw(boolean);
		}else{
			_self.table=_self.setPage();
		}
	},
	//获取查询参数
	dealParams:function(){
		var params={};
		//code
		return params;
	}
};