<%@ 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分页的更多相关文章

  1. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  2. 纯js实现分页

    原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...

  3. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  4. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  5. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  6. JS表格分页(封装版)

    HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...

  7. 项目总结17-使用layui table分页表格

    项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...

  8. Bootstrap table分页问题汇总

    首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...

  9. Table 分页处理

    介绍两种table分页处理:PHP分页 和 js(jquery.table)分页. 一:jquery.table: 1:下载两个文件:table_jui.css 和 jquery.dataTables ...

随机推荐

  1. django创建第一个子文件夹

    1.首先安装python, 我安装了Python2.7的版本,安装在了D:\Python25\2.接着安装django,我下载了django 1.6的版本.3. 安装完了之后,打开cmd,然后可以检验 ...

  2. 微信小程序：获取地理定位和显示相应的城市名称。

    最近在看微信小程序,遇到地理定位显示城市名称的问题.本文就是记录这一过程. 解决方案                                                          ...

  3. vue-cli快速搭建

    vue-cli是用于开发大型vue项目的脚手架工具,使用vue-cli搭建好平台后,只需要关注程序的开发,不用过多的花时间去思考文件配置的问题 当然,还是可以任意进行自定义配置,官方地址:vue-cl ...

  4. 【hdu 6333】Harvest of Apples

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 假设T[i][j]表示的是杨辉三角第i层前j项的和. 会发现它同样满足杨辉三角的性质. 即 T[i][j] = T[i-1][j-1 ...

  5. Emgu cv人脸检测识别

    Emgu cv人脸检测识别 1.开发平台:WIN10 X64    VS2012    Emgucv版本:3.1 2.先给大家分享一个官网给的示例源代码: https://ncu.dl.sourcef ...

  6. CF789A. Anastasia and pebbles

    /* CF789A. Anastasia and pebbles http://codeforces.com/contest/789/problem/A 水题 题意:有两个背包,每次分别可取k个物品, ...

  7. 洛谷 U6850 手机密码

    U6850 手机密码 题目背景 小明的手机上设了一个由四个数字组成的密码,但是小明自己的记性不好,但又不想把密码直接记在纸上,于是便想了一个方法. 题目描述 小明有四行数字,每行数字都有n[i](&l ...

  8. oracle 解除锁表sql

    select b.owner,b.object_name,a.session_id,a.locked_mode from v$locked_object a,dba_objects b where b ...

  9. iOS多线程与网络开发之解析json数据

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. // 同步发送信息 2 NSData *data = [NSURLConnection sendSynchronousRequest:request r ...

  10. POJ训练计划3422_Kaka&#39;s Matrix Travels(网络流/费用流)

    解题报告 题目传送门 题意: 从n×n的矩阵的左上角走到右下角,每次仅仅能向右和向下走,走到一个格子上加上格子的数,能够走k次.问最大的和是多少. 思路: 建图:每一个格子掰成两个点,分别叫" ...