前台进入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. C#面向对象设计模式纵横谈——5.Factory Method 工厂方法模式(创建型模式)

    动机 (Motivation) 在软件系统中,经常面临着“某个对象”的创建工作; 由于需求的变化,这个对象经常面临着剧烈的变化,但是它却拥有比较稳定的接口. 如何应对这种变化?如何提供一种“封装机制” ...

  2. iframe自适应高度

    http://wenrunchang123.iteye.com/blog/1684843

  3. Dell R730 配置完RAID后装系统找不到硬盘。

    1. 各硬盘只是灯都正常.硬件无故障. 2. 8个600G硬盘做的RAID0和RAID5后都在装系统选盘处找不到硬盘.(注意: 第一次做raid 时,没有进行初始化init.后补做也无效,一直复现这个 ...

  4. Java学习笔记14---使用标志位控制循环

    使用标志位控制循环 前面提到了控制循环的常用技术:计数器控制的循环.另一种控制循环的常用技术是在读取和处理一个集合的值时指派一个特殊值.这个特殊的输入值也成为标志值(sentinel value),用 ...

  5. 聊一聊PV和并发

    最近和几个朋友,聊到并发和服务器的压力问题.很多朋友,不知道该怎么去计算并发?部署多少台服务器才合适? 所以,今天就来聊一聊PV和并发,还有计算web服务器的数量 的等方法.这些都是自己的想法加上一些 ...

  6. IOS静态库

    如何在Xcode中创建C++静态库 http://jingyan.baidu.com/article/03b2f78c111fca5ea237ae26.html iOS 如何创建和使用静态库 http ...

  7. jetty9内嵌到应用,并在启动后加载WebApplicationInitializer,可运行jsp

    声明:本文所介绍的两功能都已经测试通过. 第一步先确保你用的是java 8,并依赖需要的相关jar包,以下是用gradle进行依赖的信息: ext { taglibsStandardVersion = ...

  8. 【Java】增强的for流程

    增强for循环语法: for(type element: array) {       System.out.println(element); } 可遍历输出数组元素,但无法获取元素下标. 相关链接 ...

  9. MySQL的简单使用

    MySQL 参数     参数 描述 备注 -D,--database=.name 打开指定数据库 mysql –uroot –procky –Dhisdb 或者mysql –uroot –prock ...

  10. 搭建Apache Web服务器

    1.下载Apache服务器的安装包 地址:http://httpd.apache.org/download.cgi 从http://archive.apache.org/dist/httpd/bina ...