bootstrap table服務(wù)端實(shí)現(xiàn)分頁效果
更新時間：2017年08月10日 11:19:25 作者：starkfang
這篇文章主要為大家詳細(xì)介紹了bootstrap table服務(wù)端實(shí)現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
實(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="編號">
<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ù)器請求方式
contentType : "application/x-www-form-urlencoded", // 如果是post必須定義
url : '/bootstrap_table_demo/findbyitem', // 請求url
cache : false, // 是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個屬性（*）
striped : true, // 隔行變色
dataType : "json", // 數(shù)據(jù)類型
pagination : true, // 是否啟用分頁
showPaginationSwitch : false, // 是否顯示 數(shù)據(jù)條數(shù)選擇框
pageSize : 10, // 每頁的記錄行數(shù)（*）
pageNumber : 1, // table初始化時顯示的頁數(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', // 工具欄對齊方式
queryParams : queryParams, // 請求參數(shù)，這個關(guān)系到后續(xù)用到的異步刷新
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));
}
} ],
});
}
// 分頁查詢參數(shù)，是以鍵值對的形式設(shè)置的
function queryParams(params) {
return {
name : $('#eventqueryform input[name=\'name\']').val(), // 請求時向服務(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();
//對象轉(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 ";
// 動態(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ù)，注意，也需要添加動態(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ù)庫工具類
/**
* 數(shù)據(jù)庫工具類
*
* @author way
*
*/
public class DButil {
/**
* 連接數(shù)據(jù)庫
*
*/
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ù)庫
*
* @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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- bootstrap table 服務(wù)器端分頁例子分享
- 第一次動手實(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)文章
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下來通過本文給大家介紹BootStrap 附加導(dǎo)航組件的知識，感興趣的朋友一起學(xué)習(xí)吧2016-07-07
JS常見簡單正則表達(dá)式驗(yàn)證功能小結(jié)【手機(jī),地址,企業(yè)稅號,金額,身份證等】
這篇文章主要介紹了JS常見簡單正則表達(dá)式驗(yàn)證功能,結(jié)合實(shí)例形式總結(jié)分析了JS針對手機(jī),地址,企業(yè)稅號,金額,身份證等的常見驗(yàn)證技巧,需要的朋友可以參考下2017-01-01
js實(shí)現(xiàn)日期天數(shù)、時分秒的倒計(jì)時完整代碼
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)日期天數(shù)、時分秒的倒計(jì)時的相關(guān)資料,實(shí)現(xiàn)倒計(jì)時功能首先是得到目標(biāo)時間,然后用當(dāng)前時間減去目標(biāo)時間,最后將時間差傳化為天數(shù)、時、分、秒,需要的朋友可以參考下2023-11-11
前端圖片懶加載(lazyload)的實(shí)現(xiàn)方法(提高用戶體驗(yàn))
圖片懶加載又稱圖片延時加載、惰性加載，即在用戶需要使用圖片的時候加載，這樣可以減少請求，節(jié)省帶寬，提高頁面加載速度，相對的，也能減少服務(wù)器壓力,下面通過本文給大家分享圖片懶加載lazyload的實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2017-08-08
這篇文章主要介紹了JS使用for in有序獲取對象數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
顏色選擇器 Color Picker,IE,Firefox,Opera,Safar
顏色選擇器 Color Picker，需要的朋友可以參考下。2010-11-11
js實(shí)現(xiàn)當(dāng)鼠標(biāo)移到表格上時顯示這一格全部內(nèi)容的代碼
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)當(dāng)鼠標(biāo)移到表格上時顯示這一格全部內(nèi)容的代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能
本文主要介紹了Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能的代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
全面兼容的javascript時間格式化函數(shù)(比較實(shí)用)
這篇文章主要介紹了全面兼容比較實(shí)用的javascript時間格式化函數(shù),需要的朋友可以參考下2014-05-05
js實(shí)現(xiàn)數(shù)字遞增特效【仿支付寶我的財(cái)富】
本篇文章主要介紹了js實(shí)現(xiàn)仿支付寶我的財(cái)富里的數(shù)字遞增特效，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05