PageHelper分页+前台BootStrap_pagination样式/BootStrap_table样式

一.PagerHelper分页+前台BootStrap_pagination样式:

效果：

1.引入pageHelper插件：2种方式    pageHelper所需jar包：pagehelper-5.1.2.jar

BootStrap_table文件与pageHelper.jar 下载：https://pan.baidu.com/s/12qi7aC6MzSb2vAfOgpAdCg   提取码：isgr

BootStrap_pagination下载：https://pan.baidu.com/s/1he6dPSPuLOwjys2CkjxAiw 提取码：objo

 <!-- 引入 pageHelper插件 -->
     <plugins>
         <plugin interceptor="com.github.pagehelper.PageInterceptor">
             <!--reasonable：分页合理化参数，默认值为false。 当该参数设置为 true 时，pageNum<=0 时会查询第一页， pageNum>pages（超过总数时），会查询最后一页。
                 默认false 时，直接根据参数进行查询。 -->
             <property name="properties" value="mysql" />
             <property name="reasonable" value="true" />
         </plugin>
     </plugins>

sqlmapconfig.xml

第二种：配置在数据源处：

<!-- 数据源 -->
   <bean name="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="driverClassName" value="${jdbc.driver}" />
        <property name="url" value="${jdbc.url}" />
        <property name="username" value="${jdbc.username}" />
        <property name="password" value="${jdbc.password}" />
        <!-- 作为一个数据库连接池  性能参数   -->
        <property name="maxActive" value="10" />
        <property name="maxIdle" value="5" />
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <value>
                            helperDialect=mysql
                        </value>
                    </property>
                </bean>
            </array>

        </property>
   </bean>

applicationContext-dao.xml

2.Controller

 package com.zhiyou.controller;

 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;

 import com.zhiyou.pojo.PageBean;
 import com.zhiyou.pojo.User;
 import com.zhiyou.services.UserService;

 @Controller
 public class UserController {

     @Autowired
     private UserService userService;

     @RequestMapping("user")
     public String pageShow(){

         return "userList";
     }
     @RequestMapping("userPage")
     @ResponseBody
     public PageBean<User> pageShow(@RequestParam(defaultValue="1",required=true,value="pageNum") Integer pageNum,Integer pageSize,String name,String factions){
         /*Integer pageSize = 5;*/
         User user = new User();
         if (name != "" && name != null) {
             user.setName(name);
         }
         if (factions != "" && factions != null) {
             user.setFactions(factions);
         }
         PageBean<User> page = userService.pageShow(pageNum,pageSize,user);
         return page;
     }

 }

UserController

3.page实体类

package com.zhiyou.pojo;

import java.io.Serializable;
import java.util.List;

import com.github.pagehelper.Page;

public class PageBean<T> implements Serializable {

    private static final long serialVersionUID = 1L;

    private long total;        //总记录数
    private List<T> list;    //结果集
    private int pageNum;    // 第几页
    private int pageSize;    // 每页记录数
    private int pages;        // 总页数
    private int size;        // 当前页的数量 <= pageSize，该属性来自ArrayList的size属性
    /**
     * 包装Page对象，因为直接返回Page对象，在JSON处理以及其他情况下会被当成List来处理，
     * 而出现一些问题。
     * @param list          page结果
     * @param navigatePages 页码数量
     */
    public PageBean(List<T> list) {
        if (list instanceof Page) {
            Page<T> page = (Page<T>) list;
            this.pageNum = page.getPageNum();
            this.pageSize = page.getPageSize();
            this.total = page.getTotal();
            this.pages = page.getPages();
            this.list = page;
            this.size = page.size();
        }
    }

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getPages() {
        return pages;
    }

    public void setPages(int pages) {
        this.pages = pages;
    }

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }

}

PageBean

4.前台 ,需要引入bootstrap-paginator.min.js

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
    pageContext.setAttribute("URL_PATH", request.getContextPath());
