纯手写完美实现前端分页效果

经常听人提到前端分页技术,却总也没有完全的实现过,作为做过多年前后端的老码工,真的有必要好好研究一番,以飨读者;

在这里不只是有前端分页页面效果,更有真实数据的展示,实现了真正的分页哦!

  • 内容导读

1.页面设计

2.jQuery之ajax与JSON数据

3.运行效果

说明:

(1)需要将源码导入HBuilder中,打开HBuilder直接通过内置服务器运行页面即可实现分页效果

(2)一个分页小技术有时也是让人挠头,这里完全前端实现方式与Java的实现方式,我们提供给你完全的编码参考,希望能够帮到你哦(:)!

(3)加QQ群:657540173免费下载源码

一.页面设计

<!-- 前端分页完美实现 -->
<div class="wrap">
<table id="info" border="2" cellspacing="0" cellpadding="0">
<caption>信息分页查询系统</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
</div>
<p class="go">第<span id="now">1</span>页 共<span id="total">5</span>页
<button id="start">首页</button>
<button id="first">上一页</button><button id="next">下一页</button>
<button id="end">尾页</button>跳转到<input id="inp" type="text" />
<button id="go">GO</button>
</p>
</body>
<!---超客学堂chaoke.ke.qq.com加群657540173免费领取更多--->
<script src="js/jqmin.js" type="text/javascript">
</script>
<script src="js/fenye.js" type="text/javascript">
</script>
</html>

二.jQuery之ajax与JSON数据 

1.jQuery之ajax请求

// 超客学堂chaoke.ke.qq.com加群657540173免费领取更多

