javascript实现Html Table数据表分页
直接调用:
<style type="text/css">
th
{
font-size:18px;
}
td
{
font-size:15px;
}
table{
width:600px;
text-align:center;
}
table tr th,td{
height:30px;
line-height:30px;
border:1px solid #ccc;
}
#pageStyle{
display:inline-block;
width:32px;
height:32px;
border:1px solid #CCC;
line-height:32px;
text-align:center;
color:#999;
margin-top:20px;
text-decoration:none;
}
#pageStyle:hover{
background-color:#CCC;
}
#pageStyle .active{
background-color:#0CF;
color:#ffffff;
}
.style1
{
font-size: 12pt;
}
</style>
<script type="text/javascript">
//分頁顯示
$(function () {
var $table = $("table");
var currentPage = 0; //当前页默认值为0
var pageSize = 12; //每一页显示的数目
$table.bind('paging', function () {
$table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
});
var sumRows = $table.find('tbody tr').length;
var sumPages = Math.ceil(sumRows / pageSize); //总页数
var $pager = $('<div class="page"></div>'); //新建div,放入a标签,显示底部分页码
for (var pageIndex = 0; pageIndex < sumPages; pageIndex++) {
$('<a href="#" id="pageStyle" onclick="changCss(this)"><span>' + (pageIndex + 1) + '</span></a>').bind("click", { "newPage": pageIndex }, function (event) {
currentPage = event.data["newPage"];
$table.trigger("paging");
//触发分页函数
}).appendTo($pager);
$pager.append(" ");
}
$pager.insertAfter($table);
$table.trigger("paging");
//默认第一页的a标签效果
var $pagess = $('#pageStyle');
$pagess[0].style.backgroundColor = "#006B00";
$pagess[0].style.color = "#ffffff";
});
//a链接点击变色,再点其他回复原色
function changCss(obj) {
var arr = document.getElementsByTagName("a");
for (var i = 0; i < arr.length; i++) {
if (obj == arr[i]) { //当前页样式
obj.style.backgroundColor = "#006B00";
obj.style.color = "#ffffff";
}
else {
arr[i].style.color = "";
arr[i].style.backgroundColor = "";
}
}
}
</script>
javascript实现Html Table数据表分页的更多相关文章
- MySQL的数据库,数据表,数据的操作
数据库简介 概念 什么是数据库?简单来说,数据库就是存储数据的"仓库", 但是,光有数据还不行,还要管理数据的工具,我们称之为数据库管理系统! 数据库系统 = 数据库管理系统 + ...
- SQL Server 的数据表简单操作
--创建数据表--[use 要创建数据表的数据库名称go]create table 要创建的表名(字段名 数据类型[长度] [null | not null] [primary key],... .. ...
- MySQL(一) 数据表数据库的基本操作
序言 这类文章,记录我看<MySQL5.6从零开始学>这本书的过程,将自己觉得重要的东西记录一下,并有可能帮助到你们,在写的博文前几篇度会非常基础,只要动手敲,跟着我写的例子全部实现一遍, ...
- MYSQL中约束及修改数据表
MYSQL中约束及修改数据表 28:约束约束保证数据的完整性和一致性约束分为表级约束和列级约束约束类型包括: NOT NULL(非空约束) PRIMARY KEY(主键约束) UNI ...
- php 实现 mysql数据表优化与修复
<?php $link = mysql_connect("localhost", "root", "") or die("e ...
- mysql数据表的基本操作:表结构操作,字段操作
本节介绍: 表结构操作 创建数据表. 查看数据表和查看字段. 修改数据表结构 删除数据表 字段操作 新增字段. 修改字段数据类型.位置或属性. 重命名字段 删除字段 首发时间:2018-02-18 ...
- 数据库之mysql篇(3)—— mysql创建/修改数据表/操作表数据
创建数据表:create table 数据表名 1.创建表规范 create table 表名( 列名 数据类型 是否为空 自动排序/默认值 主键/外键/唯一键, 列名 数据类型 ...
- Mysql——数据库和数据表的基本操作
/*创建数据库--- CREATE DATABASE 数据库名;*/ CREATE DATABASE itschool; /*查看已经存在的数据库*/ SHOW DATABASES; /*查看某个已创 ...
- MySQL开发——【数据库、数据表的基本操作】
启动MySQL服务器端 CMD启动MySQL服务器端 net start(启动)|stop(停止)|restart(重启)服务名称(mysql) 连接MySQL服务器端 CMD连接MySQL服务器端 ...
随机推荐
- 使用wsimport生成webservice客户端代码
服务端 package com.xc.webservice; import javax.jws.WebService; import javax.xml.ws.Endpoint; @WebServic ...
- MySQL安装时出现Apply Security Settings错误的解决办法(转)
最近在学习MySQL时,下载了MySQL5.5版本的安装包,在配置向导的最后的页面却出现了Apply Security Settings的错误.第一次安装时比较顺利,中途卸载了一下,结果第二次安装的时 ...
- mysql定时任务event——清理过期数据 (转)
1.查询是否开启事件调度 SHOW VARIABLES LIKE 'event_scheduler'; 2.开启事件调度 临时: SET GLOBAL event_scheduler = 1; 永久: ...
- iOS面试-深拷贝和浅拷贝
浅copy:实际上的内存只有一份 任何copy都只是指向这个内存的一个引用 深copy:原始数据有一份 每一个copy的对象不再是引用 而是内容大小一样 内存地址不同的独立对象 系统的非容器类对象 c ...
- GPU Skinning 结合 Instanced 高效实现大量单位动画
GPU Skinning 与 Instance 蒙皮动画 计算骨骼信息 蒙皮 GPU Skinning CPU Skinning 与 GPU Skinning 实现方式 Skinning 类型 优点 ...
- 微信H5支付开发全过程(除内置微信以外的浏览器)
前言:网上都是~ 呵呵 自己搞 只要花时间 多问客服总会有的 只说程序不说准备工作 自己ID 或者秘钥都准备好了 写的有点儿乱 可以把所有的方法 放在一个文件中调用 public function ...
- 打开app应用
=========================================人才网 <!--app底部浮动广告--><style> footer { padding-bo ...
- element-ui中的表格嵌套表格
element-ui中有详细的各种表格及表格方法.也有表格展开出现二级的样式,但是却没有表格嵌套二级表格的方案,于是就自己写了一个,样式图如下: 展开后如下 这就是一个普通的二级表格嵌套,用的是el- ...
- Python 日志文件处理
今天想把 Python 项目中的日志 保存到文件中. 找到了方法.非常简单 https://www.cnblogs.com/nancyzhu/p/8551506.html 1. logging.bas ...
- qt qml中的Tabview使用心得
彩云之南的天是如此湛蓝,天上落下的水是如此清澈. 最近在qt5.5下使用TabView,如下. 1) currentIndex变量很好用,其对应当前被显示的tab,其值变化时还会触发onCurrent ...