前台进入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来做的后台分页,大家可以借鉴一下 (分页第一篇)的更多相关文章

  1. 在vue项目中正确的引入jquery和bootstrap

    <script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 一.第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jq ...

  2. vue-cli3项目中引入jquery 以及如何引进bootstrap

    1.安装jquery npm install jquery --save 2.或则在package.json中指定版本号,然后运行npm install命令 "dependencies&qu ...

  3. 【grunt第三弹】grunt在前端实际项目中的应用

    前言 [grunt第二弹]30分钟学会使用grunt打包前端代码(02) [grunt第一弹]30分钟学会使用grunt打包前端代码 经过前两次的学习,我们了解了grunt打包的一些基础知识,对于压缩 ...

  4. Maven项目中pom文件分析

    pom英文全称: project object model 1.概述 pom.xml文件描述了maven项目的基本信息,比如groupId,artifactId,version等.也可以对maven项 ...

  5. TFS在项目中DevOps落地进程(下)

    紧接上篇 TFS在项目中Devops落地进程(上) 再接着说TFS相关之前先插入一个番外篇,虽然跟TFS关系不大但跟DevOps关系很大,觉得有必要在此乱入一下. 番外篇--监控之Applicatio ...

  6. 【转】在Express项目中使用Handlebars模板引擎

    原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...

  7. VLC在web系统中应用(x-vlc-plugin 即如何把VLC嵌入HTML中)第一篇

    VLC毫无疑问是优秀的一款播放软件,子B/S机构的web项目中,如果能把它嵌入页面,做页面预览或者其他,是非常棒的. 第一步:下载VLC安装程序:(推荐1.0.3或者是1.0.5版本,比较稳定) ht ...

  8. jqPaginator 项目中做分页的应用技巧

    最近做后台管理系统,分页用到的不少,项目中其实已经有分页功能的组件但是不够高度自定义,于是就找到了 jqPaginator 高度自定义的Html结构 初始化引用如下: $("#paginat ...

  9. simple高度自定义的jqPaginator 项目中做分页的应用技巧

    最近做后台管理系统,分页用到的不少,项目中其实已经有分页功能的组件但是不够高度自定义,于是就找到了 jqPaginator 高度自定义的Html结构 初始化引用如下: $("#paginat ...

随机推荐

  1. druid连接池获取不到连接的一种情况

    数据源一开始配置: jdbc.initialSize=1jdbc.minIdle=1jdbc.maxActive=5 程序运行一段时间后,执行查询抛如下异常: exception=org.mybati ...

  2. “(null)” is of a model that is not supported by this version of Xcode. Please use a different device.

    ios    真机运行程序就弹出这个"(null)" is of a model that is not supported by this version of Xcode. P ...

  3. oracle用户创建

    Microsoft Windows [版本 6.1.7601]版权所有 (c) 2009 Microsoft Corporation.保留所有权利. G:\Users\Admin>sqlplus ...

  4. iOS 动态化

    来自bang's blog http://blog.cnbang.net/tech/3286/ 问题 在开发模式上,web 的方式是比较先进的,有各种优点,包括跨平台/UI开发效率高,最重要的是可以时 ...

  5. HTML5的浏览器支持方案

    现代的浏览器基本都支持 HTML5,此外还有老浏览器. 不管是旧的还是最新的,HTML5对无法识别的元素会作为内联元素自动处理. 所以,在这里教大家怎么让浏览器去处理"未知"的HT ...

  6. springmvc @responsebody 406/415问题解决

    提供几个解决思路 1.如果项目中用的spring jar包是4.x版本, 需要jackson-annotations-2.x/jackson-core-2.x/jackson-databind-2.x ...

  7. linux下如何关闭防火墙?如何查看防火墙当前的状态

    从配置菜单关闭防火墙是不起作用的,索性在安装的时候就不要装防火墙查看防火墙状态:/etc/init.d/iptables status暂时关闭防火墙:/etc/init.d/iptables stop ...

  8. Java ClassLoader 原理详细分析(转)

    转载自:http://www.codeceo.com/article/java-classloader.html 一.什么是ClassLoader? 大家都知道,当我们写好一个Java程序之后,不是管 ...

  9. [原创]Matlab2016b打包为C++的lib文件

    这几天在研究如何将Matlab的程序导入到C++进行调用. 由于需要使用到不少Matlab函数,所以之前就有些担心这些函数在导出后是否能够继续使用.不过之后觉得既然已经导出成了一个单独文件,相关运算应 ...

  10. 关于PHP的引用赋值

    应用赋值,可以改变之前的变量的值! 可以间接的做到,在变量未申明的时候!就可以获取它的值!