文档章节

jqpaginator 分页

御风林海
 御风林海
发布于 2015/03/09 14:34
字数 741
阅读 2359
收藏 4

页面文件

<%@ page
    language="java"
    contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib
    uri="http://java.sun.com/jsp/jstl/core"
    prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta
    http-equiv="X-UA-Compatible"
    content="IE=edge">

<meta
    name="viewport"
    content="width=device-width, initial-scale=1">
<title>demo</title>
<jsp:include page="addProduct.jsp"></jsp:include>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../manager/product/js/jquery-1.9.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->


<script src="../manager/product/js/bootstrap.min.js"></script>

<!-- 引入核心JS 这个组件-->

<script src="../manager/product/js/jqPaginator.js"></script>

<!---自己的JS -->
<script  src="../manager/product/js/product.js"></script>
<!-- Bootstrap -->

<link
    href="../manager/product/css/bootstrap.min.css"
    rel="stylesheet">


<style>
body {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
    <div
        class="container-fluid"
        style="width: 960px;">
        <div>
            <h3>产品列表</h3>
        </div>
        <div>
            <div class="col-md-2 pull-right">
                <ul
                    class="nav nav-pills nav-justified"
                    role="tablist">
                    <li
                        role="presentation"
                        class=" active"><a href="#">Home</a></li>
                    <li role="presentation"><a href="#">Profile</a></li>
                    <li role="presentation"><a href="#">Messages</a></li>

                </ul>
            </div>
        </div>

        <div
            class="row"
            style="margin-top: 30px;">
            <div
                class="col-sm-2"
                style="border-width: 2px; border-color: #AA0000">
                <ul
                    class="nav nav-pills nav-stacked"
                    role="tablist">
                    <li
                        role="presentation"
                        class="active"><a href="#">Home</a></li>
                    <li role="presentation"><a href="#">Profile</a></li>
                    <li role="presentation"><a href="#">Messages</a></li>
                </ul>
            </div>
            <div
                class=" col-sm-8"
                style="margin-left: 50px; margin-right: 0; border-width: 2px; border-color: #AA0000">

                <div id="tools" class="col-md-4 pull-right">
                    <ul
                        class="nav nav-pills nav-justified "
                        role="tablist">
                        <li
                            role="presentation"
                            class=" active"
                            style="padding-left: 10px;">
                            <button class="btn  btn-sm btn-info">查询</button>
                        </li>
                        <li
                            role="presentation"
                            class=" active"
                            style="padding-left: 10px;">
                            <button
                                id="addProduct"
                                class="btn btn-sm btn-success"
                                data-toggle="modal">添加产品</button>
                        </li>
                        <li
                            role="presentation"
                            class=" active"
                            style="padding-left: 10px;">
                            <button
                                id="deleteBtn"
                                class="btn btn-sm btn-danger">删除</button>
                        </li>
                    </ul>
                </div>
                <div style="margin-top: 40px;">

                    <table
                        id="productList"
                        class="table table-bordered table-hover">
                        <tr>
                            <td><input
                                id="selectAll"
                                class="checkbox"
                                type="checkbox" /></td>
                            <td>产品编号</td>
                            <td>产品名称</td>
                            <td>产品规格</td>
                            <td>产品数量</td>
                            <td>产品价格</td>
                            <td>操作</td>
                        </tr>
<!-- 循环遍历结果集 开始 -->
                        <c:forEach
                            var="product"
                            items="${pageResult.resultList}">
                            <tr>
                                <td><input
                                    name="proId"
                                    class="checkbox"
                                    type="checkbox"
                                    value="${product.pid}" /></td>
                                <td>${product.product_code}</td>
                                <td>${product.product_name}</td>
                                <td>${product.detail}</td>
                                <td>${product.note}</td>
                                <td>${product.product_code}</td>
                                <td><button
                                        name="editBtn"
                                        objId="${product.pid}"
                                        class="btn btn-sm-block"
                                        onclick="">修改</button></td>
                            </tr>
                        </c:forEach>

<!-- 循环遍历结果集 结束 -->

</table>
                </div>
            </div>
        </div>
    </div>
    <div id="p2"></div>
    <ul id="pagination2"></ul>

<!-- 存放生成分页控件的DIV  -->
    <div style="text-align: center;">

<!--  分页结果集对象,里面存放着结果集,每页记录数,当前第几页,记录总数等数据-->
<div id="pageResult">
<input id="pageCount" type="hidden" value="${pageResult.pageCount}"/>
<input id="totalCount" type="hidden" value="${pageResult.totalCount}"/>
<input id="pageIndex" type="hidden" value="${pageResult.pageIndex}"/>
</div>
        <!-- footer -->
        <p>vinace-Demo by 御风林海</p>
    </div>
</body>
</html>

JS 脚本代码:

$(document)
        .ready(
                function() {
                    var pSize = 10;   //每页记录数
                    var totalCount = $("#totalCount").val();  //记录总数
                    var pageIndex = $("#pageIndex").val();   //当前页码


});

    $('#pagination2')
                            .jqPaginator(
                                    {
                                        totalCounts : totalCount,
                                        currentPage : pageIndex,
                                        pageSize : pSize,
                                        visiblePages : 10,
                                        prev : '<li class="prev"><a href="javascript:;">Previous</a></li>',
                                        next : '<li class="next"><a href="javascript:;">Next</a></li>',
                                        page : '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                                        onPageChange : function(num, type) {
                                            // $('#p2').text(type + ':' + num);

                                            var queryUrl = "queryByPage.do";
                                            $
                                                    .ajax({
                                                        url : queryUrl,
                                                        dataType : 'json',
                                                        data : {
                                                            pageIndex : num,
                                                            pageSize : pSize
                                                        },
                                                        cache : false,

                                                        success : function(data) {
                                                            $(
                                                                    "#productList tr:not(:first)")
                                                                    .remove();
                                                            var results = data.pageResult.resultList;

                                                            for (var i = 0; i < results.length; i++) {
                                                                var rowContent = "<tr>"
                                                                        + "<td><input name='proId' class='checkbox' type='checkbox' value='"
                                                                        + results[i].pid
                                                                        + "'/></td>"
                                                                        + "<td>"
                                                                        + results[i].pid
                                                                        + "</td>"
                                                                        + "<td>"
                                                                        + results[i].product_name
                                                                        + "</td>"
                                                                        + "<td>"
                                                                        + results[i].note
                                                                        + "</td>"
                                                                        + "<td>"
                                                                        + results[i].note
                                                                        + "</td>"
                                                                        + "<td>"
                                                                        + results[i].note
                                                                        + "</td>"
                                                                        + "<td><button name='editBtn' objId='"
                                                                        + results[i].pid
                                                                        + "' class='btn btn-sm-block'>修改</button></td>"
                                                                        + "</tr>";
                                                                $(
                                                                        "#productList")
                                                                        .append(
                                                                                rowContent);
                                                            }
                                                        },
                                                        error : function(html) {
                                                            return;
                                                        }
                                                    });
                                        }
                            });

});


