jquery dataTable 后台加载数据并分页

深藏阁楼爱情的钟 2022-07-13 06:45 244阅读 0赞

使用 dataTable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。

引用 js文件

<script src="static/ace/js/jquery-2.0.3.min.js"></script>

<script src="static/ace/js/jquery.dataTables.min.js"></script>
    <script src="static/ace/js/jquery.dataTables.bootstrap.js"></script>

添加一个table 标签，<tbody></tbody> 可以不用，可以动态加载

<table id="sample-table-2" class="table table-striped table-bordered table-hover">
    		<thead>
    			<tr>
    				<th class="center"><label>
    						<input type="checkbox" class="ace" />
    						<span class="lbl"></span>
    					</label>
    				</th>
    				<th>名称</th>
    				<th>apiKey</th>
    				<th>secretKey</th>
    				<th><i class="icon-time bigger-110 hidden-480"></i> 创建时间</th>
    				<th class="hidden-480">Status</th>
    				<th>操作</th>
    			</tr>
    		</thead>
    
    	</table>

关键的JS代码：

<script type="text/javascript">
    	jQuery(function($) {
    
    		//初始化table
    		var oTable1 = $('#sample-table-2')
    				.dataTable(
    						{
    							"bPaginate" : true,//分页工具条显示
    							//"sPaginationType" : "full_numbers",//分页工具条样式
    							"bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
    							"bScrollCollapse" : true, //当显示的数据不足以支撑表格的默认的高度
    							"bLengthChange" : true, //每页显示的记录数
    							"bFilter" : false, //搜索栏
    							"bSort" : true, //是否支持排序功能
    							"bInfo" : true, //显示表格信息
    							"bAutoWidth" : true, //自适应宽度
    							"bJQueryUI" : false,//是否开启主题
    							"bDestroy" : true,
    							"bProcessing" : true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
    							"bServerSide" : true,//服务器处理分页，默认是false，需要服务器处理，必须true
    							"sAjaxDataProp" : "aData",//是服务器分页的标志，必须有 
    							"sAjaxSource" : "${basePath}pushEntity/getTableData",//通过ajax实现分页的url路径。  
    							"aoColumns" : [//初始化要显示的列
    									{
    										"mDataProp" : "id",//获取列数据，跟服务器返回字段一致
    										"sClass" : "center",//显示样式
    										"mRender" : function(data, type, full) {//返回自定义的样式
    											return "<label><input type='checkbox' class='ace' /><span class='lbl'></span></label>"
    										}
    									},
    									{
    										"mDataProp" : "appName"
    									},
    									{
    										"mDataProp" : "apiKey"
    									},
    									{
    										"mDataProp" : "secretKey"
    									},
    									{
    										"mDataProp" : "createTime",
    										"mRender" : function(data, type, full) {
    											return new Date(data)//处理时间显示
    											.toLocaleString();
    										}
    									},
    									{
    										"mDataProp" : "createTime",
    										"mRender" : function(data, type, full) {
    											return "<span class='label label-sm label-info arrowed arrowed-righ'>Sold</span>"
    										}
    									},
    									{
    										"mDataProp" : "createTime",
    										"mRender" : function(data, type, full) {
    											return "<div class='visible-md visible-lg hidden-sm hidden-xs action-buttons'><a class='blue' href='#'><i class='icon-zoom-in bigger-130'></i></a><a class='green' href='#'><i class='icon-pencil bigger-130'></i></a><a class='red' href='#'><i class='icon-trash bigger-130'></i></a></div>"
    										}
    									} ],
    							"aoColumnDefs" : [ {//用来设置列一些特殊列的属性
    								"bSortable" : false,
    								"aTargets" : [ 0 ]
    							//第一列不排序
    							}, {
    								"bSortable" : false,
    								"aTargets" : [ 5 ]
    							}, {
    								"bSortable" : false,
    								"aTargets" : [ 6 ]
    							} ],
    							"oLanguage" : {//语言设置
    								"sProcessing" : "处理中...",
    								"sLengthMenu" : "显示 _MENU_ 项结果",
    								"sZeroRecords" : "没有匹配结果",
    								"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
    								"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
    								"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
    								"sInfoPostFix" : "",
    								"sSearch" : "搜索:",
    								"sUrl" : "",
    								"sEmptyTable" : "表中数据为空",
    								"sLoadingRecords" : "载入中...",
    								"sInfoThousands" : ",",
    								"oPaginate" : {
    									"sFirst" : "首页",
    									"sPrevious" : "上页",
    									"sNext" : "下页",
    									"sLast" : "末页"
    								},
    								"oAria" : {
    									"sSortAscending" : ": 以升序排列此列",
    									"sSortDescending" : ": 以降序排列此列"
    								}
    							}
    						});
    
    		//全选
    		$('table th input:checkbox').on(
    				'click',
    				function() {
    					var that = this;
    					$(this).closest('table').find(
    							'tr > td:first-child input:checkbox').each(
    							function() {
    								this.checked = that.checked;
    								$(this).closest('tr').toggleClass('selected');
    							});
    
    				});
    
    	});
    </script>

