如图所示

在html中调用方法 getpage(7, 1, 1, 'URL')

1.page.js文件

代码

function getpage(count, countPage, pageIndex,url) {
// count总条数,countPage分页数,pageIndex当前页码,url 拼接公共路径
var ul = document.getElementById("getPage");
document.getElementById("getPage").innerHTML = "";
var li_0 = document.createElement("a");
li_0.innerHTML = "总共:" + count + "条,共:" + countPage + "页,每页:10条";
ul.appendChild(li_0);
if (countPage == 1 || pageIndex == 1) {//第一页首页和上一页不可操作
var li_1 = document.createElement("a");
li_1.setAttribute("class", "pageItemDisable bt4");
li_1.innerHTML = "首页";
ul.appendChild(li_1);
var li_2 = document.createElement("a");
li_2.setAttribute("class", "pageItemDisable bt4");
li_2.innerHTML = "上一页"
ul.appendChild(li_2);
} else {
var li_1 = document.createElement("a");
li_1.setAttribute("class", "pageItem bt4");
li_1.innerHTML = "首页";
li_1.setAttribute("href", url+1);
ul.appendChild(li_1);
var li_2 = document.createElement("a");
li_2.setAttribute("class", "pageItem bt4");
li_2.innerHTML = "上一页"
li_2.setAttribute("href", url+(pageIndex-1));
ul.appendChild(li_2);
}
//之前需要将,上一页创建出来
if (countPage <= 5) {
//总页数在0到5之间时,显示实际的页数
for (var i = 0; i < countPage; i++) {
if (i + 1 == pageIndex) {//循环数和当前页相等时,为当前页样式
var a = document.createElement("a");
a.setAttribute("class", "pageItemActive");
a.innerHTML = i + 1;
ul.appendChild(a);
} else {
var a = document.createElement("a");
a.setAttribute("class", "pageItem");
a.innerHTML = i + 1;
a.setAttribute("href", url+ a.innerHTML);
ul.appendChild(a);
} }
} else if (countPage > 5) {
//总页数大于5时,只显示五页,多出的隐藏
//判断当前页的位置
if (pageIndex <= 3) {//当前页小于等于3时,显示1-5
for (var i = 0; i < 5; i++) {
if (i + 1 == pageIndex) {//循环数和当前页相等时,为当前页样式
var a = document.createElement("a");
a.setAttribute("class", "pageItemActive");
a.innerHTML = i + 1;
ul.appendChild(a);
} else {
var a = document.createElement("a");
a.setAttribute("class", "pageItem");
a.innerHTML = i + 1;
a.setAttribute("href", url+ a.innerHTML);
ul.appendChild(a);
}
}
} else if (pageIndex > countPage - 5) {//当前页为最后五页时
for (var i = countPage - 5; i < countPage; i++) {
if (i + 1 == pageIndex) {//循环数和当前页相等时,为当前页样式
var a = document.createElement("a");
a.setAttribute("class", "pageItemActive");
a.innerHTML = i + 1;
ul.appendChild(a);
} else {
var a = document.createElement("a");
a.setAttribute("class", "pageItem");
a.innerHTML = i + 1;
a.setAttribute("href", url+ a.innerHTML);
ul.appendChild(a);
}
}
} else {//当前页为中间时
for (var i = pageIndex - 3; i < pageIndex + 2; i++) {
if (i + 1 == pageIndex) {//循环数和当前页相等时,为当前页样式
var a = document.createElement("a");
a.setAttribute("class", "pageItemActive");
a.innerHTML = i + 1;
ul.appendChild(a);
} else {
var a = document.createElement("a");
a.setAttribute("class", "pageItem");
a.innerHTML = i + 1;
a.setAttribute("href", url+ a.innerHTML);
ul.appendChild(a);
}
}
}
}
if (pageIndex == countPage) {//当前页为最大页时,下一个和尾页不可操作
var li_3 = document.createElement("a");
li_3.setAttribute("class", "pageItemDisable bt4");
li_3.innerHTML = "下一页"
ul.appendChild(li_3);
var li_4 = document.createElement("a");
li_4.setAttribute("class", "pageItemDisable bt4"); li_4.innerHTML = "尾页"
ul.appendChild(li_4);
} else {
var li_3 = document.createElement("a");
li_3.setAttribute("class", "pageItem bt4");
li_3.innerHTML = "下一页"
li_3.setAttribute("href", url+(pageIndex+1));
ul.appendChild(li_3);
var li_4 = document.createElement("a");
li_4.setAttribute("class", "pageItem bt4");
li_4.innerHTML = "尾页"
li_4.setAttribute("href", url+countPage);
ul.appendChild(li_4);
}
if (0 == countPage) {//一页都没有时,将首页,上一页,下一个,尾页都置为不可操作
$(".bt4").removeClass("pageItem");
$(".bt4").addClass("pageItemDisable");
}
}

  2.page.html文件

