bootstrap-table
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>用户反馈信息</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div style=" 100%">
<table id="table" ></table>
</div>
<script>
$("#table").bootstrapTable({ // 对应table标签的id
url: "/getToothFeedbacks", // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
striped: true, //表格显示条纹，默认为false
pagination: true, // 在表格底部显示分页组件，默认false
pageList: [10], // 设置页面可以显示的数据条数
pageSize: 10, // 页面数据条数
pageNumber: 1, // 首页页码
height:550,
sidePagination: 'server', // 设置为服务器端分页
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
return {
pageSize: params.limit, // 每页要显示的数据条数
offset: params.offset, // 每页显示数据的开始行号
sort: params.sort, // 要排序的字段
sortOrder: params.order, // 排序规则
startTime: $("#sTime").val(),
endTime:$("#eTime").val()
}
},
columns: [
{
title: "手机号",
field: 'mobile',
align:'center',
valign:'center',
200
},
{
title: "用户昵称",
field: 'nickname',
align:'center',
valign:'center',
200
},
{
title: "问题",
field: 'title',
align:'center',
valign:'center',
200
}
]
})
$(function() {
//搜索时的请求参数
$(".search").click(function(){
$('#table').bootstrapTable('refresh', {url:'/getWatchFeedbacks',query: {startTime:startTime,endTime:endTime}});
});
})
</script>
</body>
</html>
返回的格式
{
"total": 3,
"rows": [{
"mobile": "13510122281022",
"nickname": "hhz",
"title": "xxx？"
}, {
"mobile": "15122260042609",
"nickname": "亚历山大",
"title": "蓝牙不能连接"
}, {
"mobile": "15951522216890",
"nickname": "Sean",
"title": "无法连接"
}]
}