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

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. AngularJS页面【uib-dropdown】控件在模态窗口（弹出窗）中无法使用问题

    如果你的下拉框中有属性 dropdown-append-to-body 将它去掉,即可正常使用该插件. <div class="btn-group dropdown" uib ...

  2. laravel 用户名登录

    laravel 用户名登录 默认登录设置为用户登录 laravel 5.3+ 修改文件(app\Http\Controllers\Auth\LoginController.php)增加 public ...

  3. TCP并发服务器简单示例

    并发服务器的思想是每一个客户的请求并不由服务器直接处理,而是由服务器创建一个子进程来处理 1. 服务器端 #include <stdio.h> #include <sys/types ...

  4. C#学习 - 关于Interlocked.CompareExchange()的用法

    https://blog.csdn.net/jianhui_wang/article/details/80485517 Interlocked.CompareExchange有一组函数   名称 说明 ...

  5. 21-----BBS论坛

    BBS论坛(二十一) 21.1.编辑轮播图功能完成 (1)cms_banners.html 把属性绑定到<tr>上面,方便找到各属性的值 <tbody> {% for bann ...

  6. 2018.6.1学习CSS5里顺丰盒子小问题

    在制作下面这样的小盒子时 编写的代码 首先要对li元素设置浮动. 在设置这个li元素下面的a元素时, 因为没有转行内块,inline-block,结果显示出来的页面,鼠标在经过这个选择时(:hover ...

  7. IIS 配置asp.net 环境

    打开Internet信息服务管理器,在左侧点击“应用程序池”,下面将以asp.net v4.0 程序池为例 在中间的“ASP.NET V4.0”上右键“高级选项”,展开“进程模型”,找“标识”选项,然 ...

  8. sql server 2017安装

    下载: 1. 2. 3. 安装步骤: https://www.cnblogs.com/ksguai/p/5869558.html 管理工具: Microsoft SQL Server Manageme ...

  9. My first Python program(附增加清屏方法）

    #TempConvert.py TempStr = input("请输入带有符号的温度值:") if TempStr[-1] in ['F', 'f']: C = (eval(Te ...

  10. java.lang.ArrayIndexOutOfBoundsException: 160

    项目突然出现这个问题java.lang.ArrayIndexOutOfBoundsException: 160,找了好大半天没有找出来哪里的问题,最后发现时fastjson.jar 版本太低了造成的, ...