用bootstrap做分页

分页

应用于页面数据特别多的情况

作用:

  1. 加快数据查询速度
  2. 方便用户操作
  3. 利于页面的布局

    思路:

  4. 确定表中总的数据行数
  5. 计算页面数量:页数 = 总行数 / 每页行数
  6. 编写分页查询的方法
    select * from 表名 limit 开始行数,长度
  7. 包装数据到Java对象中,发送给JSP

    包装分页数据的实体类:

public class Page<T> {
    //每页的行数
    public static final int PAGE_SIZE = 10;
    //保存分页的数据
    private List<T> data;
    //保存页面数量
    private int pageCount;
    //保存当前页数
    private int currentPage;
....
}

确定表中总的数据行数

select count(*) from 表

在JdbcUtils中添加查询行数的方法

这个方法有点复杂其实,dbtuils中有个专门做聚合函数查询的函数是很好用的
/**
* 查询行数
*/
public static int queryCount(String sql,Object... params){
try {
return runner.query(sql, new ResultSetHandler(){
@Override
public Integer handle(ResultSet rs) throws SQLException {
//将数据库游标指向第一行
rs.next();
//返回唯一的一列数据(行数)
return rs.getInt(1);
}
}, params);
} catch (SQLException e) {
e.printStackTrace();
}
return 0;
}

DAO层编写并实现:

int selectUserCount();
List<User> selectUsersLimit(int start,int length);

Service层定义并实现:

@Override
public Page<User> selectUsersPage(int currentPage) {
    //查询总行数
    //计算出总的页数
    //通过当前页数执行分页查询
    //把总页数,当前页数,数据集合包装到Page对象中
    //返回Page对象
    return null;
}

在UserServlet添加方法:selectUsersPage

  1. 获得当前页数参数
  2. 如果页数为空就赋值默认为1
  3. 调用Service执行分页查询
  4. 保存数据,并跳转到users.jsp

登录Servlet跳转分页查询的方法

修改users.jsp ${users} ---> ${page.data}

实现分页超链接:

  1. 按page.pageCount进行固定次数循环,绘制超链接
    <a href="user.do?m=selectUsersPage&pageNo=${i}">${i}</a>
  2. 实现上一页和下一页

    Bootstrap

    就是进入官网,看着官网的例子自己进行套用即可

  • 如何利用把后台的数据拿到页面去灵活的显示在下拉列表框,根据后台的变动而变动。可以把option外面套一个EL表达式的forEach循环。
  • 有的是死的可以不用从后台请求。

原文地址:https://www.cnblogs.com/macht/p/11653781.html

时间: 2024-11-05 20:35:34

用bootstrap做分页的相关文章

使用KnockoutJs+Bootstrap实现分页

[后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端.在做的过程中,遇到一个问题——如何使用KnockoutJs来完成分页的功能.在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用KnockoutJs+Bootstrap来实现数据的分页显示. 二.使用KnockoutJs实现分页 这里采用了两种方式来实现分页,第一种是

Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: [javascript] view plaincopy <span style="font-size:14px;">function paging(page){ $.ajax({ typ

Bootstrap表格分页

最近在学习Bootstrap的分页,有一种方法用“Bootstrap-Paginator”的东西来做. 先预览一下: 为了能够局部刷新页面,我创建了一个PartialView 页面的HTML部分如下: 1 < div class ="tableContainer"> 2 < input id ="currentPage" type ="hidden" value =" @ViewData[ "currentP

用PHP+MySQL来做分页的演示

用php做分页弄懂逻辑关系其实不难,不过我在听课的时候估计是被老师讲的那些变量里的英文单词给听懵了,因为有几个变量的名字都很像,只是换了两三个英文字母而已,有的就少几个这样的,听到一半已经不知道老师讲的这个变量代表的是什么了,写这个也只是为了复习一下,温故而知新嘛. 英文翻译:page:页   per:由,依靠 //引用数据库 下面附赠一个连接数据库的包装函数使用sql语句时用my_query()这个函数:include ./MySQLDB.php: //先设置当前选中的页码数 $pageNum

Bootstrap做的HTML页面在本地IE打开正常,放到服务器上显示就不正常了

<meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> 浏览器默认开启兼容模式的问题,很多CSS3内容不支持,一般输入上面两行代码可以解决 作者:hu Hua链接:http://www.zhihu.com/question/24674452/answer/28658889来

分库后如何高效的做分页

现在连接6台mysql数据库,路由分库算法是根据id的hash值%6,根据值不同分别存入6台数据库.现在不知道如何做分页查询列表? 先决原则: 数据分库时尽量选择索引字段,最好此字段还是唯一的. 数据分库时建表时结合业务,选择where后查询比较频繁的字段. 解决方案泛泛之谈: 1.直接使用跨库的多表联合查询. 不建议. 2.向6台数据库server均发送一个查询请求,然后对所有查询结果进行汇总,再处理分页逻辑. 时间换空间.取20条有序数据,6台服务器各取20条,汇总排序返回. 3.建立一个总

第二百三十九节,Bootstrap路径分页标签和徽章组件

Bootstrap路径分页标签和徽章组件 学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件 和徽章组件. 一.路径组件 路径组件也叫做面包屑导航. 面包屑导航 breadcrumb样式class类,写在<ul>或<ol>里,设置面包屑导航(Bootstrap) <ol class="breadcrumb"> <li><a hr

关于使用coreseek并为其做分页的介绍(转)

coreseek 做分页时找数据总量还真不好找.以为他会给一个方法(函数)什么的去获取,结果却不是.首先需要了解:num_matches: 当前返回的结果数,<= limit设置值.max_matches: 最多返回的结果数,默认为1000,用户最多只能看到1000条搜索结果.这个是在nf中设置的.total_found: 结果总数.索引中所有满足查询条件的文档总数.这个是在你查询的返回结果中的数组中有的.当然前提是你必须在query前设置:$this->sc->SetArrayResu

基于bootstrap的分页

由于之前写了一个局部刷新的分页,为了自己以后工作方便所以再上传一个通用的分页,基于bootstrap的分页,引用和上次写的局部刷新一样,在这里就不写了 js代码 在页面加载的时候执行 var options = { bootstrapMajorVersion: 3,//版本 currentPage: @Convert.ToInt64(Model.PageNumber) ,//当前页数 numberOfPages: 10,//设置显示的页码数 totalPages: @Convert.ToInt6