在工作中，我们有时候会遇到一些需求实现每次在页面上显示的数据每次都是通过请求数据库端来实现，在不通过上一页，下一页的方式来实现我们要展示的数据，通过js请求每次加载10条或者任意数量的数据。
代码展示部分
//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，所以一般情况下需要设置一下这个属性（*）
pagination: false, //是否显示分页（*）
queryParamsType:'limit',//查询参数组织方式
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
//
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//
height: 300, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
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: '上传日期'
}]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset //页码
};
return temp;
};
return oTableInit;
};
在jsp页面添加一个<button id=”xxxx”>,用来实现控制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请求获取参数
@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();
}