bootstrap的分页怎么做,有的人觉得官网就一个样式,不像layui,easyui规定好返回的json就行了,我教你

1.说明,jdk8,jsp(如果用thymeleaf和vue其实也差不多,最好别直接后台返回个json,前台慢慢jquery追加,很麻烦,容易出bug,之前试过,就算只返回一个json最好要用vue),ssm

我这里的页面中删除和添加等功能禁用了,主要是展视分页,其中按条件查询并且分页也做出来的,完整的还有个登录功能和验证码功能,这里就不展示了,有空我再传到github上

截图效果

controller

默认按5条分页,SelectVo是那个按照条件查询来给的对象 

@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("findListUser")
    public String findListUserByPage(@RequestParam(defaultValue = "1")Integer page,
                                     @RequestParam(defaultValue = "5")Integer rows,
                                     SelectVo vo ,
                                     Model model){
        Pager<User> listPage = userService.findListPage(page, rows ,vo);
        System.err.println(listPage);
        model.addAttribute("listPage",listPage);
        model.addAttribute("selectParam",vo);

        return "list";
    }

}

 SelectVo和User和Pager(分页对象)

  //这是user对象
  private Integer id;
  private String username;
  private String password;
  private String gender;
  private Integer age;
  private String born;
  private String qq;
  private String email;

  //这是按条件查询的vo
  private String username;
  private String born;
  private String email; 

  //这是分页对象(给泛型)
  public class Pager<T> {
    private int totalCount; // 总记录数
    private int totalPage ; // 总页码
    private List<T> list ; // 每页的数据
    private int currentPage ; //当前页码
    private int rows;//每页显示的记录数
    ....
 }

Service(dao和sql就不给你们看了,猜应该也能猜到是啥)

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;
    @Override
    public User findByUsernameAndPassword(User user) {
        return userDao.findByUsernameAndPassword(user);
    }

    @Override
    public Pager<User> findListPage(Integer page, Integer rows, SelectVo vo) {
        Pager<User> pager = new Pager<>(); //分页对象,注意上面的参数page是前台的当前    
                                      //页,不是数据库查询的sql的limit的第一位,别搞错了
        pager.setCurrentPage(page);
        pager.setRows(rows);

        Integer totalCount = userDao.selectCountByPage(vo);//查询总页数,根据条件
        pager.setTotalCount(totalCount);

        pager.setTotalPage(totalCount%rows==0?(totalCount/rows):(totalCount/rows)+1);

        int start = (page-1)*rows; //这个才是limit的开始
        pager.setList(userDao.selectListByPage(start,rows,vo));

        return pager;
    }
}

sql(sql还是看一下,我怕有些新人不知道那个动态sql)