%>
<link href="${URL_PATH}/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${URL_PATH}/js/jquery-1.9.1.min.js"></script>
<script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<scriptsrc="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap-paginator.min.js"></script>
<script src="${URL_PATH}/js/showUser.js"></script>
</head>
<body>
名称：
    <input type="text" id="name"> 种族：
    <input type="text" id="factions">
    <input type="button" value="查询" onclick="render()">
    <table class="table table-striped ">
        <tbody>
            <tr>
                <th>排序</th>
                <th>姓名</th>
                <th>性别</th>
                <th>来源</th>
                <th>种族</th>
            </tr>
        </tbody>
        <tbody id="userContent">
        </tbody>
    </table>
    <!--显示翻页  -->
    <div class="form-group">
        <div class="col-md-12 text-center">
            <nav aria-label="Page navigation">
            <ul class="pagination">
            </ul>
            </nav>
        </div>
    </div>
</body>
</html>

userList.jsp

5.js

//    分页
var getCategorySecondData = function(params,url, callback) {
    $.ajax({
        url : url,
        type : 'post',
        data : params,
        dataType : 'json',
        success : function(response) {
            callback && callback(response);
        }
    });
}
var setPaginator = function(pageCurr, totalPages, callback) {
    var numberOfPages = 5;
    if (totalPages < numberOfPages) {
        numberOfPages = totalPages;
    }
    $('.pagination').bootstrapPaginator({
        /*当前使用的是3版本的bootstrap*/
        bootstrapMajorVersion : 3,
        /*配置的字体大小是小号*/
        size : "normal",
        /*当前页*/
        currentPage : pageCurr,
        /*一共多少页*/
        totalPages : totalPages,
        /*页面上最多显示几个含数字的分页按钮*/
        numberOfPages : numberOfPages,
        /*设置显示的样式，默认是箭头    */
        itemTexts : function(type, page, current) {
            switch (type) {
            case "first":
                return "首页";
            case "prev":
                return "上一页";
            case "next":
                return "下一页";
            case "last":
                return "末页";
            case "page":
                return page;
            }
        },
        onPageClicked : function(event, originalEvent, type, page) {
            currPage = page; // 注意currPage的作用域
            callback && callback();
        }
    });
}

page.js

 var currPage = 1;
 var pageSize = 5;
 var render = function() {
     $('#userContent').empty();
     var name = $("#name").val();
     var factions = $("#factions").val();
     var url = '/userPage.action';
     getCategorySecondData({
         pageNum : currPage,
         pageSize : pageSize,
         name : name,
         factions : factions
     }, url, function(data) {
         showData(data.list);
         setPaginator(data.pageNum, Math.ceil(data.total / pageSize), render);
     });
 };
 render(); // 渲染页面函数

 function showData(list) {
     var str = "";
     for (var i = 0; i < list.length; i++) {
         str = "<tr><td>" + (i + 1) + "</td><td>" + list[i].name + "</td><td>" + list[i].sex + "</td><td>" + list[i].source + "</td><td>" + list[i].factions + "</td></tr>"
         $('#userContent').append(str);
     }
 }

showUser.js

二、前台使用BootStrap_table

效果：

1.前台jsp: 引入BootStrap _table.js

 <%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>用户</title>
 <%
     pageContext.setAttribute("URL_PATH", request.getContextPath());
 %>
 <link href="${URL_PATH}/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
 <link href="${URL_PATH}/bootstrap-3.3.7-dist/css/bootstrap-table.css" rel="stylesheet">
 <script src="${URL_PATH}/js/jquery-1.9.1.min.js"></script>
 <script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
 <script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap-table.js"></script>
 <script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.js"></script>
 <script src="${URL_PATH}/js/user.js"></script>
 <script src="${URL_PATH}/js/page.js"></script>

 </head>
 <body>
     <form action="" id="pageParamForm">
         名称： <input type="text" id="name" name="name">
         种族： <input type="text" id="factions" name="factions">
         <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="queryBtn()"/>
         <input type="reset" value="重置">
         <div id="toolbar" class="btn-group">
             <button id="btn_add" type="button" class="btn btn-default">新增</button>
             <button id="btn_edit" type="button" class="btn btn-default">修改</button>
             <button id="btn_delete" type="button" class="btn btn-default">删除</button>
         </div>
     </form>

     <!-- 分页 -->
     <table id="tablePage"></table>
 </body>
 </html>

