bootstrap table服务端实现分页效果
实现bootstrap table服务端实现分页demo，具体内容如下
首页index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" rel="external nofollow" />
<link rel="stylesheet" href="/assets/css/bootstrap-table.min.css" rel="external nofollow" >
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-table.min.js"></script>
<script src="/assets/js/bootstrap-table-zh-CN.min.js"></script>
<script src="/assets/js/index.js"></script>
</head>
<body>
<!--查询窗体-->
<div class="widget-content">
<form method="post" class="form-horizontal" id="eventqueryform">
<input type="text" class="span2" name="seqNo" placeholder="编号">
<input type="text" class="span3" name="name" placeholder="姓名">
<input type="button" class="btn btn-default span1" id="eventquery" value="查询">
</form>
</div>
<div class="widget-content">
<!--工具条-->
<div id="toolbar">
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#add">添加事件</button>
</div>
<table id="eventTable"></table>
</div>
</body>
</html>
index.js
$(function() {
// 初始化表格
initTable();
// 搜索按钮触发事件
$("#eventquery").click(function() {
$('#eventTable').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
// console.log("/program/area/findbyItem?offset="+0+"&"+$("#areaform").serialize())
$('#eventqueryform input[name=\'name\']').val('')
$('#eventqueryform input[name=\'seqNo\']').val('')
});
});
// 表格初始化
function initTable() {
$('#eventTable').bootstrapTable({
method : 'post', // 向服务器请求方式
contentType : "application/x-www-form-urlencoded", // 如果是post必须定义
url : '/bootstrap_table_demo/findbyitem', // 请求url
cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
striped : true, // 隔行变色
dataType : "json", // 数据类型
pagination : true, // 是否启用分页
showPaginationSwitch : false, // 是否显示 数据条数选择框
pageSize : 10, // 每页的记录行数（*）
pageNumber : 1, // table初始化时显示的页数
pageList: [5, 10, 15, 20], //可供选择的每页的行数（*）
search : false, // 不显示 搜索框
sidePagination : 'server', // 服务端分页
classes : 'table table-bordered', // Class样式
// showRefresh : true, // 显示刷新按钮
silent : true, // 必须设置刷新事件
toolbar : '#toolbar', // 工具栏ID
toolbarAlign : 'right', // 工具栏对齐方式
queryParams : queryParams, // 请求参数，这个关系到后续用到的异步刷新
columns : [ {
field : 'seqNo',
title : '编号',
align : 'center'
}, {
field : 'name',
title : '姓名',
align : 'center'
}, {
field : 'sex',
title : '性别',
align : 'center'
}, {
field : 'id',
title : '操作',
align : 'center',
width : '280px',
formatter : function(value, row, index) {
// console.log(JSON.stringify(row));
}
} ],
});
}
// 分页查询参数，是以键值对的形式设置的
function queryParams(params) {
return {
name : $('#eventqueryform input[name=\'name\']').val(), // 请求时向服务端传递的参数
seqNo : $('#eventqueryform input[name=\'seqNo\']').val(),
limit : params.limit, // 每页显示数量
offset : params.offset, // SQL语句偏移量
}
}
服务端 servlet
/**
* Servlet实现类
*/
public class UserFindByItemSetvlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private IUserService service = new UserServiceImpl();
public UserFindByItemSetvlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/json; charset=UTF-8");
// 得到表单数据
int offset = Integer.parseInt(request.getParameter("offset").trim());
int limit = Integer.parseInt(request.getParameter("limit").trim());
String seqNo = request.getParameter("seqNo").trim();
String name = request.getParameter("name").trim();
// 调用业务组件，得到结果
PageBean<UserBean> pageBean;
try {
pageBean = service.findByItem(offset, limit, seqNo, name);
ObjectMapper oMapper = new ObjectMapper();
//对象转换为json数据 ,且返回
oMapper.writeValue(response.getWriter(), pageBean);
} catch (Exception e) {
e.printStackTrace();
}
}
}
分页封装类
/**
* 分页实体类
*/
public class PageBean<T> {
/** 行实体类 */
private List<T> rows = new ArrayList<T>();
/** 总条数 */
private int total;
public PageBean() {
super();
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
}
获取用户实现类
public class UserServiceImpl implements IUserService{
/**
* sql查询语句
*/
public PageBean<UserBean> findByItem(int offset, int limit, String seqNo, String name) {
PageBean<UserBean> cutBean = new PageBean<UserBean>();
// 基本SQL语句
String sql = "SELECT * FROM c_userinfo where 1=1 ";
// 动态条件的SQL语句
String itemSql = "";
if (seqNo != null && seqNo.length() != 0) {
itemSql += "and SeqNo like '%" + seqNo + "%' ";
}
if (name != null && name.length() != 0) {
itemSql += "and Name like '%" + name + "%' ";
}
// 获取sql连接
Connection con = DButil.connect();
PreparedStatement ps = null;
ResultSet rs = null;
try {
ps = con.prepareStatement(sql + itemSql + "limit ?,?");
ps.setInt(1, offset);
ps.setInt(2, limit);
rs = ps.executeQuery();
while (rs.next()) {
UserBean bean = new UserBean();
bean.setSeqNo(rs.getInt("seqNo"));
bean.setName(rs.getString("name"));
bean.setSex(rs.getInt("sex"));
bean.setBirth(rs.getString("birth"));
cutBean.getRows().add(bean);
}
// 得到总记录数，注意，也需要添加动态条件
ps = con.prepareStatement("SELECT count(*) as c FROM c_userinfo where 1=1 " + itemSql);
rs = ps.executeQuery();
if (rs.next()) {
cutBean.setTotal(rs.getInt("c"));
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DButil.close(con);
if (ps != null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
return cutBean;
}
}
数据库工具类
/**
* 数据库工具类
*
* @author way
*
*/
public class DButil {
/**
* 连接数据库
*
*/
public static Connection connect() {
Properties pro = new Properties();
String driver = null;
String url = null;
String username = null;
String password = null;
try {
InputStream is = DButil.class.getClassLoader()
.getResourceAsStream("DB.properties");
pro.load(is);
driver = pro.getProperty("driver");
url = pro.getProperty("url");
username = pro.getProperty("username");
password = pro.getProperty("password");
Class.forName(driver);
Connection conn = DriverManager.getConnection(url, username,
password);
return conn;
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
/**
* 关闭数据库
*
* @param conn
*
*/
public static void close(Connection con) {
if (con != null) {
try {
con.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
DB.properties文件
driver=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/gov_social?useUnicode\=true&characterEncoding\=utf-8 username=root password=root
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务器端取不到form值,querystring没有问题, 但是request.form取不到值 解决:这是ajax的问题,原代码使用原生的ajax. 1可以用读流文件解决.2 如果想用request.form 方式,设置 contentType: "application/x-www-form-
-
Bootstrap table两种分页示例
Bootstrap table服务器端分页和客户端分页,供大家参考,具体内容如下 服务器端分页 注意服务器端数据的返回的格式 [json]必须包含:total节点(总记录数),rows节点(分页后数据) 即:{"total":24,"rows":[-]} $('#test-table').bootstrapTable({ //请求方法 method: 'get', //是否显示行间隔色 striped: true, //是否使用缓存,默认为true,所以一般情况下需
-
解决JS组件bootstrap table分页实现过程中遇到的问题
本文为大家分享了bootstrap-table 分页的问题,供大家参考,具体内容如下 问题1 :服务器端取不到form值,querystring没有问题,但是request.form取不到值 解决:这是ajax的问题,原代码使用原生的ajax. 1可以用读流文件解决.2 如果想用request.form 方式,设置 contentType: "application/x-www-form-urlencoded", 如 $('#tableList').bootstrapTable(
-
bootstrap table 服务器端分页例子分享
1,前台引入所需的js 可以从官网上下载 复制代码 代码如下: function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; $('#tab').bootstrapTable({ method: 'get', //这里要设置为get,不知道为什么 设置post获取不了 url: url, cache: false, height: 400, striped: tru
-
bootstrap table分页模板和获取表中的ID方法
1.dao层 MyBatis映射 mapper.xml中 <select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap"> select * from TB_COMMUNICATION_DEVICE_TBL ORDER BY ${ordername} ${order} </select> mapper.java中 pub
-
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了SpringMVC国际化 效果 DataTable表格 关键字查询 自定义关键字查询,非DataTable Search 代码 HTML代码 查询条件代码 <!-- 查询.添加.批量删除.导出.刷新 --> <div class="row-fluid"> <di
-
BootStrap中Table分页插件使用详解
分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式 引入css和js <!--css样式--> <link href=&qu
-
BootStrap Table 分页后重新搜索问题的解决办法
前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变. 按网上大部分说的:重新设置option就行了 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); 以上是解决不了这个问题. 正确做法是 $("#table").boot
-
第一次动手实现bootstrap table分页效果
先上图吧,这就是bootstrap table分页效果图 上代码(这一部分是工具栏的,还包括slider滑动条) <div class="box-body"> <div class="row"> <div class="form-group col-xs-3" style="width: 432px;"> <label for="SendUser" class=&q
-
Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据的起止时间,查询一定时间范围的数据.在线编辑功能通过扩展Bootstrap Table实现,使用X-editable实现. Bootstrap Table有两种使用方式: 1.对普通的 table 设置 data 属性: 2.通过JavaScript 来启用 Bootstrap Table 插件.