jquery.dataTables学习

最新推荐文章于 2019-12-16 10:33:16 发布

god_wot

最新推荐文章于 2019-12-16 10:33:16 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/god_wot/article/details/47042283

版权

版本：DataTables-1.10.7

代码如下：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jquery.dataTables学习</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./resources/css/bootstrap.min.css">
<link rel="stylesheet" href="./resources/css/dataTables.bootstrap.css">
<script src="./resources/js/vendor/jquery-1.11.3.min.js"></script>
<script src="./resources/js/vendor/jquery.dataTables.js"></script>
<script src="./resources/js/vendor/dataTables.bootstrap.js"></script>
<script src="./resources/js/vendor/json2.js"></script>
<!-- bootstrap -->
<script src="./resources/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		
		$.extend($.fn.dataTable.defaults, {
			searching : false,
			ordering : false,
			pagingType: "simple_numbers"
		});

		var oTable = $('#table_id').DataTable({
			//"dom": 'til<p>',
			"paging" : true,
			"searchable":false,
			processing : true,
			serverSide : true,
			language : {
				"search":"检索",
				emptyTable : "没有数据",
				"scrollX":"100%",
				loadingRecords : "加载中...",
				processing : "查询中...",
				lengthMenu : "每页 _MENU_ 条",
				zeroRecords : "没有数据",
				info : "第 _PAGE_ 页  / 共 _PAGES_ 页",
				infoEmpty : "没有数据",
				infoFiltered : "(过滤总件数 _MAX_ 条)"
			},
			columns : [ {
				"data" : "checkbox","class": "center","defaultContent":" "
			},{
				"data" : "id","class": "center"
			}, {
				"data" : "name","class": "center"
			}, {
				"data" : "price","class": "center"
			}, {
				"data" : "quantity","class": "center"
			}, {
				"data" : "status","class": "center"
			} ],
			columnDefs : [{
				targets: [6],
				render:function(data,type,full){
					var s = "";
					s += '<td class="center"><a class="btn btn-success" href="#">';
					s += '<i class="glyphicon glyphicon-zoom-in icon-white"></i>';
					s += ' View</a>';
					s += ' </td>';
					return s;
				}
				
			}],
			ajax : {
				url : "/get_goods_list_page",
				type : "POST",
				contentType : "application/json",
				dataType : "json",
				data : function(d) {
					//console.log(JSON.stringify(d));
					var p = {};
					p.pageSize = d.length;
					p.pageNo = d.start/d.length + 1;
					p.draw = d.draw;
					p.name = $("#goodsName").val();
					
					var jsonParam = JSON.stringify(p);
					console.log(jsonParam);
					return jsonParam;
				},
				"error":function(data){
					alert(data);
				}
				
			},
			rowCallback:function(row, data, displayIndex, displayIndexFull ){
				if(data.status ==1){
					 $('td:eq(5)', row).html("未审核");
				}else if(data.status ==2){
					 $('td:eq(5)', row).html("已审核");
				}
				$('td:eq(0)',row).html('<input type="checkbox" name="checkbox" value="' + data.id + '">');
				return row;
			}

		});
		
		$("#btn_query").click(function(){
			oTable.draw();
			
		});
		

	});
</script>
</head>
<body>
<div class="container">
	<br>
	<div class="row">
		<div class="col-md-12">
			<form class="form-inline">
				<div class="form-group">
					<label for="">商品名称：</label> <input type="text" class="form-control"
						id="goodsName" name="goodsName">
				</div>
				<div class="form-group">
					<button type="button" id="btn_query" class="btn btn-default">查询</button>
				</div>
			</form>
		</div>
	</div>
		
	<br>
	<div class="row">
		<div class="col-md-12">
			<table id="table_id" class="table table-striped table-bordered bootstrap-datatable datatable responsive">
				<thead>
					<tr>
						<th></th>
						<th>ID</th>
						<th>商品名称</th>
						<th>单价</th>
						<th>数量</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</div>
</body>
</html>

效果图：

请求参数格式：

{"pageSize":2,"pageNo":1,"draw":1}

响应参数格式：

{
	"status": "0",
	"draw": 1,
	"recordsTotal": 14,
	"recordsFiltered": 14,
	"data": [{
		"id": 35,
		"name": "44",
		"description": "44",
		"price": 44.000,
		"quantity": 44,
		"status": 1
	},
	{
		"id": 34,
		"name": "234",
		"description": "345435",
		"price": 35345.000,
		"quantity": 34535,
		"status": 1
	}]
}