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

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. C语言中的预处理命令

    预处理功能是C语言的重要功能. 问:为什么要预处理,什么是预处理? 答:我们知道高级语言的运行过程是通过编译程序(编译器)把源代码翻译成机器语言,实现运行的.编译程序的工作包含:语法分析.词法分析.代 ...

  2. Django 的 model form 组件

    Django 的 model form 组件 Model Form 组件的由来 之前介绍过 Django 的 Form 组件(Django的Form表单)使用方法,Form 组件能够帮我们做三件事: ...

  3. Kibana6.x.x——【Running "run:optimizeBuild" (run) task】出现警告信息

    Warning: non-zero exit code 64 Use --force to continue. 还未找到解决方法,先记录下来.

  4. eval()解析json以及js中js数组、对象与json之间的转换

    http://www.cnblogs.com/myjavawork/articles/1979279.html https://www.cnblogs.com/coder-economy/p/6203 ...

  5. Jenkins自动化CI CD流水线之3--参数化构建

    一. 背景 如果只是简单的构建,jenkins自己默认的插件可以做,但是如果我们想要在构建过程中有更多功能,比如说:选择性构建.传参.项目指定变量等等其他功能,基础的参数化构建可以实现一些简单功能,但 ...

  6. jdk的环境配置

    今天在网上找了关于jdk配置的教程,发现比较繁琐,因此更新下jdk的简单配置教程 注意:jdk的安装必须正确,绝对不允许将jdk和jdr安装在同一层目录!!(建议在java目录下新建jdk和jdr目录 ...

  7. Zookeeper的集群配置和Java测试程序 (一)

    概述 Zookeeper是Apache下的项目之一,倾向于对大型应用的协同维护管理工作.IBM则给出了IBM对ZooKeeper的认知: Zookeeper 分布式服务框架是 Apache Hadoo ...

  8. 自动化构建工具maven

    Maven是目前最流行的自动化构建工具,对于生产环境下多框架.多模块整合开发有重要作用.Maven 是一款在大型项目开发过程中不可或缺的重要工具. 一.什么是构建? 构建并不是创建,创建一个工程并不等 ...

  9. Flag-2019上半年

    1.坚持做博客记录,把日常学习到的技能以日记的形势进行呈现,每周进行总结: 2.2月底完成吴老师的机器学习视频课程: 3.6月底完成吴老师的深度学习视频课程: 相信自己,可以的,半年后见!

  10. derby

    /** * @Title: T.java * @Package test * @Description: TODO please write your description <BR> * ...