jquery实现分页页码

实例源码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src='jquery-1.7.min.js' type="text/javascript"></script>
<style type="text/css">
    a{ color: red; padding-bottom: 10px}
.pagelist a{ padding-left: 10px; color: green;}
</style>
</head>
<body>

<a href="javascript:void(0)" οnclick="aa(0,1)">首页</a>
<div id="pagelist" class="pagelist">
</div>
<a href="javascript:void(0)" οnclick="aa(0,10)">尾页</a>
<input type="hidden" id="hid_index" value="0">
<input type="hidden" id="hid_num" value="1">
<script type="text/javascript">
        var total=10;//总页数
        var num=5;//页码显示几个
        $("#hid_index").attr("value",num);
        showhtml(0);
        function showhtml(m) {
            var strhtml="";
            var f= $("#hid_index").val();
            var c_num= $("#hid_num").val();
            for(var i=parseInt(c_num);i<=f;i++)
            {
                strhtml+="<a href='javascript:void(0)' οnclick='aa(0,"+i+")'>"+i+"</a>";
            }
            if(parseInt(m)<=0) {
                strhtml += "<a href='javascript:void(0)' οnclick='aa(1," + (parseInt(f) + 1) + ")'>...</a>";
            }
            $("#pagelist").append(strhtml);
        }
        function aa(k,n)
        {
            if(parseInt(k)>0)
            {
                $("#pagelist").html("");
                $("#hid_index").attr("value",n+(parseInt(num)-1));
                $("#hid_num").attr("value",parseInt($("#hid_num").val())+num);
                showhtml(0);
            }
            else
            {
               if(n==1)
               {
                   $("#pagelist").html("");
                   $("#hid_index").attr("value",num);
                   $("#hid_num").attr("value",1);
                   showhtml(0);
               }
                if(n==10)
                {
                    $("#pagelist").html("");
                    $("#hid_index").attr("value",10*parseInt(num));
                    $("#hid_num").attr("value",10*parseInt(num)-5);
                    showhtml(1);
                }
            }

}

</script>
</body>
</html>

jquery实现分页页码相关推荐

Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
Jquery自定义分页插件
效果: 核心代码: 自定义Jquery插件grid.js //Jquery自定义分页插件 (function($) {$.fn.grid= function(options) {var objGrid ...
分页页码的前端显示的实现
分页页码的前端显示实现效果说明准备做分页的时候滚回去找了一下之前写过的demo结果被自己写的丑哭了(大概长这样): 主要是不符合现在一般网站的跳转习惯,自己用着都觉得不方便,所以重新写了一下新的分 ...
JQuery实现分页功能
使用JQuery实现分页功能. 1.分页栏HTML码 <div class="g-cf g-pagerwp"><div style="visibilit ...
JQuery表格分页
JQuery表格分页开发工具与技术:工具:Visual Studio,技术:JQuery 作者:刘胜撰写时间:2019-05-08 实现效果是跟幻灯片一样的,当前页CurPage = 1,分页刚显 ...
前端分页页码静态部分制作
效果: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"><titl ...
jquery 3D分页翻转滑块
jquery 3D分页翻转滑块,jquery分页,jquery插件,jquery,3D翻转,css3分页,360度旋转,网页特效代码3D分页翻转滑块是一款使用网格样式与滑块效果分页的特效. 转载于:h ...
Jquery的分页插件
Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/ 下载地址: https://github.com ...

jquery实现分页页码

jquery实现分页页码相关推荐

最新文章

热门文章