bootstrap table服務(wù)端實(shí)現(xiàn)分頁效果
更新時(shí)間：2017年08月10日 11:19:25 作者：starkfang
這篇文章主要為大家詳細(xì)介紹了bootstrap table服務(wù)端實(shí)現(xiàn)分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
實(shí)現(xiàn)bootstrap table服務(wù)端實(shí)現(xiàn)分頁demo，具體內(nèi)容如下
首頁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="編號(hào)">
<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();
// 搜索按鈕觸發(fā)事件
$("#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', // 向服務(wù)器請(qǐng)求方式
contentType : "application/x-www-form-urlencoded", // 如果是post必須定義
url : '/bootstrap_table_demo/findbyitem', // 請(qǐng)求url
cache : false, // 是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
striped : true, // 隔行變色
dataType : "json", // 數(shù)據(jù)類型
pagination : true, // 是否啟用分頁
showPaginationSwitch : false, // 是否顯示 數(shù)據(jù)條數(shù)選擇框
pageSize : 10, // 每頁的記錄行數(shù)（*）
pageNumber : 1, // table初始化時(shí)顯示的頁數(shù)
pageList: [5, 10, 15, 20], //可供選擇的每頁的行數(shù)（*）
search : false, // 不顯示 搜索框
sidePagination : 'server', // 服務(wù)端分頁
classes : 'table table-bordered', // Class樣式
// showRefresh : true, // 顯示刷新按鈕
silent : true, // 必須設(shè)置刷新事件
toolbar : '#toolbar', // 工具欄ID
toolbarAlign : 'right', // 工具欄對(duì)齊方式
queryParams : queryParams, // 請(qǐng)求參數(shù)，這個(gè)關(guān)系到后續(xù)用到的異步刷新
columns : [ {
field : 'seqNo',
title : '編號(hào)',
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));
}
} ],
});
}
// 分頁查詢參數(shù)，是以鍵值對(duì)的形式設(shè)置的
function queryParams(params) {
return {
name : $('#eventqueryform input[name=\'name\']').val(), // 請(qǐng)求時(shí)向服務(wù)端傳遞的參數(shù)
seqNo : $('#eventqueryform input[name=\'seqNo\']').val(),
limit : params.limit, // 每頁顯示數(shù)量
offset : params.offset, // SQL語句偏移量
}
}
服務(wù)端 servlet
/**
* Servlet實(shí)現(xiàn)類
*/
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");
// 得到表單數(shù)據(jù)
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();
// 調(diào)用業(yè)務(wù)組件，得到結(jié)果
PageBean<UserBean> pageBean;
try {
pageBean = service.findByItem(offset, limit, seqNo, name);
ObjectMapper oMapper = new ObjectMapper();
//對(duì)象轉(zhuǎn)換為json數(shù)據(jù) ,且返回
oMapper.writeValue(response.getWriter(), pageBean);
} catch (Exception e) {
e.printStackTrace();
}
}
}
分頁封裝類
/**
* 分頁實(shí)體類
*/
public class PageBean<T> {
/** 行實(shí)體類 */
private List<T> rows = new ArrayList<T>();
/** 總條數(shù) */
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;
}
}
獲取用戶實(shí)現(xiàn)類
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 ";
// 動(dòng)態(tài)條件的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);
}
// 得到總記錄數(shù)，注意，也需要添加動(dòng)態(tài)條件
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;
}
}
數(shù)據(jù)庫(kù)工具類
/**
* 數(shù)據(jù)庫(kù)工具類
*
* @author way
*
*/
public class DButil {
/**
* 連接數(shù)據(jù)庫(kù)
*
*/
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;
}
/**
* 關(guān)閉數(shù)據(jù)庫(kù)
*
* @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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- bootstrap table 服務(wù)器端分頁例子分享
- 第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁效果
- Bootstrap table分頁問題匯總
- BootStrap Table 分頁后重新搜索問題的解決辦法
- Bootstrap table兩種分頁示例
- BootStrap中Table分頁插件使用詳解
- 基于SpringMVC+Bootstrap+DataTables實(shí)現(xiàn)表格服務(wù)端分頁、模糊查詢
- Bootstrap Table服務(wù)器分頁與在線編輯應(yīng)用總結(jié)
- 解決JS組件bootstrap table分頁實(shí)現(xiàn)過程中遇到的問題
- bootstrap table分頁模板和獲取表中的ID方法
相關(guān)文章
Three.js實(shí)現(xiàn)繪制字體模型示例代碼
最近在學(xué)習(xí)three.js，這篇文章屬于系列文章，下面這篇文章主要給大家介紹了關(guān)于Three.js如何繪制字體模型的相關(guān)資料，通過文中介紹的方法實(shí)現(xiàn)的效果非常的贊，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
微信小程序 this.triggerEvent()的具體使用
這篇文章主要介紹了微信小程序 this.triggerEvent()的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
創(chuàng)建一個(gè)類Person的簡(jiǎn)單實(shí)例
如何創(chuàng)建一個(gè)類Person？下面小編就為大家?guī)硪黄獎(jiǎng)?chuàng)建一個(gè)類Person的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-05-05
JavaScript字符串_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript中的字符串就是用''或""括起來的字符表示。下面通過本文給大家介紹JavaScript字符串的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-06-06
js實(shí)現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼
js實(shí)現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼，需要的朋友可以參考下。2011-07-07
Webpack打包c(diǎn)ss后z-index被重新計(jì)算的解決方法
這篇文章主要跟大家分享了Webpack打包c(diǎn)ss后z-index被重新計(jì)算的解決方法，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
webpack-cli在webpack打包中的作用小結(jié)
webpack?是打包代碼時(shí)依賴的核心內(nèi)容，而?webpack-cli?是一個(gè)用來在命令行中運(yùn)行?webpack?的工具，那么webpack-cli在webpack打包中的作用是什么，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2022-04-04
基于javascript實(shí)現(xiàn)的搜索時(shí)自動(dòng)提示功能
這篇文章主要介紹了基于javascript實(shí)現(xiàn)的搜索時(shí)自動(dòng)提示功能，非常實(shí)用，推薦給需要的小伙伴參考下。2014-12-12
javascript中全局對(duì)象的isNaN()方法使用介紹
全局對(duì)象的isNaN()方法通常用于檢測(cè) parseFloat() 和 parseInt() 的結(jié)果，下面為大家介紹下其具體的使用，感興趣的朋友可以參考下2013-12-12
使用echarts實(shí)現(xiàn)3d柱狀圖+折線圖
這篇文章主要為大家詳細(xì)介紹了如何使用echarts實(shí)現(xiàn)3d柱狀圖和折線圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解一下2024-12-12