文档章节

jquery插件分页

别人说我名字很长
 别人说我名字很长
发布于 2015/01/15 18:45
字数 791
阅读 259
收藏 10

先看效果:我弄的是一页1条数据


下面直接上代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jquery ajax 分页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="stilearning" />
    <link href="/static/home/css/css.css" rel="stylesheet">
    <script src="/static/js/jquery-1.10.2.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    #fpage{width: 595px;margin: 0px auto;padding: 10px 0px 30px;font-size: 12px;}
    #fpage span{border: 1px solid #ccc;border-radius: 3px;padding: 6px 10px;margin-left:3px;}
    #fpage span:hover{background: #3B99FC;color: #fff;border: 1px solid #3B99FC;}
    #fpage span:hover a{color: #fff;}
    #fpage span.active{background: #3B99FC;color: #fff;border: 1px solid #3B99FC;}
    #fpage span.active a{color: #fff;}
    #myredirect{width: 30px;padding-top: 5px;padding-bottom: 5px;height: 16px;text-align: center;border: 1px solid #ccc;border-radius: 4px;margin-left: 10px;}
   </style>
</head>
<body style="background:#f5f5f5;">
    <header class="i_header">jquery ajax 分页</header>
    <div class="arc">
        <div class="arc_ul" id="list"></div>
        <div id="fpage"></div>
    </div>
    <footer class="i_footer">底部版权</footer>

<script>
//ajax分页插件
(function($){
    $.fn.paging = function(options){
            var ops = $.extend(true,$.fn.paging.defaults, options);
            ops.mythis = this;

            //分页数据函数,得到数据并显示
            var getData = function(page,size){
                var data =$.extend({},ops.data, {page:page,size:size});
                $.ajax({
                    type:ops.type,
                    url:ops.url,
                    data:data,
                    dataType:ops.dataType,
                    beforeSend: ops.beforeSend,
                    success: function(json){
                        ops.list(json);
                        getPageBar(json);
                        ops.fpage(json);
                    }
                });
            }
            getData(1,ops.size);

            var totalPage;//总页数
            //*分页条显示函数
            var getPageBar = function(json){
                var total = json.status;//总条数
                if(!total){
                    return ;
                }
                totalPage = Math.ceil(total/ops.size);//总页数
                var page = ops.page;//当前页

                //当前页大于最大页数
                if(page>totalPage) page = totalPage;
                //当前页小于1
                if(page<1) page=1;
                 
                var pageStr= ' <span>共'+total+'条 </span> <span>'+page+'/'+totalPage+'</span>';
                //如果是第一页
                if(page != 1){
                    pageStr += ' <span><a href="javascript:void(0)" rel="1">首页</a></span> <span><a href="javascript:void(0)" rel="'+(page-1)+'">上一页</a></span>';
                }

                var cnum = parseInt(ops.maxnum/2);//数字分页的中间数
                var start = page-cnum<1? 1:page-cnum;//数字开始
                var end = page+cnum>totalPage ? totalPage : page+cnum;//数字结束
                for(var i=start;i<=end;i++){
                    if(i==page){
                        pageStr += ' <span class="active"><a href="javascript:void(0)" rel="'+i+'">'+i+'</a></span>';
                    }else{
                        pageStr += ' <span><a href="javascript:void(0)" rel="'+i+'">'+i+'</a></span>';
                    }
                }

                //如果是最后页
                if(page<totalPage){
                    pageStr += ' <span><a href="javascript:void(0)" rel="'+(page+1)+'">下一页</a></span> <span><a href="javascript:void(0)" rel="'+totalPage+'">尾页</a></span>';
                }
                pageStr += '<input type="text" id="myredirect" class="myredirect">'
                ops.mythis.html(pageStr);
                ops.mythis.find(".myredirect").val(ops.page);
                ops.mythis.find(".myredirect").focus();
            }

            //点击分页跳转
            ops.mythis.on('click', 'span a', function(event) {
                ops.page = parseInt($(this).attr("rel"));
                if(ops.page){getData(ops.page,ops.size);}
            });

            //datatables分页跳转
            ops.mythis.on('keyup','.myredirect',function(e){
                var ipage = parseInt($(this).val());
                if(isNaN(ipage) || ipage<1){
                    return false;
                }else if(ipage>totalPage){
                    ipage=totalPage;
                }
                ops.page = ipage;
                getData(ipage,ops.size);
            });

        return this;
    };

    $.fn.paging.defaults = {
        page:1,//当前第几页
        size:3,//每页显示数
        maxnum:4,//数字分页数 1 2 3 4 5 这样的
        mythis:{},//当前的分页对象
        data:{},//发向后台的额外数据
        list:function(){},//列表
        fpage:function(){},//显示分页
        url:"/home/list",//后台地址
        type:"GET",//发送方式
        dataType:"json",//默认的
        beforeSend: function(){$("#list").append('<liid="loading">loading……</li>');},
    }

})(jQuery);