后台代码：

// 获取前端过来的参数,下面三个参数是 dataTable默认的，不要随便更改
    		Integer sEcho = Integer.valueOf(params.get("sEcho"));// 记录操作的次数 每次加1
    		Integer iDisplayStart = Integer.valueOf(params.get("iDisplayStart"));// 起始
    		Integer iDisplayLength = Integer.valueOf(params.get("iDisplayLength"));// 每页显示的size
    
    		Map<String, Object> map = new HashMap<String, Object>();
    		try {
    			// 查询数据,分页的话我这边使用的是 PageHelper，这边不介绍了
    			PagedResult<PushEntity> list = pushEntityService.findByUserId(
    					pushUser.getId(), iDisplayStart, iDisplayLength);
    
    			// 为操作次数加1，必须这样做
    			int initEcho = sEcho + 1;

//返回参数也是固定的
    			map.put("sEcho", initEcho);
    			map.put("iTotalRecords", list.getTotal());//数据总条数
    			map.put("iTotalDisplayRecords", list.getTotal());//显示的条数
    			map.put("aData", list.getDataList());//数据集合
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    
    		return map;

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery中实现，datatable后台数据获取与前端分页展示

*1、依赖的插件和包文件**  <link rel="stylesheet" type="t...

朴灿烈づ我的快乐病毒、/ 2024年04月17日 14:17/ 0 赞/ 62 阅读

相关 DataTable异步加载数据并刷新

在工作中遇到这样的情况，使用DataTable填充数据（场景不相同）： ![在这里插入图片描述][20201117112007482.jpeg_pic_center]

喜欢ヅ旅行/ 2022年12月22日 00:52/ 0 赞/ 177 阅读

相关 easyui datagrid 动态列和前端分页，以及加载Datatable

项目中用到一个执行SQL，展示结果的功能。所以需要动态改变datagrid的列，最好是使用后台分页，但没找到方法，所以使用了前端分页。 ![29100925-5b256d69

傷城~/ 2022年09月18日 01:47/ 0 赞/ 315 阅读

相关滚动条加载分页数据

<div id="listBody"> </div> listBody 数据外最大的盒子 data(){ return{ page: {

亦凉/ 2022年09月04日 11:56/ 0 赞/ 315 阅读

相关 ListView分页加载

技术要点：源码地址：http://download.csdn.net/detail/anlidengshiwei/8576857[点击打开链接][Link 1] 1、对于

深碍√TFBOYSˉ_/ 2022年08月07日 12:38/ 0 赞/ 239 阅读

相关 jquery dataTable 后台加载数据并分页

使用 dataTable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。引用 js文件 <scr

深藏阁楼爱情的钟/ 2022年07月13日 06:45/ 0 赞/ 245 阅读

相关 easyui datagrid 动态列和前端分页，以及加载Datatable

项目中用到一个执行SQL，展示结果的功能。所以需要动态改变datagrid的列，最好是使用后台分页，但没找到方法，所以使用了前端分页。 ![29100925-5b256d69

淩亂°似流年/ 2022年04月14日 06:29/ 0 赞/ 534 阅读

相关 Datatables学习（三）后台分页 + 条件查询

前两讲谈了 datatables 的基本用法，以及使用 ajax 获取数据。这一讲介绍 ajax 获取数据，对接后台服务器端分页查询，及条件查询本文后台使用 springb

ゝ一纸荒年。/ 2022年02月22日 02:13/ 0 赞/ 768 阅读

相关使用jquery.DataTable.js 展示数据，并进行后台分页。

话不多说，直接上干货。。要使用jquery.DataTable展现数据，比如引入jquery.js，jquery.DataTable.js，如果这个不会，建议从入门到放弃。

迈不过友情╰/ 2021年09月20日 02:42/ 0 赞/ 763 阅读

相关使用jquery.DataTable.js 展示数据，并进行后台分页。

话不多说，直接上干货。。要使用jquery.DataTable展现数据，比如引入jquery.js，jquery.DataTable.js，如果这个不会，建议从入门到放弃。

￡神魔★判官ぃ/ 2021年09月15日 03:50/ 0 赞/ 344 阅读