这个是很简单的一种分页，只能对列表进行分页。为了开发有可能需要用到记录下来

Html代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>li文章分页</title>
  6.     <script src="../../../project/HTML/Temporary/JS/jquery-3.2.1/jquery-3.2.1.min.js"></script>
  7.     <script src="../../../project/HTML/Temporary/JS/pagenation.js"></script>
  8. </head>
  9. <body>
  10. <ul id="all">
  11.     <li>第1集</li>
  12.     <li>第2集</li>
  13.     <li>第3集</li>
  14.     <li>第4集</li>
  15.     <li>第5集</li>
  16.     <li>第6集</li>
  17.     <li>第7集</li>
  18.     <li>第8集</li>
  19.     <li>第9集</li>
  20.     <li>第10集</li>
  21. </ul>
  22. <div class="page">
  23.     <div id="page">
  24.  
  25.     </div>
  26.  
  27. </div>
  28. <script>
  29.     var zz=getzz()
  30.     var pageno=1 ; //当前页
  31.     var pagesize=5; //每页多少条信息
  32.     if(zz.length%pagesize==0){
  33.         var  pageall =zz.length/pagesize ;
  34.     }else{
  35.         var  pageall =parseInt(zz.length/pagesize)+1;
  36.     }   //一共多少页
  37.     change(1);
  38. </script>
  39. </body>
  40. </html>

引入的pagenation文件里面其实就是两个函数：

  1. function getzz() {
  2.     var a = $("ul#all li");
  3.     var zz =new Array(a.length);
  4.     for(var i=0;i <a.length;i++){
  5.         zz[i]=a[i].innerHTML;
  6.     } //div的字符串数组付给zz
  7.     return zz;
  8. }
  9. function change(e){
  10.     debugger
  11.     pageno=e;
  12.     if(e<1){
  13.         e=1;pageno=1;//就等于第1页 ， 当前页为1
  14.     }
  15.     if(e>pageall){  //如果输入页大于最大页
  16.         e=pageall;pageno=pageall; //输入页和当前页都=最大页
  17.     }
  18.     $("#all").html("");//全部清空
  19.     var html="";
  20.     for(var i=0;i<pagesize;i++){
  21.         html += '<li>' + zz[(e-1)*pagesize+i] +'</li>';//创建一页的li列表
  22.         if(zz[(e-1)*pagesize+i+1]==null) break;//超出最后的范围跳出
  23.     }
  24.     $("ul#all").html(html);//给ul列表写入html
  25.     var ye="";
  26.     for(var j=1;j<=pageall;j++){
  27.         if(e==j){
  28.             ye=ye+"<span><a href='#' onClick='change("+j+")' style='color:#FF0000'>"+j+"</a></span> "
  29.         }else{
  30.             ye=ye+"<a href='#' onClick='change("+j+")'>"+j+"</a> "
  31.         }
  32.     }
  33.     var pageContent="";
  34.     pageContent +='第<span id=\"a2\">'+pageno+'</span>/';
  35.     pageContent +='<span id="a1">'+pageall+'</span>页';
  36.     pageContent +='<span id="a3">'+ye+'</span>';
  37.     pageContent +='<a href="#" onClick="change(--pageno)">上一页</a>';
  38.     pageContent +='<a href="#" onClick="change(++pageno)">下一页</a>';
  39.     $("#page").html(pageContent);
  40. }

jquery中对于ul>li列表分页。学习记录的更多相关文章

  1. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  2. Delphi中封装ADO之我重学习记录

    delphi adodataset ctstatic 数据是缓存在服务器端还是客户端 答:客户端,开启本地缓存功能后,就能数据在本地批量修改后,再批量提交,减少了网络传送   原创,专业,图文 Del ...

  3. 关于css中使用ul li的一些体会

    参考网址:http://hi.baidu.com/july_leo/item/5237cd612070ae2668105b40 如何修改ul li的显示 ----------------------- ...

  4. ul li列表元素浮动导致border没有底边解决办法

    如图,当ul li,li元素浮动,并且ul元素也overflow:hidden清除浮动的时候,给li元素加了border,但是不显示底边,这时候要看是不是没有给li元素加高,因为加了border之后默 ...

  5. html中去除ul,li标签的样式列表标签的点？

  6. jQuery中的基本的选择器学习(补充版)

    先看整体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  7. 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

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

  8. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  9. jquery中not的用法[.not(selector)]

    描述: 从匹配的元素集合中移除指定的元素. 如果提供的jQuery对象代表了一组DOM元素,.not()方法构建一个新的匹配元素的jQuery对象,用于存放筛选后的元素.所提供的选择器是对每个元素进行 ...

随机推荐

  1. aspectj 与 spring 自定义注解

    ** * ErrorCode: * * @author yangzhenlong * @since 2016/7/21 */ @Target({ElementType.METHOD}) @Retent ...

  2. nginx编译报错

    [root@vm_0_2_centos nginx-1.12.2]# ./configure --prefix=/application/nginx-1.12.2 --user=www --group ...

  3. flink日记

    直接下载 解压, 运行 ./bin/start-cluster.sh 几个概念: 批处理: 大数据量,不要求实时. 输入源是有界的 流处理:实时要求高,通常在毫秒级, 数据量比较小,但是输入源是无界的 ...

  4. Python数据可视化--matplotlib

    抽象化|具体化: 如盒形图 | 现实中的图 功能性|装饰性:没有装饰和渲染 | 包含艺术性美学上的装饰 深度表达|浅度表达:深入层次的研究探索数据 | 易于理解的,直观的表示 多维度|单一维度:数据的 ...

  5. c++中 函数的默认参数 学习

    默认参数指的是当函数调用中省略了实参时     自动使用一个默认的值. 对于带参数列表的函数,必须从右向左添加默认值  (就是说她的右边肯定是先有默认的值) fun(int ,1,2,3) 不能 fu ...

  6. python处理时间和日期

    时间和日期  (图中错误修正:dt_obj.strftime(format))     import time, datetime 1. datetime obj 1) datetime dateti ...

  7. maya2018安装失败如何卸载重装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  8. DRF之权限认证频率组建

    认证组件 很久很久以前,Web站点只是作为浏览服务器资源(数据)和其他资源的工具,甚少有什么用户交互之类的烦人的事情需要处理,所以,Web站点的开发这根本不关心什么人在什么时候访问了什么资源,不需要记 ...

  9. 错误 chamfermatching.cpp:969:30: error: the compiler can assume that the address of ‘annotate_img’

    修改 ./build/modules/contrib/CMakeFiles/opencv_contrib.dir/flags.make文件,删掉-Werror=address,然后重新make

  10. SigmoidCrossEntropyLoss

    http://blog.csdn.net/u012235274/article/details/51361290