简单的jQuery分页插件

所属分类:导航-分页

 15768  45  查看评论 (95)
简单的jQuery分页插件 ie兼容8

更新时间:2017年5月10日14:15:18

更新说明:如果使用多个分页,那么会产生冲突,这里做个调整,更改了JS代码,其它所有的都不变,包括使用方法


使用方法

一、导入相关的JS和CSS

<link href="page.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="page.js"></script>

二、创建一个分页列表ul

<ul class="page" maxshowpageitem="5" pagelistcount="10"  id="page"></ul>

注意:

maxshowpageitem :最多显示的页码数字,必需pagelistcount : 每一个页面显示的数据的个数,必需id : 不用解释了吧,必需三、初始化分页

var GG = {
        "kk":function(mm){
            alert(mm);
        }
    }
$("#page").initPage(71,1,GG.kk);

或者:

function tt(dd){
    alert(dd);
}  
$("#page").initPage(71,1,tt);

注意:自己创建的脚本函数要设置一个参数,这个参数回返回当前点击的页面的页码

相关插件-分页
  分页
 15506  41

paging 分页插件

用于table分页
  分页
 24305  31

jQuery分页插件jPages

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

超实用精简的分页插件

精简实用的分页插件跨域调用的聚合的api分页逻辑简单易懂接口已经写好
  分页
 6720  9

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

    暂无,佳?? 0
    2017/6/5 0:43:49
    调用函数的时候初始化都会默认执行一次自定义函数。。我使用windows.location.href会导致无限刷新页面。。。作者你考虑过怎么解决吗?
        小黑0
        2017/6/19 15:49:42

        我也有这问题

    回复
    守候千年的狐 0
    2017/6/1 18:49:00

    怎么一直都在掉一个页面,就是

    我要点击2页的时候跳到我指定的页面怎么设置呀

    回复
    萧矢式 0
    2017/6/1 14:45:04
    你这个是只能静态私用的jquery分页吧
        葬梦0
        2017/6/3 9:22:25

        动态的也可以用啊,看你怎么用了

    回复
    zhanglonga 0
    2017/5/27 14:51:59
    大老  你的ul 结构里 定义打最大页数 跟一个显示 多少条  与初始化传进去的参数 啥区别
        葬梦3
        2017/5/27 16:32:17

        maxshowpageitem:页码最多显示几个,这是显示几个,比如说一共10页,那么显示的是12345,但是当你点击3的时候会显示23456,后面的并不是不显示了,只是被隐藏了。

        我怎么知道一共有多少页,总学过数学吧,比如说一共有100条数据(M=100)每一页最多显示10条(PP=10)那么最多有多少页?这应该理解吧?

        M就是初始化的第一个参数,PP就是ul中设置的pagelistcount

        zhanglonga0
        2017/6/1 11:34:02

        ? 你回答之前研究会了 哈哈

    回复
    叮、???  ̄咚 0
    2017/5/19 10:54:21
    var Total = "";
    function originData(param) {
          $.ajax({
              url: '/alarm_notice_sets.json?page=' + param,
              type: 'get',
              dataType: 'json',
              async: false,
              success: function(data) {
                  Total = data.list_size;
              },
              error: function(err) {
                  console.log(err)
              }
          })
      };
    $("#page").initPage(Total, 1, originData);

    请教大神  我该怎么在这里获取到变量Total呢,谢谢

        葬梦1
        2017/5/20 20:01:12
        function originData(param) {
              $.ajax({
                  url: '/alarm_notice_sets.json?page=' + param,
                  type: 'get',
                  dataType: 'json',
                  async: false,
                  success: function(data) {
                     var Total = data.list_size;
                     $("#page").initPage(Total, param, originData);
                  },
                  error: function(err) {
                      console.log(err)
                  }
              })
          };
        小钻风0
        2017/6/2 13:40:18
        这样会产生死循环的吧
        编程界的小学生0
        2017/6/17 9:56:18

        是啊,这样会产生死循环,这种代码我也是无语了。

    回复
    叮、???  ̄咚 0
    2017/5/19 10:52:24

    请教大神  我该怎么在这里获取到变量Total呢,谢谢

    回复
    路过蜻蜓 0
    2017/5/18 14:40:56
    大神方便给一分demo吗  
        葬梦0
        2017/5/18 15:16:42

        什么demo?

        路过蜻蜓0
        2017/5/18 15:46:27

        使用这个插件的demo啊,怎么获取的,如何显示页面的

        路过蜻蜓0
        2017/5/18 15:47:11

        谢谢大神啊

        葬梦3
        2017/5/20 20:11:41

        这个demo不太好给,因为如果写一个还比较多的,还需要后台返回数据,我可以给你看个一个简单的前台写法:至于后台数据怎么返回看你自己了

        function init(page){
            var formData = {.........};
            var url="......";
            var data = getDataWithUrlandFormData(url,formData);
            var dataObj = JSON.parse(data);
            var summerList = dataObj.summerList;
            $("#page").initPage(summerList, page, init);
            resetList(dataObj);
        }
        
        function getDataWithUrlandFormData(url,formData){
            var returnResult="";
            $.ajax({
                url: url,
                type: 'get',
                data:formData,
                async: false,
                success: function(data) {
                    returnResult = data;
                },
                error: function(err) {
                    console.log(err)
                }
            });
            return returnResult;
        }
        
        function resetList(dataObj){
            //这里设置你要更新页面的代码
        }
    回复
    0
    2017/5/11 15:53:09

    大哥,请问用Ajax 需要返回哪些信息

        葬梦1
        2017/5/14 19:24:53

        第一个信息是你显示内容信息,第二个信息是当前页的信息,第三个信息是你显示内容总计有多少条的信息

    回复
    Robert Downey Jr. 0
    2017/5/11 15:07:16

    请问不进行ajax请求能实现分页效果吗,或者说请求回来数据后该怎么做,才能实现分页效果(HTML中的数据分页效果),我是新手前面的评论看完了也没有看懂,请老大抽时间给个回复

        葬梦1
        2017/5/14 19:30:54

        家里出了事情,这几天没有回复,抱歉啊,是这样的这个插件主要用于jquery的分页调用,但是如果说,不用ajax也是可以得,我给你简单说明一下。

        function tt(page){
            alert(page);
            //这里是访问新页面的JS写法,比如说windows.location.href
        }  
        $("#page").initPage(M,P,tt);

        你每个页面写上这样就好,但是你要注意,你每次调用页面,要传回两个信息,一个是你访问的一共有几条信息就是M,还有一个是当前页的信息P,可能不太明白这个P怎么来,你看下tt这个函数,有个page,这个page就是你点击了之后的页面,你需要传入新的页面作为一个新的P


        小黑0
        2017/6/19 15:40:25

        这么写会死循环的

    回复
    CodeMaker 0
    2017/5/11 10:33:25
    var daifuList = {
        "kk": function(mm) {
            var pagesize = 2;
            $.ajax({
                type: 'post',
                //pagesize为咩野显示数  pageindex为当前页
                data: {
                    pagesize: pagesize,
                    pageindex: mm
                },
                url: "{:U('Money/getDaifuLsit')}",
                dataType: 'json',
                success: function(res) {
                    var result = res.data;
                    //var total=res.data;
                },
                error: function() {
                    swal(
                        '',
                        '网络异常!请重新连接',
                        'error'
                    )
                }
            });
        }
    };
    $("#page1").initPage(10, 1, daifuList.kk);

    作者老大,我想问一下。total怎么传给initPage里面。total是我查询出来的总记录数,写成全局变量来传不行

        六月暮雪0
        2017/5/12 13:43:50

        对  全局变量是不行的   我也是   

        zerosto0
        2017/5/18 13:23:17

        你要记住,你的事异步请求,在发送请求到接收到数据的时间段里,已经执行了initPage这个函数了,你设置成全局也是没用,应为函数已经调用了,两个解决方法,1. ajax添加async: false这个参数,变成同步请求;2.  initPage这个方法的执行放在ajax的success回调函数里面

    回复
取消回复