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

Html代码：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>li文章分页</title>

    <script src="../../../project/HTML/Temporary/JS/jquery-3.2.1/jquery-3.2.1.min.js"></script>

    <script src="../../../project/HTML/Temporary/JS/pagenation.js"></script>

</head>

<body>

<ul id="all">

    <li>第1集</li>

    <li>第2集</li>

    <li>第3集</li>

    <li>第4集</li>

    <li>第5集</li>

    <li>第6集</li>

    <li>第7集</li>

    <li>第8集</li>

    <li>第9集</li>

    <li>第10集</li>

</ul>

<div class="page">

    <div id="page">

    </div>

</div>

<script>

    var zz=getzz()

    var pageno=1 ; //当前页

    var pagesize=5; //每页多少条信息

    if(zz.length%pagesize==0){

        var  pageall =zz.length/pagesize ;

    }else{

        var  pageall =parseInt(zz.length/pagesize)+1;

    }   //一共多少页

    change(1);

</script>

</body>

</html>

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

function getzz() {

    var a = $("ul#all li");

    var zz =new Array(a.length);

    for(var i=0;i <a.length;i++){

        zz[i]=a[i].innerHTML;

    } //div的字符串数组付给zz

    return zz;

}

function change(e){

    debugger

    pageno=e;

    if(e<1){

        e=1;pageno=1;//就等于第1页 ， 当前页为1

    }

    if(e>pageall){  //如果输入页大于最大页

        e=pageall;pageno=pageall; //输入页和当前页都=最大页

    }

    $("#all").html("");//全部清空

    var html="";

    for(var i=0;i<pagesize;i++){

        html += '<li>' + zz[(e-1)*pagesize+i] +'</li>';//创建一页的li列表

        if(zz[(e-1)*pagesize+i+1]==null) break;//超出最后的范围跳出

    }

    $("ul#all").html(html);//给ul列表写入html

    var ye="";

    for(var j=1;j<=pageall;j++){

        if(e==j){

            ye=ye+"<span><a href='#' onClick='change("+j+")' style='color:#FF0000'>"+j+"</a></span> "

        }else{

            ye=ye+"<a href='#' onClick='change("+j+")'>"+j+"</a> "

        }

    }

    var pageContent="";

    pageContent +='第<span id=\"a2\">'+pageno+'</span>/';

    pageContent +='<span id="a1">'+pageall+'</span>页';

    pageContent +='<span id="a3">'+ye+'</span>';

    pageContent +='<a href="#" onClick="change(--pageno)">上一页</a>';

    pageContent +='<a href="#" onClick="change(++pageno)">下一页</a>';

    $("#page").html(pageContent);

}

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. MessageFormat 格式化String

    public static String buildFailureString(AtomicInteger count, String cause) { return MessageFormat.fo ...

  2. JS数组去重总结

    方法一: 双层循环,外层循环元素,内层循环时比较值 如果有相同的值则跳过,不相同则push进数组 Array.prototype.distinct = function(){ var arr = th ...

  3. 前端面试题 ----css篇

    转载自https://www.cnblogs.com/zhangshuda/p/8465043.html,感谢原博主 1.css盒模型有哪些及区别content-box border-box padd ...

  4. CheckStyle unable to read from stream

    “我在对比了其他正确的ChechStyle文件之后,发现这个无法导入的文件的编码和正确文件的编码不一样,我的xml文档编码为ANSI,而导入正确的ChechStyle文件为UTF-8编码,在我将自己的 ...

  5. 工作中常用到的sql命令！！！

    一.mysql数据库日常操作.     1.启动mysql:/etc/init.d/mysql start (前面为mysql的安装路径)     2.重启mysql:  /etc/init.d/my ...

  6. c++ 多线程 0

    1.1 何谓并发 最简单和最基本的并发,是指两个或更多独立的活动同时发生.  (注意区别于计算机中的并发情况!!!!!!!!!!见下面) 1.1.1 计算机系统中的并发:是指在单个系统里同时执行多个独 ...

  7. 2019.03.21 读书笔记 基元类型的Parse与TryParse 性能与建议

    Parse转换失败时会抛出异常,耗损性能,如果转换成功,则与TryParse无差异.查看源码,tryparse的代码更多一些,在失败时,反而性能更优,主要是抛出异常耗损了性能.所以在不确定是用Tryp ...

  8. TCP连接的ISN、连接建立超时及TCP的长短连接

    问题现象: 一.TCP连接的ISN         之前我们说过初始建立TCP连接的时候的系列号(ISN)是随机选择的,那么这个系列号为什么不采用一个固定的值呢?主要有两方面的原因 防止同一个连接的不 ...

  9. 性能测试工具Jmeter02-安装配置

    安装配置 1.安装配置jdk 2.Jmeter下载地址:http://mirror.bit.edu.cn/apache/jmeter/binaries/ 下载后,解压文件到任意目录,避免在一个有空格的 ...

  10. linux 访问 windows 共享文件夹

    http://www.01happy.com/linux-access-windows-shares-folders/