jQuery简单分页

所属分类:导航-分页

 16455  66  查看评论 (97)
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(当前页数)
   }
});
相关插件-分页

好看的分页插件-JQUERY PAGINATION PLUGIN

好看的分页插件-JQUERY PAGINATION PLUGIN
  分页
 43082  46
  分页
 18955  49

官网分页特效

官网分页特效
  分页
 12987  78

jQuery长文本分页插件textify

jQuery实现的长文本分页特效,textify是一个jQuery插件,可以自动创建一个有吸引力的和现代的你的内容布局,避免让用户不再枯燥的文本。
  分页
 8845  55

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

    ζ??????°Se7en 0
    2017/11/9 10:08:38

    有源码吗?  我如果有一页的话 也想让他显示,为了提醒客户,但是现在就消失了。

    回复
    Z 0
    2017/10/28 23:21:47

    为什么说没有这个函数

    回复
    Z 0
    2017/10/28 23:18:29

    求解为什么在另一个界面能用   在这个界面又识别不了这个函数了

    回复
    叶半夏 0
    2017/10/17 18:18:14

    怎么获得当前点击的页码,实现更新currentPage.给页码绑定单击事件绑不上,求解答

        sai1231231230
        2017/10/26 16:28:08

        我也这情况

        透。心凉、1
        2017/10/27 14:14:04
        点击事件已经自动给绑好了,不是有个回调函数么。回调函数里面的参数就是当前点击的页码。 callback: function(current) {      // 回调,current(当前页数)  }
    回复
    zqlkk 0
    2017/10/16 15:42:22
    可以发不压缩的js出来吗,我要的效果是按下第一页时,首页和<按键也还存在 回复
    闹够了没有 0
    2017/9/27 12:01:15

    表示不会应用到自己的项目中去啊?

    回复
    ??ZFAN。 0
    2017/9/25 22:06:57
    新手第一次使用分页插件,插件按照上面步骤引用了,评论都学习了,可是还是没用,楼主怎么联系自己数据实现分页啊! 回复
    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都导入了,版本也一样

        Z0
        2017/10/28 23:08:36

        解决了吗,我的也是

    回复
取消回复