Jquery表格插件之DataTable

基本使用格式

曾用过的案例

//直接function的目的是进来即执行	
$(function() {
		oTable = $('#tabOrganization').DataTableInit({
            "bPaginate": false, //开关，是否显示分页器
            "ordering": false, // 禁止排序
            "bAutoWidth" : true,//宽度自适应
            "sAjaxSource" : "请求路径",
            "language" : {//表格信息显示，注意服务端需要result.put("iTotalDisplayRecords", list.size());
            "processing": '<div class="panel-overlay-content unselectable"><span class="panel-overlay-icon text-dark"><i class="fa fa-spinner fa-2x fa-spin"></i></span><h4 class="panel-overlay-title">数据加载中...</h4></div>',
            "lengthMenu": "显示 _MENU_ 项结果",
            "zeroRecords": "没有匹配结果",
            "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "infoFiltered": "(由 _MAX_ 项结果过滤)",
            "infoPostFix": "",
            "search": "搜索:",
            "searchPlaceholder": "搜索...",
            "url": "",
            "emptyTable": "暂无数据",
            "loadingRecords": "载入中...",
            "infoThousands": ",",
            "paginate": {
                "first": "首页",
                "previous": "上页",
                "next": "下页",
                "last": "末页"
			},
			"aoColumnDefs" : [ {
				"aTargets" : [ 0 ],
				"sClass" : "center",
			}, {
				"aTargets" : [ 1 ],
				"sClass" : "center"
			}, {
				"aTargets" : [ 2 ],
				"sClass" : "center"
			}, {
				"aTargets" : [ 3 ],
				"sClass" : "center"
			}, {
				"aTargets" : [ 4 ],
				"sClass" : "center"
			}, {
				"aTargets" : [ 5 ],
			}],
            //这里data不太好理解，我是这么想的：
			"fnServerData" : function(url, data, callback) {
				data = _setSortInfo4Ajax(data, 2, "desc");//暂时不太清楚该设置，初步理解为默认排序
				data.push({
					"name" : "organizationId",
					"value" : ${organizationId}
				});
				$.ajax({
					"type" : "POST",
					"contentType" : "application/json",
					"url" : url,
					"dataType" : "json",
					"data" : JSON.stringify(data),
					"success" : function(response) {
						callback(response);
					}
				});
			}
		});
}

	//自定义事件
	function search() {

		oTable.draw();//自主调用渲染
	}

从服务器端取数据

要指定几个参数：
sAjaxSource：获取数据的url

这样，在DataTables需要数据时会调用jquery的getJSON获取数据，其中url就是sAjaxSource，
同时传递一堆自定义的参数，包括需要显示的起始记录数，需要显示的记录数，列数，排序
列等等，具体可以参看这里http://www.datatables.net/usage/server-side。其中一个比较
特殊的是sEcho，这个参数需要以后原封不动地返回给页面。

DataTables通过fnServerData提供了这样一个接口，fnServerData是与服务器端交换数据时被
调用的函数，默认实现是如上所说的通过getJSON发送请求，然后接收特定格式的json数据（这
个在服务器端处理部分再说）。fnServerData会接到3个参数：
sSource：接收数据的url，就是sAjaxSource中指定的地址
aoData（名称无所谓，只要参数位置对应就好，如上部分代码用data）：DataTables定义的参数，是一个数组，其中每个元素是一个name-value对，(注意DataTables的一系列参数将由它自动生成并加入)如果有额外数据我需要通过

               data.push({
                   "name" : "organizationId",
                   "value" : $("#organizationId").val()
               });

把参数加进去
fnCallback：服务器返回数据后的处理函数，我需要按DataTables期望的格式传入返回数据

分页

1.使用datatable前台分页，需要后台返回全部数据，返回lisit

2.如果是后台分页则后台需要获取分页参数，页面中要加

　　"searchable":true, "bServerSide": true

　　这两个属性，不需要 dataSrc : "" 这个属性

　　返回DataTablePageDto 分页对象，查询的list结果set到分页对象中

Jquery表格插件之DataTable

猜你喜欢