1. 程式人生 > >bootstrap-table分頁小結

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的介紹中,我們已經實現了在前端頁面請