bootstrap-table分頁小結
1.bootstrap-table使用後臺分頁時,請求方式為post的時候,必須新增contentType: “application/x-www-form-urlencoded”,引數,get請求時可以不需要;
2.注意controller介面的引數要與之對應,設定queryParamsType
queryParamsType:”, //預設值為 ‘limit’ ,在預設情況下 傳給服務端的引數為:offset,limit,sort
// 設定為 ” 在這種情況下傳給伺服器的引數為:pageSize,pageNumber
3.bootstrap-table後臺需要讀total(總記錄數)和rows(詳細資料),所以最好自己組裝一個PageBean進行封裝,裡面包含total和rows屬性。
完整程式碼如下:
<!--列表展示-->
<div class="table-responsive" id="listDiv">
<table class="table table-striped table-hover" id="userTable">
</table>
</div>
var urlStr = '/user-web/user/getUserByPage.do';
$('#userTable').bootstrapTable({
method: 'get', //請求方式(*)
//contentType: "application/x-www-form-urlencoded",
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
pagination: true, //是否顯示分頁(*)
sortable: false , //是否啟用排序
sortOrder: "asc", //排序方式
queryParamsType:'', //預設值為 'limit' ,在預設情況下 傳給服務端的引數為:offset,limit,sort
// 設定為 '' 在這種情況下傳給伺服器的引數為:pageSize,pageNumber
queryParams: function queryParams(params) {
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize
};
return param;
},
sidePagination: "server", //分頁方式:client客戶端分頁,server服務端分頁(*)
pageNumber:1, //初始化載入第一頁,預設第一頁
pageSize: 5, //每頁的記錄行數(*)
pageList: [5, 10, 25], //可供選擇的每頁的行數(*)
strictSearch: true,
clickToSelect: true, //是否啟用點選選中行
height: 460, //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度
uniqueId: "id", //每一行的唯一標識,一般為主鍵列
cardView: false, //是否顯示詳細檢視
detailView: false, //是否顯示父子表
url: urlStr, //請求後臺的URL(*)
columns: [{
checkbox : true
}, {
field: 'id',
title: '學號'
}, {
field: 'name',
title: '姓名'
}, {
field: 'gender',
title: '性別'
}, {
field: 'age',
title: '年齡'
}, {
field: 'description',
title: '描述'
}
]
});
controller:
@RequestMapping(value = "/getUserByPage", method = RequestMethod.GET)
@ResponseBody
public PageBean<UserDto> getUserByPage(Integer pageSize, Integer pageNumber) throws Exception {
System.out.println("--------->>>>>" + pageSize + pageNumber);
return userService.getUserByPage(pageSize, pageNumber);
}
service和dao我就不再贅述了,sql語句為:
select * from user limit offset, pageSize
offset = (pageNumber-1)*pageSize
自己組裝的pageBean.java(省略get和set方法)
public class PageBean<T> implements Serializable {
private static final long serialVersionUID = 1L;
private int pageSize;
private int pageNum;
private int total; //不能變
private int offset;
private List<T> rows; //不能變
}
相關推薦
bootstrap-table分頁小結
1.bootstrap-table使用後臺分頁時,請求方式為post的時候,必須新增contentType: “application/x-www-form-urlencoded”,引數,get請求時可以不需要; 2.注意controller介面的引數要與之對
bootstrap-table分頁數據前臺不顯示
ams class 記錄 pagelist str scrip ole 等待 loop 問題:後臺返回數據{"total":52,"rows":[{"ztname":"2007年新會計準則科目(李相)","ztid":"003bf550-afa5-47b2-aa43-2e1
bootstrap table 分頁只顯示分頁不顯示總頁數等數據
分頁 總頁數 ati pull bsp hal AI pla blog 搜了下沒找到解決方案,就用CSS來解決了。 把paginationDetailHAlign:"right",使pagination-detail的class為.pull-right.paginatio
bootstrap table 分頁例子
頁面js: var $table=$("#table4"); function queryParamsForHandover(params){var nparams={"pagesize":5,"pageno": (params.offset/5)+1};return nparams; } /*
基於bootstrap table分頁資料及行內編輯和匯出資料(一)
第一步,匯入相應的css和js檔案 <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <!-----swich按鈕需要的css檔案--> <
Bootstrap Table分頁重新整理,使formatter的內容無法儲存解決方法
由於專案需要,需要運用Bootstrap Table在最後一列渲染一個input框填寫資訊! 效果是每列填寫後,點選分頁,或搜尋時使資料保留,但是由於Bootstrap Table每次進行搜尋或者分頁會重新formatter, 導致資料每次都會消失,我想到的解決方法,是通過每次文字框輸
bootstrap-table分頁跳到指定頁面下拉框
一、前言 bootstrap-table是一款表格外掛,他能快速的將資料用表格的形式展示,還包括了搜尋、排序、分頁等功能。最近在一個專案中開始使用它,發現其中分頁沒有直接跳轉指定頁面的功能,
Bootstrap Table分頁例子
html <div style="width:95%;float:left;" > --> <table class="rl-page-table ui celled structured table span11" table
Bootstrap-table分頁+彙總統計
特別說明 使用Bootstrap-table分頁和彙總統計! 我是自己模擬的JSON資料,用data接受,如果是從後臺url介面拿的的資料請用url接受 設定bootstrapTable的js中 showFooter:true,這樣才能顯示錶格底部彙總欄 在colum
mybatis pagehelp分頁 Springmvc+Mybatis+pagehelper5.1.2+bootstrap table分頁和分頁查詢
1.修改Mybatis配置檔案 <!-- MyBatis配置 --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
bootstrap-table 分頁,超細緻!新手寫的個人的看法和理解。
我最近也是剛剛開始寫部落格,目的就是記錄給自己看的。 bootstrap-table 分頁 無意是挺煩的。 網上也有,但是不是那麼簡單。其實我就是一個新人。我也看不懂他們寫的。 <table data-toggle="table" data-mobile-respon
bootstrap-table分頁模板和獲取表中的ID
1.dao層 MyBatis對映 mapper.xml中 <select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap">
Angularjs+Bootstrap實現分頁指令
效果圖 博客 要求 config 大小 cti 說明 cal 自己 本插件的開發目的主要給前端同學使用,本人是專註於後臺開發的,對css樣式不熟悉,但逼於前端要求做一個共公組件方便日常開發,所以這個插件在樣式上可能不適合大部分人,喜歡的拿走吧,不喜歡的也請別噴。 一
bootstrap-paginator分頁示例 源碼 MVC
jquer inittab 加載 rbo 創建 etime tps name item 準備 1.數據:bootstrap包(含分頁插件bootstrap-paginator.js) 2.技術方案:ajax動態加載分頁、部分視圖、BLL取數 代碼 模板頁 @{
ssm整合bootstrap之分頁
java ssm pageHelper 分頁 bootstrap 分頁是我們經常會碰到的需求之一,今天我們就使用企業中很常用的mybatis分頁插件pageHelper來給大家做一個ssm整合bootstrap分頁的案例先看效果圖:一:建立數據庫student:學生表student年級表g
Bootstrap table 跨頁全選
AR Nid size ret 裏的 true cti reat return 此代碼是針對於bootstrap table中分頁的跨頁全選。 以下是整個bootstrap的定義 <script type="text/javascript"
Bootstrap 路徑分頁標簽和徽章組件
bootstrap一.路徑組件路徑組件也叫做面包屑導航。//面包屑導航<ol class="breadcrumb"><li><a href="#">首頁</a></li><li><a href
Laravel 5+ Bootstrap 4 分頁器
最近的project裡,發現需要修改Laravel自帶的Bootstrap 4分頁器。要使用自帶的BS4分頁,我們需要將分頁器模板匯出到resources/views/vendor資料夾下: $ php artisan vendor:publish --tag=laravel-pag
關於layui table分頁的實現
這是我做的一個demo 使用layui table 分頁我饒了不少圈子,主要的鍋只能怪自己太懶 先上layui官方文件: 剛開始我忽略了這一句話,我以為layui已經寫好了分頁,只需要我傳入引數就行[手動滑稽] ,所以希望看到這篇帖子的像我一樣的小白,請打消這
bootstarp table -- 分頁資料顯示
在bootstarp table 中,進行資料分頁的顯示,在使用分頁的時候,bootStarp table 提供了兩種方式,在這裡我們介紹 客戶端(client)進行資料的分頁,希望大神能給我留言,指出這兩種方式的區別。 在上一篇bootstarp table的介紹中,我們已經實現了在前端頁面請