bootstraptable 分页循环_bootstrap-table学习系列--分页查询

引言

bootstrap-table的好处就是在于,可以借用封装好的框架,来实现自己的需求.利用其对表的封装,我们可以很轻松画出美观大方法的表格.本篇,作为表的分页查询,来系统介绍总结一下.

这里提出分页需求:用户可以根据需要调整每页的显示条数和查看每页的记录数.

实现方法

利用bootstrap-table插件,对其进行基础配置,展示出分页表头.

代码

下面直接上代码.

前台代码:

页面引入文件:

table.Init();

});

});

var TableInit = function(){

var oTableInit = new Object();

var url = [[@{/action/test}]];

//初始化Table

oTableInit.Init = function(){

$("#demo").bootstrapTable({

url: url,

method: 'post',

striped: true,//隔行显色

cache: false,

contentType: "application/x-www-form-urlenceded; charset=UTF-8",

sortable: false,//是否启用排序

queryParamsType: "undefined",

queryParams:oTableInit.queryParams,

responseHandler: function(res){

return res.result;

},

pagination:true,//是否显示分页

paginationVAlign:"top",//设置分页条位置

paginationDetailHAlign:"right",

paginationHAlign:"right",

pageNumber:,//初始化加载第一页,默认第一页

pageSize:20,//默认每页显示条数

pageList: [10, 20, 50],

sidePagination: "server",

minimumCountColumns: 2,//最少允许的列数

clickToSelect: true,//启用点击选中行

uniqueId: "ID",

checkboxHeader: true,

showExport: false,

columns: [{

field: "ID",

title: '项目id',

align: "center"

}, {

field: 'NAME',

title: '名称',

align: "center"

},{

field: 'INPUT_DATE',

title: '创建日期',

align: "center"

},{

title: '操作',

field: 'Id11',

align: "center",

formatter: formatOperat

}]

});

$('#demo').bootstrapTable('hideColumn', 'ID');

function formatOperat(value,row,index){

return ['查看  删除'].join('');

}

};

//得到查询的参数

oTableInit.queryParams = function(params) {

if(!params.limit) {

params.limit = params.pageSize;

}

if(!params.offset) {

params.offset = params.pageNumber;

}

var temp = {

page_number: params.offset, //页面大小

line: params.limit, //页码

ID: $("#ID").val(),

NAME:$("#NAME").val(),

INPUT_DATE: $("#INPUT_DATE").val()

};

return temp;

};

return oTableInit;

};

function view(id){

......

}

function del(id){

......

}

后台:

Controller层:

@Validated

@Controller

@RequestMapping("/action/")

public class DemoController {

@Autowired

private DemoService demoService;

@RequestMapping(value="/test", method = RequestMethod.POST)

@ResponseBody

public Map getData(String NAME,String page_number,String line){

Map map = new HashMap();

map.put("NAME",NAME);

map.put("page_number",page_number);

map.put("line",line);

List> returnList = service.getData(paramsMap);

return ParamUtils.returnData("1", ReturnTyme.success, "", ParamUtils.converData(returnList));

}

....

}

service层

public List> getData(Map paramsMap) {

return dao.getData(paramsMap);

}

Dao层

public List> getData(Map paramsMap) {

PageHelper.startPage(Integer.parseInt(paramsMap.get("page_number").toString()),

Integer.parseInt(paramsMap.get("line").toString()));

return sqlSession.selectList("demo.getData", paramsMap);

}

xml文件

SELECT

ID,

NAME,

INPUT_DATE,

FROM

demo.test

WHERE 1=1

and NAME = #{NAME}

效果图: