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

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. Unity 动画系统 Animation 和 Animator的小实例

    本文结合一个很简单的动画demo,分别采用2种方法,来对比Animation和Animator的使用方式: 方法1:单独使用Animation 方法2:Animation结合Animator 动画De ...

  2. shell编程中

    1.1 条件表达式 1.1.1 文件判断 常用文件测试操作符 常用文件测试操作符 说明 -d文件,d的全拼为directory 文件存在且为目录则为真,即测试表达式成立 -f文件,f的全拼为file ...

  3. 练习五十六：for循环

    某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下:每位数字都加上5,然后用和除以10的余数代替该数字,再将第一位和第四位交换,第二位和第三位交换 方法一: def o ...

  4. opencv-将分离合并图像（Red通道>125置255<=置0）

    #include <iostream> #include <opencv2/opencv.hpp> #include "opencv2/imgproc/imgproc ...

  5. 1.5 GO json转Map

    使用GO将show slave status查询返回的json串转为Map类型 package main import ( "encoding/json" "fmt&qu ...

  6. Git钩子设置自动构建Jenkins

    打开Git仓库,找到对应的项目,点击“仓库设置”,左侧点击“管理Git钩子”,如下图所示: 因为是push之后触发自动构建的,选择“post-receive”进行编辑 #!/bin/bash #提取分 ...

  7. java——int、args[]传参、标签、数字塔?、一个输入格式

    1.当int型整数超出自己范围时,会从它的上界重新开始. public class exp { public static void main(String[] args) { int i = 214 ...

  8. ubuntu 常用安装软件

    1. Ubuntu安装chrome. sudo apt-get install chromium-browser w

  9. JavaSE---多线程---线程的生命周期

    1.线程的生命周期:新建.就绪.运行.阻塞.死亡 2.运行状态线程进入阻塞: 1.1 调用sleep方法主动放弃: 1.2 调用线程的suspend方法将线程挂起,不推荐使用: 1.3 线程调用一个阻 ...

  10. Object类中有哪些方法

    equals().hashCode().wait().notify().notifyAll().toString().clone().getClass().finalize()