背景:

从后台提取出来数据,在前端进行分页。

代码:

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实现前端分页功能的更多相关文章

  1. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  2. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  3. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  4. 原生js实现vue组件功能

    在如今VUE盛行的情况下,我们一直在惊叹于VUE的组件的功能,却不知道,原生js早就已经支持了这个功能. 最近在公开课学到的,js还有很多很多需要探索学习. 下面是一个简单的例子 <!DOCTY ...

  5. python2.0_day19_前端分页功能的实现

    我们前面完成的客户纪录展示,只有4条,如果有上百条就不能在1页中全部展示了,那样是不人性化的.另外一次性取出来,数据量也比较大.假如现在有95条数据,我们想实现一个每页展示20条,那就分为5页.假如我 ...

  6. 原生JS实现滑动验证功能

    一般很多网站都有滑动验证的功能,简单滑动验证的原理如下图所示: 主要理解思想就行 图中的代码可能和实际写的有所不同 HTML和CSS也可根据仔细的喜好就行修改 完整代码: <!DOCTYPE h ...

  7. 基于layUI实现前端分页功能

    一.layUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为htt ...

  8. 【原生JS】动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

  9. 前端分页功能实现(PC)

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加 ...

随机推荐

  1. 服务网关zuul之二:过滤器--请求过滤执行过程(源码分析)

    Zuul的核心是一系列的过滤器,这些过滤器可以完成以下功能: 身份认证与安全:识别每个资源的验证要求,并拒绝那些与要求不符的请求. 审查与监控:在边缘位置追踪有意义的数据和统计结果,从而带来精确的生成 ...

  2. Java-Runoob-高级教程-实例-数组:13. Java 实例 – 数组交集

    ylbtech-Java-Runoob-高级教程-实例-数组:13. Java 实例 – 数组交集 1.返回顶部 1. Java 实例 - 数组交集  Java 实例 以下实例演示了如何使用 reta ...

  3. 廖雪峰Java4反射与泛型-2注解-2定义注解

    1.定义注解 使用@interface定义注解Annotation 注解的参数类似无参数方法 可以设定一个默认值(推荐) 把最常用的参数命名为value(推荐) 2.元注解 2.1Target使用方式 ...

  4. mybatis 整合spring之mapperLocations配置的问题(转)

    以防忘记,收集一下别人的文章吧 https://www.cnblogs.com/1xin1yi/p/7373739.html 今天尝试spring整合mybatis时遇到这么一个问题,就是在配置sql ...

  5. Zabbix 卸载包 采用yum方式

  6. 如果在 Windows 10 家庭版中使用「远程桌面」

    远程桌面是 Windows 系统下原生.跨平台的的远程控制功能,拥有微软官方提供的各平台客户端,就可以让你在远程轻松帮助别人或者控制自己的 PC,而从 Windows 7 以来家庭版都不支持桌面功能

  7. Android通过包名启动其他应用,若该应用已启动,则直接将应用切到前台

    CommUtil.startActivityForPackage(mContext, "com.autonavi.minimap");//打开高德 CommUtil.java /* ...

  8. 安装sublime txt3 并且设置为默认的text打开方式

    1.安装 安装可以参考 http://jingyan.baidu.com/article/fa4125acb8569b28ac7092ea.html 1.添加sublime text 3的仓库: su ...

  9. SSL&HTTPS简单介绍

    这篇是最近看SSL和HTTPS的一个简单性总结,其中内容大部分都是参考网络上的内容,自己归纳整理了下. SSL介绍 HTTPS介绍 HTTP请求数据工作流程: l  用户在浏览器中输入网址,并告诉浏览 ...

  10. TableStore:多行数据操作

    1.批量写 public static void batchWriteRow(SyncClient client) { BatchWriteRowRequest request = new Batch ...