前台进入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. adb工具获取appPackage和appActivity

    1,手机连接电脑,打开手机调试功能,并运行待测试APP,终端执行: adb shell 2,接着,执行: dumpsys window windows | grep -E 'mFocusedApp' ...

  2. java swing 双人五子棋源代码

    import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Toolkit; impo ...

  3. CTP程序化系统开发(C++ && PHP)

    2016-12-13 11:03:52 借助CTP的DEMO(上海期货交易公司提供的), 需要自己在 http://www.simnow.com.cn  上注册账号, 再者,需要下载[博易大师]软件, ...

  4. 【总结】Javascript基础

    1.Javascript的数据类型 Number String Boolean Undefined Null Object 如下图,其中Number.String.Boolean.Undefined. ...

  5. Linux在fstab中因配置错误导致服务器主机无法重启的问题应该如何解决

    fstab中配置错误导致系统无法启动的恢复方案 1制造错误的案例发生,在/etc/fstab中配置如下内容 结尾的倒数第一个为1表示进行磁盘检查,为0表示不进行磁盘检查,倒数第二个为0表示不备份,为1 ...

  6. NSString属性什么时候用copy,什么时候用strong?

           我们在声明一个NSString属性时,对于其内存相关特性,通常有两种选择(基于ARC环境):strong与copy.那这两者有什么区别呢?什么时候该用strong,什么时候该用copy呢 ...

  7. webapi5

  8. 日期格式转换 java 2016-09-03T00:00:00.000+08:00

    /**  * 日期格式转换yyyy-MM-dd'T'HH:mm:ss.SSSXXX  (yyyy-MM-dd'T'HH:mm:ss.SSSZ) TO  yyyy-MM-dd HH:mm:ss  * @ ...

  9. 用Java来写常见的排序算法

    随着校招的临近 算法是校招中很重要的一个部分 总结了常见几种排序算法,各种算法的时间复杂度和空间复杂度大家也需要多了解下 package com.huwei.sort; /** * 各种排序算法 * ...

  10. DHT协议C++实现过程中各种问题

    ---恢复内容开始--- 博主是个菜鸟,什么地方写的不对或者理解有误的地方还请指正出来. DHT协议是BT协议中的一部分,也是一个辅助性的协议.HTTP协议中用 来定位资源也就是html文本是用URL ...