datatables

最新推荐文章于 2023-10-28 17:58:43 发布

Mh_ui

最新推荐文章于 2023-10-28 17:58:43 发布

阅读量3.9k

点赞数 1

文章标签： datatables 插件分页

本文链接：https://blog.csdn.net/Mh_ui/article/details/75220298

版权

datatables ：

今天遇到了分页查询的样式显示不出来

报错Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

找了半天原因，原来是用el表达式放值时，<c:if>判断<td>的条件，出现同一th对应多个td，查阅之后知道datatables不支持表头对应多个td.

解决：<td>里面进行<c:if>判断

"bStateSave":true,（刷新保存在当前分页上）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>page</title>
		<link rel="stylesheet" type="text/css" href="datatables/css/jquery.dataTables.min.css"/>
		<link rel="stylesheet" type="text/css" href="datatables/css/buttons.dataTables.min.css"/>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="datatables/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="datatables/js/dataTables.buttons.min.js"></script>
		<script type="text/javascript" src="datatables/js/jszip.min.js"></script>
		<script type="text/javascript" src="datatables/js/buttons.html5.min.js"></script>
	</head>
	<body>
		<input type="text" id="uername"/><button οnclick="seaRch()">查询</button>
		<table id="table_id_example" class="layui-table display nowrap" width="100%">
			<thead>
				<tr>
					<th width="8%">订单号</th>
					<th width="8%">用户ID</th>
					<th width="8%">商品名</th>
					<th width="8%">发放方式</th>
					<th width="8%">购买数量</th>
					<th width="8%">状态</th>
					<th width="8%">兑换时间</th>
					<th width="8%">联系人</th>
					<th width="8%">手机号</th>
					<th width="9%">地址</th>
					<th width="8%">兑换状态</th>
					<th width="9%">功能</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td colspan="12" align="center">
						<div id="div_pager"></div>
					</td>
				</tr>
			</tfoot>
		</table>
	</body>
	<script type="text/javascript">
		var table
		$(document).ready(function(){
			/*表格排序，分页*/
			table=$('#table_id_example').DataTable({
		       "dom": 'Bfrtip',
		       "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ,1] }],//指定那几列不可以排序   
		       /*  "aaSorting": [[ 4, "desc" ]]  , */  //默认按那几列排序
		       "columnDefs":[{ "targets":[0],"searchable":false}], //设置第一列不参与搜索
		       "serverSide":true,			
		       "ajax":{
			       	"url":"js/data.json",
			       	"type":"get",
			        "data":function(d){//添加额外的数据传给后台
			        	d.uername=$("#uername").val();
			        }
		        },
		       "columns":[
		        	{"data":"order_number"},
		        	{"data":"user_id"},
		        	{"data":"name"},
		        	{"data":"grand_type"},
		        	{"data":"playernumlimit"},
		        	{"data":"exchange_time"},
		        	{"data":"contacts"},
		        	{"data":"phone",
		        		render:function(data,type,row,meta){
			        	 	return '<a href="getPlayers?user_id='+row.user_id+'">'+data+'</a>';
						 }
		        	},
		        	{"data":"address"},
		        	{"data":"state"},
		        	{"data":"exchange_status",
			        	render:function(data,type,row,meta){
			        	 	if(data=="未审核"){
			        	 		return '<span style="color:green">'+data+'</span>';
			        	 	}else if(data=="已审核"){
								return '<span style="color:red">'+data+'</span>';
		                    }
						 }
		        	},
		        	{"data":null,
			        	render: function(data, type, row, meta) {
		                    if(row.exchange_status=='未审核'){
	                			return '<a class="b" href="#" style="color: blue" οnclick="okAudits("'+row.order_number+'",1)">确认审核</a><a href="#" class="bb" style="color: blue" οnclick="okAudit("'+row.order_number+'",0)">取消审核</a>';
		                	}else if(row.exchange_status=='已审核'){
		                		return '<a href="#" style="color: blue" οnclick="okAudit("'+row.order_number+'",1)">确认兑换</a><a href="#" style="color: blue" οnclick="okAudit("'+row.order_number+'",0)">取消兑换</a>';
		                	}
	                	}
		        	}
	            ], 
		       "bStateSave":true,//跳转回来还在当前页
		       "paging":true,
		       "searching":true,
		       "responsive": true,
		       "bLengthChange": true,
		       "processing":true,		       
		       "sPaginationType": "full_numbers",
		       "lengthMenu": [[10, 20, 30, 50,-1], [10, 20, 30,50, "所有"]],
		       "sDom": '<"top"fl>rt<"bottom"ip><"clear">',//控制元素的位置
		       "oLanguage": {
		            "sProcessing": "努力加载数据中.",
		            "sLengthMenu": "每页显示 _MENU_ 条记录",
		            "sZeroRecords": "抱歉， 没有找到",
		            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
		            "sInfoEmpty": "没有数据",
		            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
		            "sZeroRecords": "没有检索到数据",
		            "sSearch": "模糊查询:  ",
		            "oPaginate": {
		                "sFirst": "首页",
		                "sPrevious": "前一页",
		                "sNext": "后一页",
		                "sLast": "尾页"
		            }
		        }  
		   });
		   
		   
		    
		   $('#table_id_example tbody').on( 'click', '.b', function () {	       
		        var data = table.row( $(this).parents('tr') ).data();
        		alert(data.order_number);
        		alert("您确定要确认审核吗？");
	    	});
	    	$('#table_id_example tbody').on( 'click', '.bb', function () {	       
		        var data = table.row( $(this).parents('tr') ).data();
        		alert("您确定要取消审核吗？"+data.order_number);
	    	}); 
    	})
		
		function seaRch(){
			table.ajax.reload();
		}
	</script>
</html>

{
	  "draw": 6,
	  "recordsTotal": 60,
	  "recordsFiltered": 60,
	  "data": [
	    {
	      "order_number": "hh",
	      "user_id": "Flynn",
	      "name": "Support Lead",	      
	      "playernumlimit": "3rd Mar 13",
	      "grand_type": "Edinburgh",
	      "exchange_time": "$342,000",
	      "state":"aa",
	      "contacts":"bb",
	      "phone":"12121",
	      "exchange_status":"未审核",
	      "address":"vbbbb"
	    },,,,]
}