jQuery分页插件jPages

所属分类：导航-分页

266496 465 查看评论 (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分页插件bs_pagination

bs_pagination是jQuery分页插件,基于Bootstrap。完全可配置的,响应网页设计。

分页

69717 426

jQueryPaging分页数据获取插件

基于jQuery的分页及数据获取插件

分页

38379 364

超实用的angular.js无刷新分页完整案例

超实用的angular.js无刷新分页完整案例(需要放到服务器下运行！)

分页

41463 388

bootstrap4的jquery分页插件

bootstrap4的jquery分页插件，支持刷新不变页数

分页

39484 302

讨论这个项目（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
        });
    });
}