html中table表格分页,纯JS实现表格分页
思路：
1.讲表格内容存入一个变量
2.通过点击按钮从表格中调取数据
3.讲调取的数据填入表格中
表格分页
html,body {
margin:0;
height:100%;
}
.barcon {
width:auto;
margin:0 auto;
text-align:center;
}
.barcon1 {
font-size:17px;
float:left;
margin-top:20px;
}
.barcon2 {
float:right;
}
.barcon2 ul {
margin:20px 0;
padding-left:0;
list-style:none;
text-align:center;
}
.barcon2 li {
display:inline;
}
.barcon2 a {
font-size:16px;
font-weight:normal;
display:inline-block;
padding:5px;
padding-top:0;
color:black;
border:1px solid #ddd;
background-color:#fff;
}
.barcon2 a:hover {
background-color:#eee;
}
.ban {
opacity:.4;
}
#shade {
background:#000;
filter:alpha(opacity=50);/* IE的透明度*/
opacity:0.5;/* 透明度*/
display:none;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:9999;/* 此处的图层要大于页面*/
display:none;
}
ID菜单链接地址父菜单
- 首页
- 上一页
- 下一页
- 尾页
- 跳转
var table;
table = [
{
"id":"21",
"name":"演唱会",
"parent_id":"15",
"url":"http://www.acfun.cn/v/list99/index.htm/v/list140/index.htm"
},
{
"id":"22",
"name":"舞蹈·彼女",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list123/index.htm"
},
{
"id":"23",
"name":"宅舞",
"parent_id":"22",
"url":"http://www.acfun.cn/v/list134/index.htm"
},
{
"id":"24",
"name":"综合舞蹈",
"parent_id":"22",
"url":"http://www.acfun.cn/v/list135/index.htm"
},
{
"id":"25",
"name":"爱豆",
"parent_id":"22",
"url":"http://www.acfun.cn/v/list129/index.htm"
},
{
"id":"26",
"name":"手作",
"parent_id":"22",
"url":"http://www.acfun.cn/v/list130/index.htm"
},
{
"id":"27",
"name":"造型",
"parent_id":"22",
"url":"http://www.acfun.cn/v/list127/index.htm"
},
{
"id":"28",
"name":"游戏",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list59/index.htm"
},
{
"id":"29",
"name":"主机单机",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list84/index.htm"
},
{
"id":"30",
"name":"游戏集锦",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list83/index.htm"
},
{
"id":"31",
"name":"电子竞技",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list145/index.htm"
},
{
"id":"32",
"name":"英雄联盟",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list85/index.htm"
},
{
"id":"33",
"name":"守望先锋",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list170/index.htm"
},
{
"id":"34",
"name":"桌游卡牌",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list165/index.htm/"
},
{
"id":"35",
"name":"Mugen",
"parent_id":"28",
"url":"http://www.acfun.cn/v/list72/index.htm/"
},
{
"id":"36",
"name":"游戏中心",
"parent_id":"28",
"url":"http://www.acfun.cn/gamecenter"
},
{
"id":"37",
"name":"娱乐",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list59/index.htm"
},
{
"id":"38",
"name":"生活娱乐",
"parent_id":"37",
"url":"http://www.acfun.cn/v/list84/index.htm"
},
{
"id":"39",
"name":"鬼畜调教",
"parent_id":"37",
"url":"http://www.acfun.cn/v/list83/index.htm"
},
{
"id":"40",
"name":"萌宠",
"parent_id":"37",
"url":"http://www.acfun.cn/v/list145/index.htm"
},
{
"id":"41",
"name":"美食",
"parent_id":"37",
"url":"http://www.acfun.cn/v/list85/index.htm"
},
{
"id":"42",
"name":"科技",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list59/index.htm"
},
{
"id":"43",
"name":"科学技术",
"parent_id":"42",
"url":"http://www.acfun.cn/v/list84/index.htm"
},
{
"id":"44",
"name":"教程",
"parent_id":"42",
"url":"http://www.acfun.cn/v/list83/index.htm"
},
{
"id":"45",
"name":"数码",
"parent_id":"42",
"url":"http://www.acfun.cn/v/list145/index.htm"
},
{
"id":"46",
"name":"广告",
"parent_id":"42",
"url":"http://www.acfun.cn/v/list85/index.htm"
},
{
"id":"47",
"name":"影视",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list59/index.htm"
},
{
"id":"48",
"name":"国产剧",
"parent_id":"47",
"url":"http://www.acfun.cn/v/list84/index.htm"
},
{
"id":"49",
"name":"网络剧",
"parent_id":"47",
"url":"http://www.acfun.cn/v/list83/index.htm"
},
{
"id":"50",
"name":"纪录片",
"parent_id":"47",
"url":"http://www.acfun.cn/v/list145/index.htm"
},
{
"id":"51",
"name":"综艺",
"parent_id":"47",
"url":"http://www.acfun.cn/v/list85/index.htm"
},
{
"id":"52",
"name":"文章",
"parent_id":"0",
"url":"http://www.acfun.cn/v/list59/index.htm"
},
{
"id":"53",
"name":"游记·涂鸦",
"parent_id":"52",
"url":"http://www.acfun.cn/v/list84/index.htm"
},
{
"id":"54",
"name":"综合",
"parent_id":"52",
"url":"http://www.acfun.cn/v/list83/index.htm"
},
{
"id":"55",
"name":"工作·情感",
"parent_id":"52",
"url":"http://www.acfun.cn/v/list145/index.htm"
},
{
"id":"56",
"name":"动漫文化",
"parent_id":"52",
"url":"http://www.acfun.cn/v/list85/index.htm"
},
{
"id":"57",
"name":"漫画·文学",
"parent_id":"52",
"url":"http://www.acfun.cn/v/list170/index.htm"
}
]
starpag();
function starpag() {
goPage(1,20);
var tempOption ="";
for (var i =1;i <=totalPage;i++) {
tempOption +='' +i +''
}
$("#jumpWhere").html(tempOption);
};
// 分页函数
// pno--页数
// psize--每页显示记录数
// 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
// 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
var pageSize =0;//每页显示行数
var currentPage_ =1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage;//总页数
function goPage(pno, psize) {
var num =table.length;//表格所有行数(所有记录数)
pageSize = psize;//每页显示行数
//总共分几页
if (num /pageSize >parseInt(num /pageSize)) {
totalPage =parseInt(num /pageSize) +1;
}else {
totalPage =parseInt(num /pageSize);
}
var currentPage = pno;//当前页数
currentPage_ =currentPage;
var startRow = (currentPage -1) *pageSize +1;
var endRow =currentPage *pageSize;
endRow = (endRow >num) ?num :endRow;
// console.log(endRow);
var tablepag =new Array();
for (let index =startRow;index <=endRow;index++) {
tablepag.push(table[index -1])
}
tabletr(tablepag);
var tempStr ="共" +num +"条记录 共分" +totalPage +"页 当前第" +currentPage +"页";
document.getElementById("barcon1").innerHTML =tempStr;
if (currentPage >1) {
$("#firstPage").on("click",function () {
goPage(1, psize);
}).removeClass("ban");
$("#prePage").on("click",function () {
goPage(currentPage -1, psize);
}).removeClass("ban");
}else {
$("#firstPage").off("click").addClass("ban");
$("#prePage").off("click").addClass("ban");
}
if (currentPage
$("#nextPage").on("click",function () {
goPage(currentPage +1, psize);
}).removeClass("ban");
$("#lastPage").on("click",function () {
goPage(totalPage, psize);
}).removeClass("ban");
}else {
$("#nextPage").off("click").addClass("ban");
$("#lastPage").off("click").addClass("ban");
}
$("#jumpWhere").val(currentPage);
}
function jumpPage() {
var num =parseInt($("#jumpWhere").val());
if (num !=currentPage_) {
goPage(num,pageSize);
}
}
function tabletr(arr) {
var htm ='';
for (let index =0;index < arr.length;index++) {
htm +='
' +
'
' + arr[index].id +'' +
'
' + arr[index].name +'' +
'
' + arr[index].url +'' +
'
' + arr[index].parent_id +'' +
'
' +
'
';
}
$("#list").html(htm);
}
html中table表格分页,纯JS实现表格分页相关推荐
- 动态增删表格行(纯JS写法)
动态增删表格行(纯JS写法) 归档 进行表格下行的动态增加与删除 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...
- php对表格的处理,JavaScript_js处理表格对table进行修饰，js处理表格 1、行颜色间隔显示 - phpStudy...
js处理表格对table进行修饰 js处理表格 1.行颜色间隔显示 css样式:两个选择器 .one{ background-color:#33ffcc; } .two{ backgound-colo ...
- css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子 今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序 心急的同学,先看效果,我放在codepen上. ...
- html怎么写分页ajax,js实现ajax分页完整实例
本文实例讲述了js实现ajax分页的方法.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
- html中table整体缩小,html-如何缩小表格样式中的间隙？
您可以使用border-collapse:在表格中折叠. The border-collapse CSS property selects a table's border model. This h ...
- html一个页面分页代码怎么写,纯JS前端实现分页代码
先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码: 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页 ...
- html css分页特效,js css自定义分页效果
网上看了好多分页插件都不太满意,所以根据网上的一些东西自己做了一个,可以搭配mvc和数据库 效果图片 先来css(样式不喜欢的话可以不用这个) .pagelist {padding:10px 0; t ...
- html js 动态表格数据,HTML+JS动态表格
1. 设置固定列 ID日期星期 propName -- 属性名 valCalc -- 设置值时, 特定回调函数 2. 动态生成可变列 这里模拟服务器获取数据 // 返回数据的格式: /* { poin ...
- 纯js分页代码(简洁实用)
纯js分页代码(简洁实用) 纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage] ...
最新文章
- 基于Python, Selenium, Phantomjs无头浏览器访问页面
- 换「猪心」9天，美国57岁男子能下地走路了！
- 剑指offer三:从尾到头打印链表
- 驾驶卡丁车 模拟，迷宫（女赛）
- 常见HTTP状态（304，200等）
- Windows 7备份、还原功能详解
- 大表与大表join数据倾斜_技术分享|大数据技术初探之Spark数据倾斜调优
- python某公司为员工发放奖品_python 练习2
- PHP 文件打开/读取
- android 手机本地目录,Android系统的手机文件夹目录详解
- duilib列表list使用方法
- PS的工具介绍和使用方法
- 飞机选座——附：东航320选坐攻略
- 男人一生的四菜一汤(转载)
- 大数据资源争夺战此起彼伏，对用户而言是福是祸
- 计算机维修分为那两种,计算机二级维修中最常见的三种方法是什么？
- ef core连接Oracle数据库
- 如何有效实现软件的需求管理 - 1
- brooks levitate_超越Boost的脚感： Brooks Levitate2体验
- 数字大小写转换：如何把“0123456789”转换成“零一二三四五六七八九”？