您的位置：首页 > Web前端 > BootStrap

bootstrap-table 分页

2017-09-20 19:48 411 查看

页面：

1、页面代码jsp：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>content</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-table.min.css">
<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
$(function() {
$('#tab').bootstrapTable({
url:"listContent",//要请求数据的文件路径
method: 'post',
contentType: "application/x-www-form-urlencoded",
height: $(window).height() - 200,
locale:'zh-CN',//中文支持
queryParams:queryParams,//请求服务器时所传的参数
sidePagination:'server',//指定服务器端分页
pagination: true,//是否开启分页（*）
pageNumber:1,//初始化加载第一页，默认第一页
pageSize:3,//单页记录数
pageList:[1,3,5],//分页步进值
columns:[
{
title:'标题',
field:'title'
},
{
title:'作者',
field:'author'
},
{
title:'时间',
field:'createTime',
sortable:true
}
]
});
});
//请求服务数据时所传参数
function queryParams(params){
return{
page:params.offset/params.limit+1,//第几页
rows: params.limit,//每页多少条
title:$('#title').val()
}
}
//搜索
function search(){
$('#tab').bootstrapTable('refresh', {url: 'listContent',pageNumber:1,pageSize:3});
}
</script>
</head>

<body>
<div class="form-inline" style="text-align:right; margin-top:15px;">
<div class="form-group">
<span>标题：</span>
<input id="title" class="form-control">
</div>
<button class="btn btn-default" onclick="search()">搜索</button>
</div>
<br/>
<table id="tab" class="table table-hover"></table>
</body>
</html>2、后台代码Controller：
/**
* 查询信息列表
* @method: listContent() -by fjt
* @TODO:
* @param page
* @param rows
* @param title
* @param res
* @throws Exception void
*/
@RequestMapping("listContent")
public void listContent(Integer page,Integer rows,String title,HttpServletResponse res) throws Exception{
res.setContentType("text/html;charset=utf-8");
List<Content> cList = new ArrayList<Content>();
Integer count = contentService.count(title);
if (count > 0) {
cList = contentService.list(title, page, rows);
}
JSONObject jsonObject = new JSONObject();
jsonObject.accumulate("total", count);
jsonObject.accumulate("rows", cList);
PrintWriter out=res.getWriter();
out.println(jsonObject);
out.flush();
out.close();
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航