总结一下项目中遇到的分页问题,使用bootstrap-table来做的后台分页,大家可以借鉴一下 (分页第一篇)
前台进入bootstrap的js和css文件,我就不多少了,另外要引进bootstrap-table的js和css
废话不多说,直接代码。 框架为ssm,代码很清楚
<div class="table_menu_list">
<table class="tablecss table table-striped table-bordered table-hover" id="sample-table">
</table>
</div>
这个是容器,后台分页都在这里显示。
下面是js文件,用于对容器进行初始化
$(function(){
var oTable = new TableInit();
oTable.Init();
$('#ample-table').bootstrapTable('hideColumn', 'currentPage');
});
有其他的选择器如果在页面中没有看到,说明是bootstrap框架给加载的,大家不用管
下面是主方法
里面有很多的title,这个是我自己写的,你们可以把它删除,替换成自己的 这个是最后一页
var isLastPage = function(currentPage,totalPage){
if(currentPage==totalPage){
$(".page-next").html("");
}
}
这个是第一页
var isFirstPage = function(currentPage,totalPage){
if(currentPage==1){
$(".page-pre").html("");
}
}
var TableInit = function(){
var oTableInit = new Object();
oTableInit.Init = function(){
$("#sample-table").bootstrapTable({
url:"发送到后台的controller中,路径一定要正确",
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
dataType:"json",
pagination: true,
pageList:[],
pageNumber:1,
pageSize:10,//每页显示的数量
paginationPreText:"上一页",
paginationNextText:"下一页",
method :'post',
paginationLoop:false,
queryParams : oTableInit.queryParams,
sidePagination : "server", //后台分页,也可以改成前台分页
//data-locale:"zh-US",
//sidePagination: "server",
onLoadSuccess : function(data){
if(data.rows[0] != undefined){
isFirstPage(data.rows[0].currentPage,data.rows[0].totalPage);
isLastPage(data.rows[0].currentPage,data.rows[0].totalPage);
}
},
columns:[[/*{
title:'<label><input id="all" type="checkbox" class="ace" /><span class="lbl"></span></label>',
align:'center',valign:'middle',width:'4%',
formatter:function(value,row,index){
return '<label><input type="checkbox" value="'+row.billId+'" name="check" class="ace che" /><span class="lbl"></span></label>'
}
},*/
{
field:'id',width:'80',
title:'编号',align:'center',
formatter:function(value,row,index){
return index+1;
}
},
{title:'消息标题',field:'headline',align:'center',valign:'middle',width:'120'},
{title:'消息内容',field:'content',align:'center',valign:'middle',width:'120',
formatter:function(value,row,index){
if(row.content != null){
var con=(row.content).substring(0,10)+"....";
return '<a href="#" class="titles" onclick="lookcontent(\''+row.id+'\')">'+con+'</a>';
}else{
return
}
}
},
{title:'发布人',field:'staffName',align:'center',valign:'middle',width:'120'},
{title:'发布部门',field:'name',align:'center',valign:'middle',width:'120'},
{title:'附件',field:'filepath',align:'center',valign:'middle',width:'120',
formatter:function(value,row,index){
if(value!=null){
return '<a onclick="fjxz("'+row.id+'");">附件下载</a>';
}else{
return '/';
}
}
},
{title:'消息分类',field:'messageTypeName',align:'center',valign:'middle',width:'120'},
{title:'发布时间',field:'publishTime',align:'center',valign:'middle',width:'120',
formatter:function(value,row,index){
var oDate = new Date(value);
return oDate.Format("yyyy-MM-dd hh:mm:ss");
}
},
{title:'删除',field:'publishTime',align:'center',valign:'middle',width:'120',
formatter:function(value,row,index){
return '<a href="#" class="btn btn-primary btn-sm" onclick="deleteMessage(\''+row.id+'\')">删除</a>';
}
}
]]
});
$('#sample-table').bootstrapTable('hideColumn', 'totalPage');
$('#sample-table').bootstrapTable('hideColumn', 'currentPage');
};
oTableInit.queryParams = function (temp) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
//里面和可以设置你需要传递的参数,自己定义,主要是为了搜索条件
pageSize: temp.limit, //页面大小
pageNumber: temp.offset //页码
};
return temp;
};
return oTableInit;
};
//到此为止,前台的方法已经写完了,下面是后台方法
//这个是我的控制器 ,service、serviceimpl、mapper、mapperxml后面都会有方法
@RequestMapping("/showNewsList")
@ResponseBody
public Map<String, Object> showNewsList(HttpServletRequest request){
Integer rows = Integer.valueOf(request.getParameter("pageSize"));
Integer page = Integer.valueOf(request.getParameter("pageNumber"));
User user=(User)request.getSession().getAttribute("user");
Integer userid=user.getId();
Map<String, Object> pageBean = new HashMap<String, Object>();
//获取总记录数,为后面的分页做准备
int total = newsMessageService.getPageTotal(userid);
int totalPage = total % rows;
if(totalPage == 0){
totalPage = total /rows;
}else{
totalPage = total /rows + 1;
}
int currentPage = page/rows+1;
List<News> newsList = newsMessageService.showNewsList(userid,rows,page);
for(News news:newsList){
news.setTotalPage(totalPage);
news.setCurrentPage(currentPage);
}
//totalPage currentpage是我在实体bean中加的属性,主要是为了分页的方便
pageBean.put("total", total);
pageBean.put("rows", newsList);
return pageBean;
}
总结一下项目中遇到的分页问题,使用bootstrap-table来做的后台分页,大家可以借鉴一下 (分页第一篇)的更多相关文章
- 在vue项目中正确的引入jquery和bootstrap
<script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 一.第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jq ...
- vue-cli3项目中引入jquery 以及如何引进bootstrap
1.安装jquery npm install jquery --save 2.或则在package.json中指定版本号,然后运行npm install命令 "dependencies&qu ...
- 【grunt第三弹】grunt在前端实际项目中的应用
前言 [grunt第二弹]30分钟学会使用grunt打包前端代码(02) [grunt第一弹]30分钟学会使用grunt打包前端代码 经过前两次的学习,我们了解了grunt打包的一些基础知识,对于压缩 ...
- Maven项目中pom文件分析
pom英文全称: project object model 1.概述 pom.xml文件描述了maven项目的基本信息,比如groupId,artifactId,version等.也可以对maven项 ...
- TFS在项目中DevOps落地进程(下)
紧接上篇 TFS在项目中Devops落地进程(上) 再接着说TFS相关之前先插入一个番外篇,虽然跟TFS关系不大但跟DevOps关系很大,觉得有必要在此乱入一下. 番外篇--监控之Applicatio ...
- 【转】在Express项目中使用Handlebars模板引擎
原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...
- VLC在web系统中应用(x-vlc-plugin 即如何把VLC嵌入HTML中)第一篇
VLC毫无疑问是优秀的一款播放软件,子B/S机构的web项目中,如果能把它嵌入页面,做页面预览或者其他,是非常棒的. 第一步:下载VLC安装程序:(推荐1.0.3或者是1.0.5版本,比较稳定) ht ...
- jqPaginator 项目中做分页的应用技巧
最近做后台管理系统,分页用到的不少,项目中其实已经有分页功能的组件但是不够高度自定义,于是就找到了 jqPaginator 高度自定义的Html结构 初始化引用如下: $("#paginat ...
- simple高度自定义的jqPaginator 项目中做分页的应用技巧
最近做后台管理系统,分页用到的不少,项目中其实已经有分页功能的组件但是不够高度自定义,于是就找到了 jqPaginator 高度自定义的Html结构 初始化引用如下: $("#paginat ...
随机推荐
- jQuery进阶
复习: jq无论如何都是一个集合 jq是一个包装集 var arr=$("div").get( )会将所有的DOM对象转换成真正的数组, get( )里边没传参数 兄弟元素: 只要 ...
- webfrom 总结
网上看了很多理论,然而知易行难.在实际工作中还是存在很多问题. 下面是使用webform过程中的总结. 1.不使用服务端控件 表单有post和get两种方法,可以通过 form methed='pos ...
- Javascript格式化json返回的时间(/Date(1482747413000)/)
//时间处理,类似/Date(1482747413000)/的形式,得到xxx年xx月xx日 11:11:11 function ChangeDateFormat(jsondate) { jsonda ...
- GStreamer 记录
GStreamer 是一个新的多媒体框架,大大简化了多媒体工具的开发流程,比如,这里有一个 IBM 的文档,介绍了一个 MP3 播放器. http://www.ibm.com/developerwor ...
- Zabbix监控nginx-rtmp status(json版)
与前面的文章 zabbix监控nginx-rtmp status(html版)区别只在于取值的页面不一样 http://127.0.0.1:81/control/get/all_streams sta ...
- UOJ59 WC2013 小Q运动季
题意:给一个模线性方程组,构造解满足尽量多的方程. 直接枚举. 模数两两互质,先排除无解的,然后CRT,然而要高精,上python. 直接高消,有完美解. 2^20暴搜. 分解模数,对每个质数高消,C ...
- linux下mnt目录作用
linux下mnt目录作用 一.mount 英文解释 登上; 爬上; 攀登; 骑上; 乘上; 跨上 可直接理解为“挂载” 挂接光驱.USB设备的目录,加载后,会在mnt里多出相应设备的目录.mnt是m ...
- 如何解决inline和linline-block在浏览器中的间距问题
写页面时,如果想要元素从左到右排列,但又不想使用浮动,那么很多人都会用到display:inline或者display:inline-block. 但是每次一用到这个两个属性,浏览器中浏览的时候就会有 ...
- yii2 开源插件与系统
yii2干货集:https://github.com/forecho/awesome-yii2 商城 samdark/yii2-shop composer global require "f ...
- throttle和debounce简单实现
function debounce(delay,fn){ var timer; return function(){ var ctx = this,args = arguments; clearTim ...