zoukankan      html  css  js  c++  java
  • 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=" 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>

  • 相关阅读:
    织梦CMS如何在首页调用指定的文章 idlist
    织梦列表页5行加横线的实现方法
    在织梦dedecms中实现“文章标题-栏目名称-网站名”导航
    织梦dedecms中修改标题与简略标题长度的方法
    织梦dedecms如何显示所有文章列表
    织梦dedecms页面中增加二维码功能的实现方法
    dedecms中去除首页index.html的方法
    概率期望学习笔记
    NOIP2013货车运输
    牛客网暑期ACM多校训练营(第三场)
  • 原文地址:https://www.cnblogs.com/sg1991/p/4453617.html
Copyright © 2011-2022 走看看