$(function() {

//当前页数

var nowPage = 1;

//总的页数

var totalPage = 4;

//每行限制数

var limitRows = 4;

//总的行数

var totalRows = 0;

//开始的行数

var startRows = 0;

//结束的行数,在数据库中是用limit实现的,不需要此变量

var endRows = 4;

//存所有行的数组

var list = new Array();

//找表格元素及其它各元素

var tab = $(‘#info‘);

var now = $(‘#now‘);

var total = $(‘#total‘);

//(1)初始化数据,运用jQuery的get请求,以下关键步骤做了标记

$.get(‘json/my.json‘, function(data, stauts) {

//获取所需数据

//获取最大页数,js除时要取小数,此处要取整

var tg = Math.floor(data.length / limitRows);

if (Math.floor(data.length % limitRows) == 0) {

totalPage = tg;

} else {

totalPage = tg + 1;

}

//存入到数组

list = data;

//初始化显示数据

now.html(nowPage);

total.html(totalPage);

disp(nowPage, list);

});

//(2)按页号显示数据

function disp(n, d) {

//先删除之前的,再创建新的

$("tr").remove(".hqy");

//求每页从1开始,要得到数组开始下标要减一为从0开始

startRows = (n - 1) * limitRows;

endRows = startRows + limitRows;

for (var i = startRows; i < endRows; i++) {

var t = "<tr class=‘hqy‘>" + "<td>" + (101 + i) + "</td>" +

"<td>" + d[i].name + "</td>" +

"<td>" + d[i].age + "</td>" + "</tr>"

tab.append(t);

} //for

//$("tr").remove(".hqy");

} //disp

//(3)下一页

$("#next").click(function() {

++nowPage;

//alert(nowPage)

if (nowPage > totalPage) {

//此处减一是因为数组下标是最大长度减一的

nowPage = totalPage;

}

//先显示页数后展示数

now.html(nowPage);

//要后显示,否则页数切换不正确

disp(nowPage, list);

});

//(4)上一页

$("#first").click(function() {

--nowPage;

if (nowPage < 1) {

//此处为0,传递的是数组的最小标

nowPage = 1;

}

//先显示页数后展示数据

now.html(nowPage);

disp(nowPage, list);

});

//(5)首页

$("#start").click(function() {

//先显示页数后展示数据

nowPage = 1; //注意变量的值要设

now.html(nowPage);

disp(nowPage, list);

});

//(6)尾页

$("#end").click(function() {

//先显示页数后展示数据

nowPage = totalPage; //注意变量的值要设

now.html(nowPage);

disp(nowPage, list);

});

//(7)跳转到某一页

$("#go").click(function() {

var j = $("#inp").val().trim();

//alert(j==‘NaN‘);

if (j == "" || j == null || j == ‘NaN‘) { //用户可能没输入

nowPage = 1;

} else {//不是空则转换为整型数

nowPage = parseInt(j);

}

//先显示页数后展示数据,注意变量的值要设

if (nowPage > totalPage) {

nowPage = totalPage;

}

$("#inp").val(nowPage);

now.html(nowPage);

disp(nowPage, list);

});

});

////超客学堂chaoke.ke.qq.com加群657540173免费领取更多////

2.JSON数据,保存到my.json文件中

[{"name":"小美","age":19},{"name":"李小刚","age":18},{"name":"小明","age":20},

{"name":"胡江姗","age":17},{"name":"高大山","age":23},{"name":"李楠","age":19},

{"name":"tom","age":24},{"name":"张成功","age":21},{"name":"王强","age":25},

{"name":"刘青云","age":26},{"name":"张太雷","age":24},{"name":"mary","age":19},

{"name":"bean","age":19},{"name":"钱三一","age":25},{"name":"赵小二","age":23},

{"name":"corday","age":20},{"name":"高兴","age":21},{"name":"李太高","age":19}]

三.运行效果

 

 

原文地址:https://www.cnblogs.com/chaoke/p/10664414.html

时间: 2024-10-24 15:10:48

纯手写完美实现前端分页效果的相关文章

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

纯手写wcf代码,wcf入门,wcf基础教程

<pre name="code" class="cpp">/* 中颖EEPROM,使用比较方便,但有个注意点,就是每次无论你写入 什么数据或者在哪个地址写数据,都需要将对 对应的块擦除,擦 除后才能写入成功. */ #define SSPWriteFlag 0x5A #define SSPEraseFlag 0xA5 //数据区 扇形区1 #define ADDR_START1 (uint16)0x100 //数据存储区起始地址 #define ADDR

springmvc 动态代理 JDK实现与模拟JDK纯手写实现。

首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用  ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Proxy0 静态代理实例1.创建一个接口: package proxy; public interface People { public void zhaoduixiang()throws Throwable; } 2.创建一个实现类,张三,张三能够吃饭,张三可以找对象 package proxy;

SQL纯手写创建数据库到表内内容

建表啥的只点点鼠标,太外行了,不如来看看我的纯手写,让表从无到有一系列:还有存储过程临时表,不间断的重排序: 一:建数据库 1create Database Show 2 on 3 primary 4 ( 5 name= Show_data , 6 filename= 'C:\Program Files\Microsoft SQL Server\MSSQL11.SQLEXPRESS\MSSQL\DATA\Show.mdf' , 7 size=10MB, 8 maxsize=UNLIMITED,

qt之旅-1纯手写Qt界面

通过手写qt代码来认识qt程序的构成,以及特性.设计一个查找对话框.下面是设计过程 1 新建一个empty qt project 2 配置pro文件 HEADERS += Find.h QT += widgets SOURCES += Find.cpp main.cpp 3 编写对话框的类 代码如下: //Find.h #ifndef FIND_H #define FIND_H #include <QDialog> class QCheckBox; class QLabel; class QL

简易-五星评分-jQuery纯手写

超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 第二步: 写HTML代码:这里的星星我用的是符号的星星,也可以做成图片,用2张背景图片进行切换: 1 <div class="score_star"> 2 <i

纯手写SpringBoot框架之注解方式启动SpringMVC容器

使用Java语言创建Tomcat容器,并且通过Tomcat执行Servlet,接下来,将会使用Java语言在SpringBoot创建内置Tomcat,使用注解方式启动SpringMVC容器. 代码实现.1.pom.xml文件,需要依赖的jar包. <dependencies> <!--Java语言操作Tomcat--> <dependency> <groupId>org.apache.tomcat.embed</groupId> <arti

纯手写分页控件CSS+JS+SQL

Asp.net中虽然用DataPager配合ListView可以实现分页显示,但是有时候由于开发环境等问题不能用到DataPager控件,那么自己手工写一个分页控件就很有必要了,当然,最重要的是通用性. 首先,来看一下我的分页控件的显示效果: 简单说明:红底色的为当前页,白底红字的是选择新的页,共有1236页,默认从第1页开始显示,分页行长度含“……”共11格,有全显示,单边省略和两边省略三种模式. 当你仔细看完上图的显示效果并理解其分页的相应变化后,我们就要开始制作这个分页了:) 第一步)获取

纯css写出爱心版加载效果,等待加载也是一种享受

现在互联网时代网站何其多,各有各得风格,但是什么样的风格能留住用户的停留观看呢?就从加载来说,很多加载效果都是同一种风格可能用户经常逛网站早已经习惯,要是你的加载时间比其他网站时间长,效果还是一样的,可能就会关掉你的网站去其他网站观看,但是如果你的加载效果别具一格,有特点,可能用户看你加载效果的时候你的网站就打开了,这样用户也就不会立刻关掉你的网站. html代码: <div class="flex-container"> <div class="unit&