jQuery分页插件jPages

所属分类：导航-分页

266364 464 查看评论 (44)

分享到微信朋友圈

查看演示立即下载

插件描述：jPages是一个客户端分页插件，它比其他大多数插件多了很多功能，比如自动翻页，滚动浏览，显示延迟，完全可定制的导航面板也集成项目与Animate.css和延迟加载。

jPages是一个客户端分页插件，它比其他大多数插件多了很多功能，比如自动翻页，滚动浏览，显示延迟，完全可定制的导航面板也集成项目与Animate.css和延迟加载。

兼容所有的浏览器

使用方法

下面的代码添加到您的网页的<head>部分：

<link rel="stylesheet" href="css/jPages.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jPages.js"></script>

如果你想使用Animate.css动画你还需要添加的文件：

<link rel="stylesheet" href="css/animate.css">

示例源代码：

<!-- Future navigation panel -->
<div class="holder"></div>
<!-- Item container (doesn't need to be an UL) -->
<ul id="itemContainer">
<!-- Items -->
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
</ul>

启动插件：

$(function(){
  $("div.holder").jPages({
    containerID : "itemContainer"
  });
});

这是怎样的“div.holder”源代码将看起来像（创建10页）

!-- navigation panel -->
<div class="holder">
    <a class="jp-previous jp-disabled">← previous</a>
    <a class="jp-current">1</a>
    <span class="jp-hidden">...</span>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
    <a class="jp-hidden">6</a>
    <a class="jp-hidden">7</a>
    <a class="jp-hidden">8</a>
    <a class="jp-hidden">9</a>
    <span>...</span>
    <a>10</a>
    <a class="jp-next">next →</a>
</div>

jQuery提示插件 qTip

jQuery过滤分类排序插件MixItUp

超简单的jQuery分页功能

就是一个基础分页功能，支持加入ajax

分页

31013 198

基于jquery和bootstrap的分页插件jqPaginator.js

基于jquery的分页插件，引入jquery.js 、bootstrap.css该插件即可

分页

51166 328

刷新页面不变的分页插件

jQuery刷新页面页面不会改变的分页插件

分页

37441 321

jquery分页修改版（原创）

jquery分页插件

分页

51089 365

讨论这个项目（44）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

/mn★怡琳★ 0

2021/2/23 10:54:49

Unruly 小☆鑫 0

2018/7/1 15:22:16

李鹏翮 0

2017/11/27 16:08:45

有几个建议,

1.生成的时候分页信息写入一个div 添加个class,这样以防样式干扰,目前会出现样式覆盖的现象

2.分页如果可以做成页面固定多少个按钮或许会更好,目前的情况在首尾按钮很少,感觉不协调,当然如果数据量少就无所谓了

3.以下为我的分页按理大家可以参考

//汽车查询
function carNewsSearch() {
    base16Form("car_form", "car_form_data");
    var url = "${pageContext.request.contextPath}/frame/car/siteNews";
    var s = top.layer.load(2);
    var html = "";
    $.post(url, $("#car_form_data").serialize(), function(data) {
        if (data.successful) {
            $.each(data.rows, function(i, item) {
                html += '<li><a target="_blank" href="' + item.docpuburl + '">' + item.doctitle + '</a><span>' + item.docreltime + '</span>';
            }) $("#car_ul").html(html);
            $('#car_page').pagination({
                totalData: data.total,
                showData: data.pageSize,
                current: $("#car_form input[name='pageNo']").val(),
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function(api) {
                    $("#car_form input[name='pageNo']").val(api.getCurrent());
                    carNewsSearch();
                }
            });
        }
    }, "json").complete(function(data) {
        top.layer.close(s);
    }).error(function(data) {
        top.layer.msg(data.error, {
            shade: 0.3,
            icon: 1
        });
    });
}