<!DOCTYPE html>

 <html>

 <head>

     <title>pagination</title>

     <style type="text/css" media="screen">

         a{

             padding: 5px;

             border:1px solid #ddd;

             border-radius: 5px;

             margin-right: 5px;

             cursor: pointer;

         }

         span{

             border: 1px solid #ddd;

             display: inline-block;

             width: 60px;

             height: 20px;

             margin-top: 30px;

             text-align: center;

         }

         input{

             width: 60px;

             text-align: center;

             border:1px solid #ddd;

             height: 20px;

         }

     </style>

 </head>

 <body>

     <div id="content"></div>

     <span contenteditable="true"></span>

     <button id="btn" type="button">跳转</button>

     <input type="text">

     <button id="btn2" type="button">总页数</button>

     <div id="hidden" type="hidden" num="1"></div>

     <script src="jquery-1.12.4.min.js"></script>

     <script>

         function init(pa,p){

             var    html = '<a class="pre">上一页</a>';

             if(pa<=5){

                 for(var i=1;i<=pa;i++){

                     html += '<a>'+i+'</a>';

                 }

             }else{

                 if(p+3<pa && p-3>1){

                     html += '<a>1</a><a>...</a>';

                     for(var i=p-2;i<=p+2;i++){

                         html += '<a>'+i+'</a>';

                     }

                     html += '<a>...</a><a>'+pa+'</a>';

                 }

                 if(p+3>=pa && p-3>1){

                     html += '<a>1</a><a>...</a>';

                     for(var i=p-2;i<=pa;i++){

                         html += '<a>'+i+'</a>';

                     }

                 }

                 if(p-3<=1 && p>5){

                     for(var i=1;i<=p+2;i++){

                         html += '<a>'+i+'</a>';

                     }

                     html += '<a>...</a><a>'+pa+'</a>';

                 }

                 if(p-3<=1 && p<5){

                     for(var i=1;i<=p+2;i++){

                         html += '<a>'+i+'</a>';

                     }

                     html += '<a>...</a><a>'+pa+'</a>';

                 }

                 html += '<a class="last">下一页</a>'

             }

             $('#content').html(html);

         }

         $(function(){

             init(30,1);

             var time = setInterval(function(){

                 $('a:not(a.last):not(a.pre)').on('click',function(){

                     var p = Number($(this).text());

                     $('#hidden').attr('num',p);

                     init(30,p);

                 });

                 $('#btn').click(function(){

                     var p = Number($('span').text());

                     var pa = Number($('input').val())!=""?Number($('input').val()):5;

                     init(pa,p)

                 });

                 $('#btn2').click(function(){

                     var p = Number($('span').text())!=""?Number($('span').text()):1;

                     var pa = Number($('input').val())!=""?Number($('input').val()):5;

                     init(pa,p)

                 });

                 //problem

                 // $('.last').click(function(){

                 //     var p = $('#hidden').attr('num');

                 //     p++;

                 //     $('#hidden').attr('num',p);

                 //     var pa = Number($('input').val())!=""?Number($('input').val()):30;

                 //     console.log(pa,p)

                 //     init(pa,p)

                 // });

             },400);

         })

     </script>

 </body>

 </html>

pagination 分页的更多相关文章

  1. Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记

    入职以后的第二个任务  根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...

  2. EasyUI基础入门之Pagination(分页)

    前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...

  3. doT.js模板和pagination分页应用

    doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...

  4. jQuery Pagination分页插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 第二百零九节，jQuery EasyUI，Pagination(分页)组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  6. Django框架 之 Pagination分页实现

    Django框架 之 Pagination分页实现 浏览目录 自定义分页 Django内置分页 一.自定义分页 1.基础版自定义分页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  7. jQuery Pagination分页插件--刷新

    源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...

  8. Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  10. jq pagination分页 全选、单选的思考

    $().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...

随机推荐

  1. 安卓真机调试 出现Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE....

    [2016-08-20 14:38:39 - hybrid-android] Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE[2016-0 ...

  2. IOS-UIDynamic

    UIDynamic中的三个重要概念 Dynamic Animator:动画者,为动力学元素提供物理学相关的能力及动画,同时为这些元素提供相关的上下文,是动力学元素与底层iOS物理引擎之间的中介,将Be ...

  3. Linux下文件的三种时间戳

    Linux下文件的三种时间标记 三种时间对应关系表 column column column 访问时间 Access atime 修改时间 Modify mtime 状态改动时间 Change cti ...

  4. Python 创建本地服务器环境生成二维码

    一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...

  5. My year of 2016

    2016, year of excellence.   Year of happiness. In Beijing we can also find some happiness which is s ...

  6. 让Fiddler 直接抓取java程序的方法

    Fiddler官网给出的解决办法(见http://www.fiddler2.com/fiddler/help/hookup.asp#Q-JavaTraffic)是设置jvm参数,如 jre -Dpro ...

  7. Java 之 数据库

    1.SQL--结构化查询语言 a.分类:①DDL--数据定义语言 ②DQL--数据查询语言 ③DML--数据操作语言 ④DCL--数据控制语言 b.DDL:包括对数据库的创建.使用.删除,对表的创建. ...

  8. qtranslate

    qtranslate可以帮助用户快速的建立多语言网站平台,qTranslate 插件就是一个功能强大的 WordPress 多语言插件. 它允许用户在配置页添加新的语言.在 URL 结构方面,qTra ...

  9. Hackerrank11 LCS Returns 枚举+LCS

    Given two strings,  a and , b find and print the total number of ways to insert a character at any p ...

  10. 基于lcov实现的增量代码UT覆盖率检查

    背景介绍 配合CppUTest单元测试框架,lcov提供了一套比较完整的工程工具来对UT覆盖率进行度量.但对有些团队来说,历史负担太重,大量的遗留代码没有相应的UT.在这种情况下,对新增代码进行覆盖率 ...