userList.jsp

2.js;

$(function() {
    var url = '/userPage.action';
    var columns = [
        {
            checkbox : true,
            align : 'center',
            valign : 'middle'
        },
        {
            title : '序号',
            align : 'center',
            valign : 'middle',
            formatter : function(value, row, index) {
                return index + 1;
            }
        },
        {
            title : '姓名',
            field : 'name',
            align : 'center',
            valign : 'middle'
        },
        {
            title : '性别',
            field : 'sex',
            align : 'center',
            valign : 'middle'
        },
        {
            title : '来源',
            field : 'source',
            align : 'center',
            valign : 'middle'
        },
        {
            title : '种族',
            field : 'factions',
            align : 'center',
            valign : 'middle'
        },
        {
            title : '操作',
            field : 'id',
            align : 'center',
            formatter : function(value, row, index) {
                var e = '<button href="#" class="btn btn-primary"  onclick="edit(\'' + row.id + '\')">编辑</button> ';
                var d = '<button href="#" class="btn btn-danger"  onclick="del(\'' + row.id + '\')">删除</button> ';
                return e + d;
            }
        }
    ]
    showpage(url, columns);
})
$(function() {
    showpage();
});

user.js

 function showpage(url, columns) {
     $("#tablePage").bootstrapTable({
         url : url,
         dataType : "json",
         method : 'post', //请求方式（*）
         contentType : "application/x-www-form-urlencoded", //需要设置为这个参数，后台才能通过对象获取值,这里要注意
         striped : true, //隔行变色
         toobar:'#toobar',//工具按钮使用哪个容器
         cache : false, //是否使用缓存
         showColumns : false,
         pagination : true, //是否显示分页
         paginationLoop : false,
         paginationPreText : '上一页',
         paginationNextText : '下一页',
         //showFooter : true, //显示列脚
         showPaginationSwitch : false, //是否显示数据条数选择框
         sortable : false, //是否启用排序
         sortOrder:'asc',
         singleSelect : false,
         search : true, //显示搜索框
         buttonsAlign : "right", //按钮对齐方式
         showRefresh : true, //是否显示刷新按钮
         sidePagination : "server", //服务端处理分页
         pageNumber : 1,
         pageSize : 5,
         pageList : [ 5, 10, 25, 50 ],
         undefinedText : '',
         uniqueId : "id", //每一行的唯一标识，一般为主键列
         queryParamsType : '',
         queryParams : queryParams, //传递参数（*）
         responseHandler : function(res) {
             //在ajax获取到数据，渲染表格之前，修改数据源,改成bootstrap-table需要的数据格式
             var nres = [];
             nres.push({
                 total : res.total,
                 rows : res.list
             });
             return nres[0];
         },
         columns : columns
     });
     function queryParams(params) {
          var param = $("#pageParamForm").serializeJsonObject();
          param["pageSize"]=params.pageSize;
          param["pageNum"]=params.pageNumber;
         return param;
     }
 }
 //点击“查询”按钮
 function queryBtn(){
     $("#tablePage").bootstrapTable('refreshOptions',{pageNumber:1});
 }
 $.fn.serializeJsonObject = function() {
     var json = {};
     var form = this.serializeArray();
     $.each(form, function() {
         if (json[this.name]) {
             if (!json[this.name].push) {
                 json[this.name] = [ json[this.name] ];
             }
             json[this.name].push( );
         } else {
             json[this.name] = this.value || '';
         }
     });
     return json;
 }

page.js