$(function(){

    //使用方法一
    $("#fpage").paging({
        page:1,
        size:3,
        fpage:function(json){
            console.log(json);
            //$("#fpage").html("hello world");//这里你可以自己改成你想要的分页样式
        },
        list:function(json){
            var html="";
            var list = json.data;
            $.each(list,function(k,v){
                 html += '<div class="arc_list"><div class="pic"><img src="/static/home/images/7000_2.jpg"></div><h3>'+v.name+'</h3></div>';
            });
            $("#list").html(html);
        }
    });

    //使用方法二 插件的defaults 
    $.extend(true,$.fn.paging.defaults,{
        page:1,//当前第几页
        size:1,//每页显示数
        list:function(json){
            var html="";
            var list = json.data;
            $.each(list,function(k,v){
                 html += '<div class="arc_list"><div class="pic"><img src="/static/home/images/7000_2.jpg"></div><h3>'+v.name+'</h3></div>';
            });
            $("#list").html(html);
        },//列表
        url:"/home/list",//后台地址
    }); 
    $("#fpage").paging();
    
});
</script>
</body>
</html>



© 著作权归作者所有

别人说我名字很长
粉丝 58
博文 262
码字总数 113407
作品 0
济南
程序员
私信 提问
20 个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

红薯
2012/04/04
14.7K
6
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0
21 个最佳的 jQuery 翻页插件

jPages [ Demo || Download ] jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和滚动浏览,延迟显示以及完全可定制的导航面板。 Easy pagination with jQuery and Ajax [...

oschina
2013/05/14
10.7K
12
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.7K
1
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
808
5

没有更多内容

加载失败,请刷新页面

加载更多

Kubernetes云供应商架构的未来

首先,我想分享SIG的使命,因为我们用它来指导我们现在和将来的工作。从我们的章程中直接来看,SIG的使命是简化,开发和维护云供应商集成,作为Kubernetes集群的扩展或附加组件。这背后的动机...

Linux就该这么学
26分钟前
1
0
线程池没你想的那么简单

前言 原以为线程池还挺简单的(平时常用,也分析过原理),这次是想自己动手写一个线程池来更加深入的了解它;但在动手写的过程中落地到细节时发现并没想的那么容易。结合源码对比后确实不得...

crossoverJie
34分钟前
34
0
Scientific Linux开发停止 相关设备将迁移至CentOS上

在经历了将近14年的版本更迭之后,这个专注于科学领域的GNU/Linux发行版本不会发布下个重大版本更新--Scientific Linux 8了。 目前维护该发行版本的成员最终决定是时候休息了,今后将不再发布...

linuxCool
38分钟前
1
0
Redux

Redux概念 Redux = Reducer + Flux,数据层框架,将所有数据都存储到store中 Redux的工作流程 Antd的使用 安装npm install antd --save import 'antd/dist/antd.css'import { Input, Butto......

星闪海洋
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部