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

最新推荐文章于 2024-08-24 08:23:12 发布

weixin_34190136

最新推荐文章于 2024-08-24 08:23:12 发布

阅读量1k

点赞数

文章标签： javascript json 前端 ViewUI

原文链接：http://www.cnblogs.com/xueyicanfei/p/10195787.html

版权

一.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

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

 1 package com.zhiyou.controller;
 2 
 3 import org.springframework.beans.factory.annotation.Autowired;
 4 import org.springframework.stereotype.Controller;
 5 import org.springframework.web.bind.annotation.RequestMapping;
 6 import org.springframework.web.bind.annotation.RequestParam;
 7 import org.springframework.web.bind.annotation.ResponseBody;
 8 
 9 import com.zhiyou.pojo.PageBean;
10 import com.zhiyou.pojo.User;
11 import com.zhiyou.services.UserService;
12 
13 @Controller
14 public class UserController {
15     
16     @Autowired
17     private UserService userService;
18     
19     @RequestMapping("user")
20     public String pageShow(){
21         
22         return "userList";
23     }
24     @RequestMapping("userPage")
25     @ResponseBody
26     public PageBean<User> pageShow(@RequestParam(defaultValue="1",required=true,value="pageNum") Integer pageNum,Integer pageSize,String name,String factions){
27         /*Integer pageSize = 5;*/
28         User user = new User();
29         if (name != "" && name != null) {
30             user.setName(name);
31         }
32         if (factions != "" && factions != null) {
33             user.setFactions(factions);
34         }
35         PageBean<User> page = userService.pageShow(pageNum,pageSize,user);
36         return page;
37     }
38     
39 }

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

 1 var currPage = 1;
 2 var pageSize = 5;
 3 var render = function() {
 4     $('#userContent').empty();
 5     var name = $("#name").val();
 6     var factions = $("#factions").val();
 7     var url = '/userPage.action';
 8     getCategorySecondData({
 9         pageNum : currPage,
10         pageSize : pageSize,
11         name : name,
12         factions : factions
13     }, url, function(data) {
14         showData(data.list);
15         setPaginator(data.pageNum, Math.ceil(data.total / pageSize), render);
16     });
17 };
18 render(); // 渲染页面函数
19 
20 function showData(list) {
21     var str = "";
22     for (var i = 0; i < list.length; i++) {
23         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>"
24         $('#userContent').append(str);
25     }
26 }

showUser.js

二、前台使用BootStrap_table

效果：

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

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>用户</title>
 8 <%
 9     pageContext.setAttribute("URL_PATH", request.getContextPath());
10 %>
11 <link href="${URL_PATH}/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
12 <link href="${URL_PATH}/bootstrap-3.3.7-dist/css/bootstrap-table.css" rel="stylesheet">
13 <script src="${URL_PATH}/js/jquery-1.9.1.min.js"></script>
14 <script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
15 <script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap-table.js"></script>
16 <script src="${URL_PATH}/bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.js"></script>
17 <script src="${URL_PATH}/js/user.js"></script>
18 <script src="${URL_PATH}/js/page.js"></script>
19 
20 </head>
21 <body>
22     <form action="" id="pageParamForm">
23         名称： <input type="text" id="name" name="name"> 
24         种族： <input type="text" id="factions" name="factions">
25         <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="queryBtn()"/>
26         <input type="reset" value="重置">
27         <div id="toolbar" class="btn-group">
28             <button id="btn_add" type="button" class="btn btn-default">新增</button>
29             <button id="btn_edit" type="button" class="btn btn-default">修改</button>
30             <button id="btn_delete" type="button" class="btn btn-default">删除</button>
31         </div>
32     </form>
33     
34     <!-- 分页 -->
35     <table id="tablePage"></table>
36 </body>
37 </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"  οnclick="edit(\'' + row.id + '\')">编辑</button> ';
                var d = '<button href="#" class="btn btn-danger"  οnclick="del(\'' + row.id + '\')">删除</button> ';
                return e + d;
            }
        }
    ]
    showpage(url, columns);
})
$(function() {
    showpage();
});

user.js

 1 function showpage(url, columns) {
 2     $("#tablePage").bootstrapTable({
 3         url : url,
 4         dataType : "json",
 5         method : 'post', //请求方式（*）
 6         contentType : "application/x-www-form-urlencoded", //需要设置为这个参数，后台才能通过对象获取值,这里要注意
 7         striped : true, //隔行变色
 8         toobar:'#toobar',//工具按钮使用哪个容器
 9         cache : false, //是否使用缓存
10         showColumns : false,
11         pagination : true, //是否显示分页
12         paginationLoop : false,
13         paginationPreText : '上一页',
14         paginationNextText : '下一页',
15         //showFooter : true, //显示列脚
16         showPaginationSwitch : false, //是否显示数据条数选择框
17         sortable : false, //是否启用排序
18         sortOrder:'asc',
19         singleSelect : false,
20         search : true, //显示搜索框
21         buttonsAlign : "right", //按钮对齐方式
22         showRefresh : true, //是否显示刷新按钮
23         sidePagination : "server", //服务端处理分页
24         pageNumber : 1,
25         pageSize : 5,
26         pageList : [ 5, 10, 25, 50 ],
27         undefinedText : '',
28         uniqueId : "id", //每一行的唯一标识，一般为主键列
29         queryParamsType : '',
30         queryParams : queryParams, //传递参数（*）
31         responseHandler : function(res) {
32             //在ajax获取到数据，渲染表格之前，修改数据源,改成bootstrap-table需要的数据格式
33             var nres = [];
34             nres.push({
35                 total : res.total,
36                 rows : res.list
37             });
38             return nres[0];
39         },
40         columns : columns
41     });
42     function queryParams(params) {
43          var param = $("#pageParamForm").serializeJsonObject(); 
44          param["pageSize"]=params.pageSize;
45          param["pageNum"]=params.pageNumber;
46         return param;
47     }
48 }
49 //点击“查询”按钮
50 function queryBtn(){
51     $("#tablePage").bootstrapTable('refreshOptions',{pageNumber:1});
52 }
53 $.fn.serializeJsonObject = function() {  
54     var json = {};  
55     var form = this.serializeArray();  
56     $.each(form, function() {  
57         if (json[this.name]) {  
58             if (!json[this.name].push) {  
59                 json[this.name] = [ json[this.name] ];  
60             }  
61             json[this.name].push( );  
62         } else {  
63             json[this.name] = this.value || '';  
64         }  
65     });  
66     return json;  
67 }