使用原生js实现前端分页功能
背景:
从后台提取出来数据,在前端进行分页。
代码:
user-manage.js
window.onload = function(){
var result = {
message : "get all users successfully",
status: "success",
data:[
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13"
]
};
var currentPage = 1:
var pageSize = 10;
var count = result.data.length;
var totalPage = Math.ceil(count / pageSize);
pagination(result,currentPage,pageSize);
function pagination(result,currentPage,pageSize){
var initSerialNumber = new Array();
for(var i = 0;i<result.data.length;i++){
initSerialNumber[i] = i;
}
$("#current-page").text("当前第"+currentPage+"页");
$("#total-page").text("共"+totalPage+"页");
var us erNameContent = result.data.slice((currentPage-1)*pageSize,currentPage*pageSize);
var serialNumberContent = initSerialNumber.slice((currentPage-1)*pageSize,currentPage*pageSize);
var str = "";
for(var i = 0;i < userNameContent.length;i++){\
str +="<tr><td>"+(serialNumberContent[i]+1)+"</td><td>"+userNameContent[i]+"</td></tr>";
$("#all-user").empty();
$("#all-user").append(str);
}
$("#next-page").click(function(){
if(currentPage!=totalPage){
currentPage = currentPage+1;
pagination(result,currentPage,pageSize);
}
});
$("#previous-page").click(function{
if(currentPage!=totalPage){
currentPage = currentPage+1;
pagination(result,currentPage,pageSize);
}
});
$("#go").click(function(){
var goPage = $("#go-page").val();
if(goPage>=1 && goPage <= totalPage){
currentPage = parseInt(goPage);
pagination(result,currentPage,pageSize);
}
})
}
}
使用原生js实现前端分页功能的更多相关文章
- js实现前端分页页码管理
用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 原生JS实现百度搜索功能
今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...
- 原生js实现vue组件功能
在如今VUE盛行的情况下,我们一直在惊叹于VUE的组件的功能,却不知道,原生js早就已经支持了这个功能. 最近在公开课学到的,js还有很多很多需要探索学习. 下面是一个简单的例子 <!DOCTY ...
- python2.0_day19_前端分页功能的实现
我们前面完成的客户纪录展示,只有4条,如果有上百条就不能在1页中全部展示了,那样是不人性化的.另外一次性取出来,数据量也比较大.假如现在有95条数据,我们想实现一个每页展示20条,那就分为5页.假如我 ...
- 原生JS实现滑动验证功能
一般很多网站都有滑动验证的功能,简单滑动验证的原理如下图所示: 主要理解思想就行 图中的代码可能和实际写的有所不同 HTML和CSS也可根据仔细的喜好就行修改 完整代码: <!DOCTYPE h ...
- 基于layUI实现前端分页功能
一.layUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为htt ...
- 【原生JS】动态分页样式效果
效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...
- 前端分页功能实现(PC)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加 ...
随机推荐
- VC的function类说明 -- 继续
我在之前的随笔中介绍了function如何保存参数,如何实现调用相关知识.对于一个函数对象或者函数指针来说,应该很容易理解.不过对于如何在function中保存类的成员函数,这个还是值得一说的. 还是 ...
- android-menudrawer 和SlidingMenu 用法
项目地址: https://github.com/gokhanakkurt/android-menudrawer https://github.com/jfeinstein10/SlidingM ...
- windows下GitHub的安装、配置以及项目的上传过程详细介绍
概要 本文主要介绍了在Win10系统中安装Github终端.如何配置安装好的Git终端以及如何利用Git终端将自己的项目上传到远程服务器中 操作必备 win10系统电脑一台.良好的互联网连接.GitH ...
- HBase配置性能调优
因官方Book Performance Tuning部分章节没有按配置项进行索引,不能达到快速查阅的效果.所以我以配置项驱动,重新整理了原文,并补充一些自己的理解,如有错误,欢迎指正. 配置优化 zo ...
- matlab 画图参考小程序
x=0.1:0.1:0.9; a=[41.37,44.34,44.34,44.66,44.66,44.66,98.85,98.85,98.85];%xxxxxx b=[22.10,22.39,22.3 ...
- Java - 33 Java Applet基础
Java Applet基础 applet是一种Java程序.它一般运行在支持Java的Web浏览器内.因为它有完整的Java API支持,所以applet是一个全功能的Java应用程序. 如下所示是独 ...
- Java 8- Java 分支结构 - if…else/switch
Java 分支结构 - if...else/switch 顺序结构只能顺序执行,不能进行判断和选择,因此需要分支结构. Java有两种分支结构: if语句 switch语句 if语句 一个if语句包含 ...
- IE 主页被恶意篡改的解决方法
IE 主页被篡改了,在ie 的 主页设置中不起任何作用,这个时候,就要打开注册表来修改: 具体操作如下: 1.运行 regedit 打开注册表 2.找到 HKEY_LOCAL_MACHINE\SOF ...
- centos7 图形化界面
当你安装centos服务器版本的时候,系统默认是不会安装 CentOS 的图形界面程序的,比如:gnome或者kde, 那么如果你想在图形界面下工作的话,可以手动来安装CentOS Gnome GUI ...
- gentoo kvm qemu
首先使用 grep --color -E "vmx|svm" /proc/cpuinfo 检查 cpu 能不能支持虚拟化,注意 biso 里面要开启虚拟化. 内核开启相应选项 [* ...