datatables组件加载数据

最新推荐文章于 2021-08-20 23:40:05 发布

赶路人儿

最新推荐文章于 2021-08-20 23:40:05 发布

阅读量1.9k

点赞数 1

分类专栏： web前端文章标签： datatables

本文链接：https://blog.csdn.net/liuxiao723846/article/details/84842390

版权

web前端专栏收录该内容

294 篇文章 11 订阅

订阅专栏

使用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的数据加载，一个是不分页，一个是分页。

赶路人儿

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
datatables组件加载数据

使用jquery的datatables插件渲染表格组件时，最佳的方法如下：全局定义dataTables对象变量；页面加载时初始化dataTables对象；查询时，使用dataTables对象的api加载数据；示例：&lt;%@ page language="java" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html&gt;&lt;ht...
复制链接

扫一扫