<mapper namespace="com.hunter.dao.UserDao">

    <select id="findByUsernameAndPassword" resultType="user">
        select * from user where username = #{username} and password=#{password}
    </select>

    <select id="selectCountByPage" resultType="int">
        select count(*) from user
        <include refid="queryWhere"></include>
    </select>

    <select id="selectListByPage" resultType="user">
        select * from user
        <include refid="queryWhere"></include>
         limit #{page},#{rows}
    </select>

    <sql id="queryWhere">
        <where>
            <if test="vo.username!=null and vo.username!=''">
                username like concat("%",#{vo.username},"%")
            </if>
            <if test="vo.born!=null and vo.born!=''">
               and  born like concat("%",#{vo.born},"%")
            </if>
            <if test="vo.email!=null and vo.email!=''">
               and email like concat("%",#{vo.email},"%")
            </if>
        </where>
    </sql>

</mapper>

前台的jsp (其实很简单,主要就是利用那个模板引擎,thymeleaf和freemarker也是一样,vue也差不多,有点区别,逻辑一样)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口:网页可以根据设置的宽度自动进行适配,在浏览器的内部虚拟一个容器,容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比,为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>用户信息管理系统</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入,建议使用1.9以上的版本 -->
    <script src="/js/bootstrap/js/jquery-3.5.1.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>

    <script>
        $(function () {

            //1.获取第一个cb
            $("#firstCb").click(function () {
                //2.获取下边列表中所有的cb
                var cbs = $("input[name='uid']")
                //3.遍历
                for (var i = 0; i < cbs.length; i++) {
                    //4.设置这些cbs[i]的checked状态 = firstCb.checked
                    cbs[i].checked = this.checked;

                }
            })
        })

    </script>
</head>
<body>
<div class="container">
    <h3 style="text-align: center">用户信息列表</h3>

    <div style="float: left;">

        <form class="form-inline" action="${pageContext.request.contextPath}/findListUser" method="get">
            <div class="form-group">
                <label for="exampleInputName2">用户名</label>
                <input type="text" id="query_name" name="username" value="${selectParam.username}" class="form-control" id="exampleInputName2" >
            </div>
            <div class="form-group">
                <label for="exampleInputName3">籍贯</label>
                <input type="text" id="query_born" name="born" value="${selectParam.born}" class="form-control" id="exampleInputName3" >
            </div>

            <div class="form-group">
                <label for="exampleInputEmail2">邮箱</label>
                <input type="text" id="query_email" name="email" value="${selectParam.email}" class="form-control" id="exampleInputEmail2"  >
            </div>
            <button type="submit" class="btn btn-default">查询</button>

        </form>
    </div>

    <div style="float: right;margin: 5px;">

        <a class="btn btn-primary" href="javascript:void(0)" disabled="false">添加联系人</a>
        <a class="btn btn-primary" href="javascript:void(0);" disabled="false">删除选中</a>

    </div>

        <table id="mytable" border="1" class="table table-bordered table-hover">
            <tr id="list_title" class="success">
                <th><input type="checkbox" id="firstCb"></th>
                <th>编号</th>
                <th>用户名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>籍贯</th>
                <th>QQ</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${listPage.list}" var="user" varStatus="s">
                <tr>
                    <td><input type="checkbox" name="uid" value="${user.id}"></td>
                    <td>${s.count}</td>
                    <td>${user.username}</td>
                    <td>${user.gender}</td>
                    <td>${user.age}</td>
                    <td>${user.born}</td>
                    <td>${user.qq}</td>
                    <td>${user.email}</td>
                    <td> <a class='btn btn-default btn-sm' href='javascript:void(0)' disabled='false'>修改</a>&nbsp;<a class='btn btn-default btn-sm' href='javascript:void(0)' disabled='false'>删除</a></td>
                </tr>

            </c:forEach>
        </table>

    <div style="margin-bottom: 3px;margin-top: -10px">
        <nav aria-label="Page navigation" style="height: 34px">
            <ul id="page_ul" class="pagination" style="margin-top: 0px">
            <c:if test="${listPage.currentPage == 1}">
                <li class="disabled">
                    <a class="btn disabled" href="${pageContext.request.contextPath}/findListUser?page=1&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
                        <span aria-hidden="true">首页</span>
                    </a>
            </c:if>
             <c:if test="${listPage.currentPage != 1}">
                <li>
                    <a href="${pageContext.request.contextPath}/findListUser?page=1&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
                        <span aria-hidden="true">首页</span>
                    </a>
             </c:if>
                </li>
                <c:if test="${listPage.currentPage == 1}">
                    <li class="disabled">
                    <a class="btn disabled" href="${pageContext.request.contextPath}/findListUser?page=${listPage.currentPage - 1}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
                            <span aria-hidden="true">上一页</span>
                    </a>
                </c:if>
                <c:if test="${listPage.currentPage != 1}">
                    <li>
                    <a href="${pageContext.request.contextPath}/findListUser?page=${listPage.currentPage - 1}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </c:if>


                </li>


                <c:forEach begin="1" end="${listPage.totalPage}" var="i" >

                        <c:if test="${listPage.currentPage == i}">
                            <li class="active">
                        </c:if>

                        <c:if test="${listPage.currentPage != i}">
                            <li>
                        </c:if>
                                <a href="${pageContext.request.contextPath}/findListUser?page=${i}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}">
                                        ${i}
                                </a>
                            </li>


                    </c:forEach>

                    <c:if test="${listPage.currentPage == listPage.totalPage}">
                        <li class="disabled">
                            <a class="btn disabled" href="${pageContext.request.contextPath}/findListUser?page=${listPage.currentPage +1 }&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                    </c:if>
                    <c:if test="${listPage.currentPage != listPage.totalPage}">
                        <li>
                            <a href="${pageContext.request.contextPath}/findListUser?page=${listPage.currentPage +1 }&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                    </c:if>

                    </li>
                <c:if test="${listPage.currentPage == listPage.totalPage}">
                <li class="disabled">
                    <a class="btn disabled" href="${pageContext.request.contextPath}/findListUser?page=${listPage.totalPage}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
                        <span aria-hidden="true">尾页</span>
                    </a>
                    </c:if>
                    <c:if test="${listPage.currentPage != listPage.totalPage}">
                <li>
                    <a href="${pageContext.request.contextPath}/findListUser?page=${listPage.totalPage}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}" aria-label="Previous">
                        <span aria-hidden="true">首页</span>
                    </a>
                    </c:if>
                </li>

                <li>
                    <div style="display: inline-block;font-size: 16px;line-height: 34px;color: #0c7cd5">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;跳转至第
                        <div class="dropdown" style="display: inline-block">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                ${listPage.currentPage}
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <c:forEach begin="1" end="${listPage.totalPage}" var="p">
                                    <li><a href="${pageContext.request.contextPath}/findListUser?page=${p}&rows=5&username=${selectParam.username}&born=${selectParam.born}&email=${selectParam.email}">
                                            ${p}
                                    </a></li>
                                </c:forEach>

                            </ul>
                        </div>
                        页
                    </div>
                </li>
            </ul>

        </nav>


    </div>
    <span style="margin-top: 5px">当前一共<span id="total" style="color: red">${listPage.totalCount}</span>条数据,共<span style="color: red" id="total_page">${listPage.totalPage}</span>页</span>

</div>


</body>
</html>

分享出来也是刚参加工作不久,之前公司不用vue,直接后台返回json,vue习惯了,jsp当时也没怎么用过,直接拿jquery去追加元素老是有各种问题,而且看起来特别乱,所以分享出来,要用的话可以直接拿去用,如果有问题,我后期上传到github,写这个文章也花了点时间,我也是新人,所以我也没太多时间来搞这些东西,要留时间学习,谢谢大家的观看,目前没发现大问题,有问题可以指出

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值