datatables组件加载数据

朴灿烈づ我的快乐病毒、 2021-06-24 16:09 405阅读 0赞

使用jquery的datatables插件渲染表格组件时，最佳的方法如下：

*  全局定义dataTables对象变量；
 *  页面加载时初始化dataTables对象；
 *  查询时，使用dataTables对象的api加载数据；

示例：

<%@ page language="java"  pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="UTF-8">
    	<%@ include file="common.jsp" %>
    	<script type="text/javascript" src="<%=basePath %>js/datatables.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="<%=basePath %>css/datatables.min.css" />
    </head>
    
    <body>
    	<div class="text-c" style="padding:9px;height:auto;" align="left">
    		<button name="" id="" class="btn btn-success" type="submit" onclick="gridSearch();">查询</button>
    	</div>
    
    	<div style="width:98%" id="tb1">
    		<table id="dataTableTest" class="table table-border table-bordered table-bg table-hover table-striped table-responsive">
    			<thead>
    				<tr class="text-c">
    					<th>
    						<div style="width:75px">测试1</div>
    					</th>
    					<th>
    						<div style="width:75px">测试2</div>
    					</th>
    					<th>
    						<div style="width:75px">测试3</div>
    					</th>
    				</tr>
    			</thead>
    		</table>
    	</div>
    	<br />
    
    	<div style="width:98%" id="tb2">
    		<table id="dataTableTest1" class="table table-border table-bordered table-bg  table-sort table-responsive">
    			<thead>
    				<tr class="text-c">
    					<th>
    						<div style="width:75px">a1</div>
    					</th>
    					<th>
    						<div style="width:75px">a2</div>
    					</th>
    					<th>
    						<div style="width:75px">a3</div>
    					</th>
    				</tr>
    			</thead>
    			<tbody></tbody>
    		</table>
    	</div>
    	<br>
    	<br>
    
    </body>
    <script>
    	
    
    	var dataTable,dataTable1;
    	$(function () {
    		//初始化dataTables对象
    		dataTable = $("#dataTableTest").DataTable({
    			bFilter: false, //是否启动过滤、搜索功能 
    			bLengthChange: false,//是否显示一个每页长度的选择条（需要分页器支持）
    			bSort: false,//是否启动各个字段的排序功能  
    			bPaginate: false,//是否显示（应用）分页器  
    			bInfo: false,//是否显示页脚信息，DataTables插件左下角显示记录数  
    			stripeClasses: ["table-striped", "even"],// 为奇偶行加上样式，兼容不支持CSS伪类的场合
    			destroy: true,//解决Cannot reinitialise DataTable
    			columns: [
    				{ "data": "rpage", "defaultContent": "", "width": "50%" },
    				{ "data": "cnt", "defaultContent": "", "width": "20%" },
    				{ "data": "stime", "defaultContent": "", "width": "30%" }
    			]
    		});
    		
    		dataTable1 = $("#dataTableTest1").DataTable({
    			processing: true,
    			bFilter: false, //是否启动过滤、搜索功能 
    			bSort: false,//是否启动各个字段的排序功能  
    			bPaginate: true,//是否显示（应用）分页器  
    			iDisplayLength: 500,
    			bLengthChange: false,//是否显示一个每页长度的选择条（需要分页器支持）
    			bInfo: false,//是否显示页脚信息，DataTables插件左下角显示记录数
    			destroy: true,
    			columns: [{ "data": "rpage" },
    			{ "data": "recSource" },
    			{ "data": "contentid" },
    			{ "data": "name" },
    			{ "data": "itemType" },
    			{ "data": "channel" },
    			{ "data": "uploadId" },
    			{ "data": "category" },
    			{ "data": "tag" },
    			{ "data": "stime" },
    			{ "data": "r_eventid", "visible": false }],
    			rowCallback: function (row, aData, index) {
    				$(row).css('background', rowcolourall[aData.colourid]);
    			}
    		});
    	});
    	
    	function gridSearch() {
    		var uid = $("#uid").val();
    		if (uid == "") {
    			$.messager.alert('错误', '请输入正确的uid!', 'error');
    			return;
    		} else {
    			var fid = $("#fid").val();
    			var t1 = $("#t1").val();
    			var t2 = $("#t2").val();
    
    			//drawTableTest不分页
    			var totalUrl = '<%=basePath %>/tm/gridQuery?type=1&uid=' + uid + '&fids=' + fid + '&t1=' + t1 + '&t2=' + t2;
    			$.doAjax({
    				async: false,
    				url: totalUrl,
    				callback: function (_data) {
    					//alert(_data.msg);
    					dataTable.clear();
    					if (_data.code == 'V00000') {
    						dataTable.rows.add(_data.data).draw();  
    					} else {
    						$.messager.alert('提示', _data.msg || '系统故障!', 'error');
    						dataTable.draw();
    						return;
    					}
    				}
    			});
    
    			//drawTableTese1：分页表格
    			var bg = $("#checkbox-bg").is(":checked");
    			if (bg) {
    				var url2 = '<%=basePath %>/tm/gridQueryPaging?type=2&uid=' + uid + '&fids=' + fid + '&t1=' + t1 + '&t2=' + t2;
    				var pageinfo = dataTable1.page.info();
    				//var pageinfo = $('#dataTableTest1').DataTable().page.info();
    				var param = {};
    				param.startIndex = pageinfo.start;//起始位置
    				param.pageSize = pageinfo.length;//一页大小
    				param.page = (pageinfo.start / pageinfo.length) + 1;//当前页码
    				$.doAjax({
    					async: true,
    					data: param,
    					url: url2,
    					maskLoad: true,
    					callback: function (_data) {
    						dataTable1.clear();
    						if (_data.code == 'V00000') {
    							var len = _data.data.pageData.length;
    	
    							var resData = _data.data;
    							var returnData = {};
    							returnData.draw = resData.draw;
    							returnData.recordsTotal = resData.total;
    							returnData.recordsFiltered = resData.total;//后台不实现过滤功能，每次查询均视作全部结果
    							//returnData.data = resData.pageData;
    							returnData.data = [];
    							for (var i = 0; i < resData.pageData.length; i++) {
    								var dat = {};
    								var rpage = resData.pageData[i].rpage + "<br><button id=\"event\">RequestId</button>";
    								dat.rpage = (resData.pageData[i].rpage != null) ? rpage : "";
    								dat.recSource = (resData.pageData[i].recSource != null) ? resData.pageData[i].recSource : "";
    								dat.contentid = (resData.pageData[i].contentid != null) ? resData.pageData[i].contentid : "";
    								returnData.data.push(dat);
    							}
    							for (var i = 0; i < returnData.data.length; i++) {
    								dataTable1.row.add(returnData.data[i]);
    							}
    						} else {
    							$.messager.alert('提示', _data.msg || '系统故障!', 'error');
    							return;
    						}
    						dataTable1.draw();
    					}
    				});
    			} else {
    				$('#dataTableTest1').DataTable().clear().draw();
    			}	
    		}
    	}
    
    </script>
    
    </html>

上面演示了两个dataTables的数据加载，一个是不分页，一个是分页。