JS table分页
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="paging3.aspx.cs" Inherits="SCM_WEB.paging3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="http://app2.youshang.com/css/default/ui.min.css?ver=20140430" rel="stylesheet" />
<link href="http://app2.youshang.com/css/default/ui.css?ver=20140430" rel="stylesheet" />
</head>
<body>
<style type="text/css">
.tablebox
{
border: solid 1px #ddd;
}
.tablebox td
{
text-align: center;
border: solid 1px #ddd;
padding: 5px;
}
</style>
<div style=" margin: 0 auto;">
<%-- <table class="tablebox" width="500" border="0" cellpadding="0" cellspacing="0">--%>
<table id="grid" class="ui-jqgrid-btable" cellspacing="0" cellpadding="0" border="0"
tabindex="0" role="grid" aria-multiselectable="true" aria-labelledby="gbox_grid"
style="width: 1770px; margin:0px auto">
<tbody id="table2">
<tr>随缘富士康</tr>
<tr>随缘富的撒旦士康</tr>
<tr>随缘富士大夫撒范德萨士康</tr>
<tr>随缘飞第三方第三方富士康</tr>
<tr>随缘富范德萨范德萨发现士康</tr>
<tr>随缘V型出租车VC富士康</tr>
<tr>随缘发生大风范富士康</tr>
<tr>随缘发热噶发多少公分的富士康</tr>
<tr>随缘固定方式告诉对方富士康</tr>
<tr>随缘股份的给他任何富士康</tr>
<tr>随缘股份的合同和法国富士康</tr>
<tr>随缘富工地发234312423生个梵蒂冈士康</tr>
<tr>随缘富工地32423421梵蒂冈士康</tr>
<tr>随缘富工34432141234蒂冈士康</tr>
<tr>随缘富工地发43214231生个梵蒂冈士康</tr>
<tr>65466546</tr>
<tr>6546突然又突然</tr>
<tr>梵蒂冈他</tr>
<tr>天热热太热</tr>
<tr>tree特瑞特让他</tr>
<tr>太热太热委托人</tr>
</tbody>
</table>
<div style="height: 30px; margin: 20px 0 0 0; text-align:center">
<span id="spanFirst">第一页</span> <span id="spanPre">上一页</span> <span id="spanNext">下一页</span>
<span id="spanLast">最后一页</span> 第 <span id="spanPageNum"></span>页/共 <span id="spanTotalPage">
</span>页
</div>
</div>
<script type="text/javascript">
var theTable = document.getElementById("table2");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");
var numberRowsInTable = theTable.rows.length;
var pageSize = 6;
var page = 1;
//下一页
function next() {
hideTable();
currentRow = pageSize * page;
maxRow = currentRow + pageSize;
if (maxRow > numberRowsInTable)
maxRow = numberRowsInTable;
for (var i = currentRow; i < maxRow; i++) {
theTable.rows[i].style.display = '';
}
page++;
if (maxRow == numberRowsInTable) {
nextText();
lastText();
}
showPage();
preLink();
firstLink();
}
//上一页
function pre() {
hideTable();
page--;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if (currentRow > numberRowsInTable)
currentRow = numberRowsInTable;
for (var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if (maxRow == 0) {
preText();
firstText();
}
showPage();
nextLink();
lastLink();
}
//第一页
function first() {
hideTable();
page = 1;
for (var i = 0; i < pageSize; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preText();
nextLink();
lastLink();
}
//最后一页
function last() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - 1);
for (var i = currentRow; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preLink();
nextText();
firstLink();
}
function hideTable() {
for (var i = 0; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
}
function showPage() {
pageNum.innerHTML = page;
}
//总共页数
function pageCount() {
var count = 0;
if (numberRowsInTable % pageSize != 0) count = 1;
return parseInt(numberRowsInTable / pageSize) + count;
}
//显示链接
function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; }
function preText() { spanPre.innerHTML = "上一页"; }
function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; }
function nextText() { spanNext.innerHTML = "下一页"; }
function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; }
function firstText() { spanFirst.innerHTML = "第一页"; }
function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; }
function lastText() { spanLast.innerHTML = "最后一页"; }
//隐藏表格
function hide() {
for (var i = pageSize; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '1';
nextLink();
lastLink();
}
hide();
</script>
</body>
</html>
JS table分页的更多相关文章
- html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架
简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...
- 纯js实现分页
原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
- Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
- JS表格分页(封装版)
HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...
- 项目总结17-使用layui table分页表格
项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...
- Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...
- Table 分页处理
介绍两种table分页处理:PHP分页 和 js(jquery.table)分页. 一:jquery.table: 1:下载两个文件:table_jui.css 和 jquery.dataTables ...
随机推荐
- POJ 2377 Bad Cowtractors（ 最小生成树转化 ）
链接:传送门 题意:给 n 个点 , m 个关系,求这些关系的最大生成树,如果无法形成树,则输出 -1 思路:输入时将边权转化为负值就可以将此问题转化为最小生成树的问题了 /************* ...
- 洛谷P1055 ISBN号码
题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括 999 位数字. 111 位识别码和 333 位分隔符,其规定格式如x-xxx-xxxxx-x,其中符号-就是分隔符(键盘上 ...
- BZOJ 3158 千钧一发 (最大流->二分图带权最大独立集)
题面:BZOJ传送门 和方格取数问题很像啊 但这道题不能像网格那样黑白染色构造二分图,所以考虑拆点建出二分图 我们容易找出数之间的互斥关系,在不能同时选的两个点之间连一条流量为$inf$的边 由于我们 ...
- BZOJ 3439 Kpm的MC密码 (Trie树+线段树合并)
题面 先把每个串反着插进$Trie$树 每个节点的子树内,可能有一些节点是某些字符串的开头 每个节点挂一棵权值线段树,记录这些节点对应的原来字符串的编号 查询的时候在线段树上二分即可 为了节省空间,使 ...
- Hit 2255 Not Fibonacci
今天下午刚起来眼睛就比較涨,,并且还有点恶心,唉.结果一直不在状态.并且这个题太坑了.. .. 点击此处即可传送 Hit 2255 Maybe ACMers of HIT are always fon ...
- wpf获取目录路径
AppDomain.CurrentDomain.BaseDirectory +文件名即可,简单吧? //获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称. string str5=Appl ...
- Deming管理系列（1）——开车仅仅看后视镜
问题: 当业务经理被要求为未来的业务做计划时,他会提出一个自觉得不错的数字,而董事会往往希望能获得更大的收益,多次与其谈判.而业务经理在这方面不是新手,他有非常多可用的报告. 为什么不能让业务规划流程 ...
- 使用GitHub来托管Larval框架
每个新框架都有自己的安装方法laravel 的安装方法有一下几种: (一) 通过下载 Laravel 包安装 (1) 安装Composer (2) 下载最新Larvel框架 https://g ...
- unity3d面试题摘选（全）
======================================= 数据结构和算法非常重要.图形学也非常重要! 大的游戏公司非常看重个人基础.综合能力.也有的看重你实际工作能力,看你的De ...
- angularjs1-路由
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...