前台进入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. HiShop2.x版本中的上传插件分析,得出所用的模板语言为Underscore.js 1.6.0且自己已修改

    效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popb ...

  2. Android_server提示端口被占用

    root@android:/data/local/tmp # ./android_server IDA Android 32-bit remote debug server(ST) v1.19. He ...

  3. Python批量扫描服务器指定端口状态

    闲来无事用Python写了一个简陋的端口扫描脚本,其简单的逻辑如下: 1. python DetectHostPort.py iplist.txt(存放着需要扫描的IP地址列表的文本,每行一个地址) ...

  4. Day5-python基础之函数(二)

    生成器 迭代器 装饰器 模块   来个需求,一个列表中所有元素都+1 1.最容易想到的方法 for循环,找列表索引,对应每个值+1 list_old = [1,2,3,4,5,6,7,8,9] for ...

  5. ubuntu安装/卸载mysql

    1.安装mysql root@openstack001:/tmp# apt-get install mysql-server Reading package lists... Done Buildin ...

  6. python 单例模式

    单例模式,也叫单子模式,是一种常用的软件设计模式.在应用这个模式时,单例对象的类必须保证只有一个实例存在 用装饰器方式实现单例模式 #!/usr/bin/python # coding=utf-8 d ...

  7. 详解SQL盲注测试高级技巧

    原文地址: http://www.freebuf.com/articles/web/30841.html

  8. ThinkPHP Where 条件中使用表达式

    本文转自:这里 Where 条件表达式格式为: $map['字段名'] = array('表达式', '操作条件'); 其中 $map 是一个普通的数组变量,可以根据自己需求而命名.上述格式中的表达式 ...

  9. 在Android中Intent的概念及应用(一)——显示Intent和隐式Intent

    Intent寻找目标组件的两种方式: 显式Intent:通过指定Intent组件名称来实现的,它一般用在知道目标组件名称的前提下,一般是在相同的应用程序内部实现的. 隐式Intent:通过Intent ...

  10. @RequestParam @RequestBody @PathVariable 等参数绑定注解详解

    文章主要讲解request 数据到handler method 参数数据的绑定所用到的注解和什么情形下使用. 简介: handler method 参数绑定常用的注解,我们根据他们处理的Request ...