在工作中，我們有時候會遇到一些需求實現(xiàn)每次在頁面上顯示的數(shù)據(jù)每次都是通過請求數(shù)據(jù)庫端來實現(xiàn)，在不通過上一頁，下一頁的方式來實現(xiàn)我們要展示的數(shù)據(jù)，通過js請求每次加載10條或者任意數(shù)量的數(shù)據(jù)。

代碼展示部分

//BootstarbTable
var?TableInit?=?function?()?{
??? var?oTableInit?=?new?Object();
??? //初始化Table

??? oTableInit.Init?=?function?()?{
??????? $('#zjsy').bootstrapTable({
??????????? url:?'/lekg/law/lawcheckoperate/getresentfile',
??????????? method:?'post',??????//請求方式（*）
??????????? contentType : "application/x-www-form-urlencoded",
??????????? id:50,
??????????? striped:?true,??????//是否顯示行間隔色
??????????? cache:?false,??????//是否使用緩存，默認為true，所以一般情況下需要設(shè)置一下這個屬性（*）
??????????? pagination:?false,?????//是否顯示分頁（*）
??????????? queryParamsType:'limit',//查詢參數(shù)組織方式
??????????? sortable:?false,??????//是否啟用排序
??????????? sortOrder:?"asc",?????//排序方式
??????????? queryParams:?oTableInit.queryParams,//傳遞參數(shù)（*）
??????????? sidePagination:?"server",???//分頁方式：client客戶端分頁，server服務端分頁（*）
??????????? pageNumber:1,??????//初始化加載第一頁，默認第一頁
??????????? pageSize:?10,??????//每頁的記錄行數(shù)（*）
??????????? // pageList:?[10,?25,?50,?100],??//可供選擇的每頁的行數(shù)（*）
??????????? search:?false,??????//是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
??????????? strictSearch:?true,
??????????? showColumns:?false,?????//是否顯示所有的列
??????????? showRefresh:?false,?????//是否顯示刷新按鈕
??????????? minimumCountColumns:?2,????//最少允許的列數(shù)
??????????? clickToSelect:?true,????//是否啟用點擊選中行
??????????? // height:?300,??????//行高，如果沒有設(shè)置height屬性，表格自動根據(jù)記錄條數(shù)覺得表格高度
??????????? uniqueId:?"id",??????//每一行的唯一標識，一般為主鍵列
??????????? showToggle:false,?????//是否顯示詳細視圖和列表視圖的切換按鈕
??????????? cardView:?false,?????//是否顯示詳細視圖
??????????? detailView:?false,?????//是否顯示父子表
??????????? columns:?[{
??????????????? title: '序號',
??????????????? field: '',
??????????????? align: 'center',
??????????????? formatter: function (value, row, index) {
??????????????????? return index+1;
??????????????? }
??????????? },?{
??????????????? field:?'lawcheckID',
??????????????? title:?'lawcheckID',
??????????????? visible: false
??????????? },?{
??????????????? field:?'lawname',
??????????????? title:?'文件名稱',
??????????????? formatter : function (value, row, index) {
??????????????????? return "<a href=\"scwj.jsp?LawID='"+row.lawcheckID+"'\">"+value+"</a>";
??????????????? }
??????????? },?{
??????????????? field:?'lfbm',
??????????????? title:?'立法部門'
??????????? },?{
??????????????? field:?'effectlevel',
??????????????? title:?'效力級別'
??????????? },
??????????????? {
??????????????????? field:?'time',
??????????????????? title:?'上傳日期'
??????????????? }]
??????? });
??? };
??? //得到查詢的參數(shù)
??? oTableInit.queryParams?=?function?(params)?{
??????? var?temp?=?{?//這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
??????????? limit:?params.limit,?//頁面大小
??????????? offset:?params.offset?//頁碼
??????? };
??????? return?temp;
??? };
??? return?oTableInit;
};

?

在jsp頁面添加一個<button id=”xxxx”>,用來實現(xiàn)控制js

<button type="button" id="jzgd" class="btn btn-default">加載更多</button>

?

?

$(document).ready(function () {

$(document).ready(function () {
//初始化table #zjsy
var oTable = new TableInit();
oTable.Init();
var pageNumber=1;
$("#jzgd").click(function() {
var? i=0;
i++;
pageNumber=pageNumber+i;

$.ajax({
type: "post",
url: '/lekg/law/lawcheckoperate/getresentfile,
data: {pageNumber : pageNumber},
dataType:"json",
success : function(json) {
$("#zjsy").bootstrapTable('load', json);
}
});

});

//HttpServletRequest請求獲取參數(shù) @Action
public String getResentFile(){
HttpServletRequest request = ActionContext.getActionContext().getHttpServletRequest();

String pageNumber= request.getParameter("pageNumber");
if(pageNumber==null){
String sql = " SELECT c.lawcheckID,c.lawname, e.name as effectlevel,l.jgmc as lfbm,c.lawtime as time from lawcheck c " +
" LEFT JOIN zllaweffectlevel e on c.lawtype=e.id " +
" LEFT JOIN lfjg l on c.lawdeptid=l.unitid " +
" WHERE c.lawstatus = 2 " +
" ORDER BY c.lawtime DESC"+
" LIMIT 0,10";

List<Map<String, Object>> list = jdbcTemplate.queryForList(sql);
JSONArray json = new JSONArray().fromObject(dateFomart(list));
return json.toString();
}
int pageIndex=Integer.parseInt(pageNumber);
int pageSize = pageIndex*10;

String sql = " SELECT c.lawcheckID,c.lawname, e.name as effectlevel,l.jgmc as lfbm,c.lawtime as time from lawcheck c " +
" LEFT JOIN zllaweffectlevel e on c.lawtype=e.id " +
" LEFT JOIN lfjg l on c.lawdeptid=l.unitid " +
" WHERE c.lawstatus = 2 " +
" ORDER BY c.lawtime DESC"+
/*" LIMIT 0,10";*/
" LIMIT "+pageIndex+","+pageSize;
System.out.print(sql);
List<Map<String, Object>> list = jdbcTemplate.queryForList(sql);
JSONArray json = new JSONArray().fromObject(dateFomart(list));
return json.toString();
}

轉(zhuǎn)載于:https://www.cnblogs.com/liushuaibiao/p/9405552.html

總結(jié)

以上是生活随笔為你收集整理的基于BootstarbTable实现加载更多的方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。