代码:

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>制作分页</title>
<meta name="description" content=""> <style type="text/css">
.page {
list-style:none;
} .page>a {
float: left;
padding: 5px 10px;
cursor:pointer;
text-decoration: none;
} .page .pageItem {
border:solid thin #DDDDDD;
margin:5px;
} .page .pageItemActive {
border: solid thin #0099FF;
margin: 5px;
background-color: #0099FF;
color: white;
} .page .pageItem:hover {
border: solid thin #0099FF;
background-color:#0099FF;
color: white;
} .page .pageItemDisable {
border:solid thin #DDDDDD;
margin: 5px;
background-color: #DDDDDD;
}
</style>
</head> <body>
<ul id="getPage" class="page"></ul>
<script src="./jquery.js"></script>
<script src="./page.js"></script>
<script>
//getpage($(count), $(countPage),$(pageIndex),$(url),)
getpage(100, 10, 6, '?page')
//对应参数 count总条数,countPage分页数,pageIndex当前页码,url 拼接公共路径
</script>
</body> </html>

  

js 制作分页的更多相关文章

  1. 基于node.js制作爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  2. 使用Vue.js制作仿Metronic高级表格(一)静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

  3. 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  4. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  5. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  6. 纯js实现分页

    原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...

  7. 单篇文章JS模拟分页

    废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...

  8. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  9. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

随机推荐

  1. SQLSERVER 根据传入的参数拼接sql语句字符串,反馈结果集

    ALTER PROCEDURE [dbo].[usp_visit_detail](@siteid BIGINT, @Startime VARCHAR(15), @Endtime  VARCHAR(15 ...

  2. Web.xml详解(转)(Filter,context,listener)

    web.xml 详细解释!!(链接) web.xml加载过程(步骤) 首先简单说一下,web.xml的加载过程. 当我们去启动一个WEB项目时,容器包括(JBoss.Tomcat等)首先会读取项目we ...

  3. 【JZOJ4858】【GDOI2017模拟11.4】Walk

    题目描述 在比特镇一共有n 个街区,编号依次为1 到n,它们之间通过若干条单向道路连接. 比特镇的交通系统极具特色,除了m 条单向道路之外,每个街区还有一个编码vali,不同街区可能拥有相同的编码.如 ...

  4. 安装mongoDB时,总是报错,启动不了

    安装教程地址:https://blog.csdn.net/fengtingyan/article/details/88371232 原文地址:https://blog.csdn.net/qq_2008 ...

  5. 基于Spark Mllib的Spark NLP库

    SparkNLP的官方文档 1>sbt引入: scala为2.11时 libraryDependencies += "com.johnsnowlabs.nlp" %% &qu ...

  6. 1.27eia原油

  7. hdu1421 dp

    用dp[i][j]表示放了i件物品,j对时的最小值. dp[i-2][j-1]表示取当前的 dp[i-1][j]表示不取当前的. #include<stdio.h> #include< ...

  8. LeetCode109 Convert Sorted List to Binary Search Tree

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  9. Uva 10334

    UVa 10334 这道题几乎和UVa 495是一样的. #include<iostream> #include<cstdio> #define mod 1000000 usi ...

  10. oralce函数 count(*|[distinct|all]x)

    [功能]统计数据表选中行x列的合计值. [参数] *表示对满足条件的所有行统计,不管其是否重复或有空值(NULL) all表示对所有的值统计,默认为all distinct只对不同的值统计, 如果有参 ...