jquery.dataTables学习
版本：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
}]
}