jQuery简单分页

所属分类:导航-分页

 11217  51  查看评论 (86)
jQuery简单分页 ie兼容6

更新时间:2017/9/19 下午1:35:49

更新说明:调整兼容性,兼容ie6、ie8


更新时间:2017-9-1 16:27:11

更新说明:修复setPage方法


更新时间:2017/8/16 下午10:07:56

更新说明:修复回调函数多次执行


更新时间:2017-8-16 11:00:41

更新说明:修复二次调用插件总页数为1时的BUG

新增:

1. 获取当前页数和总页数

$("#pagination3").pagination("getPage");// 获取当前页数和总页数

2. 设置当前页数和总页数

$("#pagination3").pagination("setPage", 1, 10);// 参数2:当前页数,参数3:总页数

3. 插件配置参数当前页数(currentPage)和总页数(totalPage)都是Number类型


使用方法

1.引入样式和脚本

<link rel="stylesheet" href="css/jquery.pagination.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.pagination.min.js"></script>

2.调用插件

$("#pagination3").pagination({
   currentPage: 4,// 当前页数
   totalPage: 16,// 总页数
   isShow: true,// 是否显示首尾页
   count: 7,// 显示个数
   homePageText: "首页",// 首页文本
   endPageText: "尾页",// 尾页文本
   prevPageText: "上一页",// 上一页文本
   nextPageText: "下一页",// 下一页文本
   callback: function(current) {
       // 回调,current(当前页数)
   }
});
相关插件-分页

个性的分页插件-JQPAGINATION

jqPagination 为我们提供了一种全新的分页方式,传统的分页是一系列的数字页码,而 jqPagination 则是采用了交互式的文本框来显示类似“Page 1 of 5”的页码。当我们选中文本框的时候,我们可以在文本框中输入指定的页码并跳转到该页。
  分页
 17947  24

jquery分页插件

堪称完美jquery分页插件
  分页
 19529  92

jQuery分页插件

jQuery分页插件,自带回调页数,代码少有注释。
  分页
 5533  21

jQuery分页插件bs_pagination

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

讨论这个项目(86)回答他人问题或分享插件使用方法奖励jQ币

    Super Man 0
    2017/9/18 22:29:24

    怎么不支持IE8想哭

        西瓜0
        2017/9/19 0:48:57

        之前是兼容的,貌似更新后不支持了。

        hellolxc0
        2017/9/20 10:08:12

        已更新修复

    回复
    0
    2017/9/18 14:40:58

    您好 请问 点击分页前三页都正常跳转显示 但是第四页往后 就会页码全部变为负数 请问这个是什么问题

    function listShow() {
            $.ajax({
                url: '/luntan/list_luntan.php',
                data: {
                    'category_id': 1,
                    'page': 1
                },
                success: function (res) {
                    console.log(JSON.parse(res))
                    var data = JSON.parse(res)
                    var html = template('tt', data)
                    $('#c_tbody').html(html)
                    //分页
                    var pageAll = data.page.total_pages
                    var currpage = data.page.now_page
                    $("#pagination1").pagination({
                        currentPage: currpage, //第几页
                        totalPage: pageAll,//总页数
                        count: 7, //页码个数
                        callback: function (current) {//回调  current 点击按钮的值
                            alert(current)
                            $.post('/luntan/list_luntan.php', {
                                'category_id': 1,
                                'page': current
                            }, function (res1) {
                                var data1 = JSON.parse(res1)
                                console.log(data1)
                                console.log(res1)
                                pageAll = data1.page.total_pages,//总页数
                                    pageNow = data1.page.now_page;//第几页
                                $("#pagination1").pagination("setPage", pageNow, pageAll);//从新设置分页
                                var html = template('tt', data1)
                                $('#c_tbody').html(html)
                            })
                        }
                    });
                }
            })
        }
    回复
    如若临风 0
    2017/9/15 11:13:17

    $(...).pagination is not a function这是为啥,该导入的js都导入了,版本也一样

    回复
    Together° 0
    2017/9/11 19:16:26

    不兼容ie8么?

        hellolxc0
        2017/9/12 8:49:45

        兼容

    回复
    lydragoon 0
    2017/9/7 18:51:16
    页面在第一页的时候,首页和第一页按钮是不显示的,这个正常,但是如果在最后一页的话,下一页和首页还会显示
        hellolxc0
        2017/9/7 22:34:59

        好好看demo

    回复
    俄の木囝 0
    2017/9/4 16:48:55

    楼主可不可以在源码了添加一个跳转页码的功能啊,这个工作量应该不大把;我现在只能用本办法,写一个单独的css样式来放到你的代码后边,点击跳转触发setpage这个方法设置,

        hellolxc0
        2017/9/4 17:22:50

        你这样做就可以实现了,这个只是简单的分页,不在扩展跳页功能了

    回复
    不再潇洒 0
    2017/9/1 13:58:28

    $("#pagination3").pagination("setPage", 1, 10);// 参数2:当前页数,参数3:总页数

    这个方法有bug,我第一次设置总页数为10,然后设置总页数为0,然后再次设置总页数为5的时候,页码是是空白的。

        hellolxc0
        2017/9/1 16:02:17

        总页数为0,那就是没有一条数据了,没数据就不应该再调用分页了,而是应该显示无相关数据!

        不再潇洒0
        2017/9/1 16:34:55
        但是我有给页数设置的时候,分页是不会出来的!
        hellolxc0
        2017/9/1 16:42:57

        setPage现在也更新了,审核通过后,你再下载试试

    回复
    俄の木囝 0
    2017/8/30 14:20:39

    设置当前页码的时候变量传参进去为什么会没有效果,也不报错,

    $("#setPage").on("click", function() {
        b = $(".tz").val();
        $("#pagination3").pagination("setPage", b, 10);
    });
        hellolxc1
        2017/8/30 16:57:06

        别传字符串,是Number类型的

    回复
    浅谈---坤 0
    2017/8/27 15:07:25

    楼主,可以前端控制每一页数据条数吗?

        hellolxc0
        2017/8/27 20:55:58

        每页显示条数需要自己处理

    回复
    rp 0
    2017/8/27 12:52:30

    回调的current为空,下一页下一页data-current="NaN",什么情况,BUG吗

        rp0
        2017/8/27 12:58:42
        没事了,原来是JQ版本的问题。。
    回复
取消回复