参考资料:http://jqpaginator.keenwon.com/

© 著作权归作者所有

御风林海

御风林海

粉丝 87
博文 79
码字总数 50322
作品 0
广州
技术主管
私信 提问
基于jquery的自定义分页控件--jqPaginator

效果截图: 现在网上各种各样的分页组件很多,但是很难找到十分“称心如意”的,于是jqPaginator诞生了。 我心中理想的分页组件,要不受CSS框架限制,可以使用在各种不同风格中的网页中。以我...

semanwmj
2014/05/11
25.3K
1
分页插件(基于jq和bootstrap)

感兴趣的可以下来自己看看:https://github.com/jx915/jqPaginator 一:引入js以及bootstrap.css文件 二:html 三:js 1.初始化 2.可以作为公共函数用来初始化 3.分页点击函数 效果图:分页 ...

天空影
2017/10/27
0
0
SSM(七)在JavaWeb应用中使用Redis

前言 由于最近换(mang)了(de)家(yi)公(bi)司接触了新的东西所以很久没有更新了。这次谈谈Redis,关于应该很多朋友就算没有用过也听过,算是这几年最流行的之一了。的应用场景非常多这里就不一...

crossoverJie
2016/12/18
238
0
C# 插入、删除Excel分页符

概述 对Excel表格设置分页对我们预览、打印文档时是很方便的,特别是一些包含很多复杂数据的、不规则的表格,为保证打印时每一页的排版美观性或者数据的前后连接的完整性,此时的分页符就发挥...

E_iceblue
2018/05/18
0
0
laravel5自定义分页

laravel5分页处理与laravel4略有区别,laravel5提供了更方便的处理方式,可以方便满足不同分页展示。 laravel4自定义分页:http://php2012web.blog.51cto.com/5585213/1539601 laravel分页处...

ttlxihuan
2016/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 判断实体类属性是否为空工具类

import org.apache.commons.lang.StringUtils;import java.lang.reflect.Field;import java.lang.reflect.Method;/** * 判断对象是否为空 * @param obj * @return */pub......

骑羊放狼灬
14分钟前
0
0
基于nginx搭建RTMP服务器

安装nginx 下载ngnix源码 git clone https://github.com/nginx/nginx.gitgit clone https://github.com/arut/nginx-rtmp-module.git 编译安装 ./configure --add-module=../nginx-rtmp-mod......

cloudjx
27分钟前
0
0
从 Spark 到 Kubernetes — MaxCompute 的云原生开源生态实践之路

2019年5月14日,喜提浙江省科学技术进步一等奖的 MaxCompute 是阿里巴巴自研的 EB 级大数据计算平台。该平台依托阿里云飞天基础架构,是阿里巴巴在10年前做飞天系统的三大件之分布式计算部分...

迷你芊宝宝
29分钟前
0
0
5个Vue.js项目的模板

开发人员查看使用SPA,Webpack,身份验证,GraphQL,文档和测试的Vue开发人员的资源。 你准备开始一个重要的Vue项目吗?为了确保从坚实的基础开始,您可以使用模板(也就是样板,骨架,起动器...

写字的男孩儿
30分钟前
0
0
epoll 的本质是什么?

从事服务端开发,少不了要接触网络编程。epoll 作为 Linux 下高性能网络服务器的必备技术至关重要,nginx、Redis、Skynet 和大部分游戏服务器都使用到这一多路复用技术。 epoll 很重要,但是...

编辑部的故事
34分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部