DataTables 我的网盘地址(包括demo):链接:http://pan.baidu.com/s/1chLkUM密码:bejv
这里边只复用插件,其他的都不需要
需要用到的插件:
dataTables.min.css、jquery-2.1.0.min.js
jquery.dataTables.min.js 这些都可以在我的网盘中或这自己下载的插件中找到
Tjxfxx2.js 自己设置
Html中配置index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>信访接口采集</title>
<!-- 静态页面js引用 -->
<script type="text/javascript" src="DataTables-1.10.2/js/jQuery%20v1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.2/css/jquery.dataTables.min.css" media="all" />
<script type="text/javascript" src="DataTables-1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/mjjd/Tjxfxx2.js"></script>
<style type="text/css"> /* 设置表格的css样式 */
.xftb{
width:90%;
height: 40%;
margin:0 auto;
position:relative;
padding-top: 20px;
}
/*设置表格的第一列的宽度*/
.xftb table tbody tr:first-child td:first-child {
width: 400px;
}
</style>
</head>
<body>
<div class="xftb">
<table id="XfbsTable">
<thead>
<tr>
<th>信访标识</th>
<th>采集开始时间</th>
<th>采集结束时间</th>
<th>信访形式代码</th>
<th>信访形式名称</th>
<th>入库状态</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Tjxfxx2.js
var dataObject = [];
$(function() {
getXfbsTable();
});
// 信访数据table
function getXfbsTable() {
dataObject = [];
$.ajax({
type : 'post',
url : '/xfjkcj/getXfbsTable',
dataType : 'json',
async : true,
beforeSend:function(){
$("#loading").show();
},
success : function(datalist) {
dataObject = datalist;
//此处返回的json格式类型是List<Map<String,Object>>
console.log(dataObject);
//目的是为了解决重复加载原数据不改变问题(需要两个DataTable,并且得在第二个添加destroy)
$('#XfbsTable').dataTable({
"bAutoWidth": true, //自动设置宽度
"bScrollCollapse": false, //滚动条关闭
bRetrieve: true,//去掉错误提示
});
$('#XfbsTable').DataTable({
"destroy": true,
"bLengthChange": false, //去掉每页显示多少条数据方法
data:dataObject,
/*给数据添加列*/
columns:[
{data:'xfbs'},
{data:'kssj'},
{data:'jssj'},
{data:'xfxsdm'},
{data:'xfxsmc'},
{data:'state'}
],
/*国际化语言*/
language : {
"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" : ": 以降序排列此列"
}
},
});
},
complete:function(){
$("#loading").hide();
},
error : function(resource) {
console.log("ajax请求出错了");
}
});
}