html分页添加信息

html-css016

html分页添加信息,第1张

可使用占位符从数据集中的字段导入HTML以在分页报表中使用。

可使用占位符从数据集中的字段导入HTML以在分页报表中使用。默认情况下,占位符表示纯文本,因此需要将占位符的标记类型改为HTML。

分页是指在web页面有大量数据需要显示时,当一页的内容太多不利于阅读和不利于数据提取的情况下,可以分为多页进行显示。

<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE>New Document</TITLE>

    <style type="text/css">

        * {

    margin: 0

    padding: 0

}

#content {

    margin: auto

    width: 400px

    border: 1px solid black

}

.on {

    color: red

}

.off {

    color: black

}

body {

    font-family: "Courier New"

}

ul {

    padding: 10px 0px 10px 45px

}

ul li {

    color: red

}

    </style>

    <script type="text/javascript">

        window.onload = function() {

            Page.arr = Page.pushArr()

            Page.setClickPageNum()

            Page.allContent("null")

        }

        var Page = {

            defaultPerPageNum: 4,

            arr: null,

            removedBlankStr: function(str) {

                var regex = /^\s*|\s*$/g

                return str.replace(regex, "")

            },

            setTotalPageNums: function() {

                var pp = Number(Page.perPageNum('t1'))

                var pnums = Page.arr.length / pp > parseInt(Page.arr.length / pp) ? parseInt(Page.arr.length / pp) + 1 : Page.arr.length / pp

                var div = document.getElementById('pagenum')

                div.innerHTML = ""

                for (var i = 0 i < pnums i++) {

                    var a = document.createElement('a')

                    a.href = "#"

                    a.innerHTML = i + 1

                    a.setAttribute('class', 'off')

                    div.appendChild(a)

                    div.innerHTML += "&nbsp"

                }

                Page.setClickPageNum()

            },

            perPageNum: function(PerPageNum) {

                var pv = document.getElementById(PerPageNum).value

                pv = Page.removedBlankStr(pv)

                if ("" == pv || isNaN(pv) || (new RegExp(/^[-]*[0]+.*?$/g).test(pv)) || pv < 0) {

                    pv = Page.defaultPerPageNum

                    document.getElementById(PerPageNum).value = pv

                }

                document.getElementById('p1').innerHTML = pv

                return pv

            },

            getClickPageNum: function(diva) {

                return parseFloat(diva.innerHTML)

            },

            setClickPageNum: function() {

                var divx = document.getElementById('pagenum')

                var a = divx.children

                var len = a.length

                for (var i = 0 i < len i++) {

                    a[i].onclick = function() {

                        this.className = "on"

                        Page.allContent(this)

                    }

                }

            },

            pushArr: function() {

                var arr = new Array()

                var ul = document.getElementById('ul1')

                var len = ul.children.length

                for (var i = 0 i < len i++) {

                    arr.push(ul.children[i])

                }

                return arr

            },

            allContent: function(divb) {

                var ul = document.getElementById('ul1')

                ul.innerHTML = ""

                var pp = parseFloat(this.perPageNum('t1'))

                if ("null" == divb) {

                    divb = document.getElementById('pagenum').children[0]

                    divb.className = "on"

                }

                var pg = this.getClickPageNum(divb) // 1 2 3

                var ppj = pp * (pg - 1) // 0 4 8

                var end = ppj + pp // 4 8 12

                var arr = this.arr

                var pnums = arr.length / pp > parseInt(arr.length / pp) ? parseInt(arr.length / pp) + 1 : arr.length / pp

                for (var i = ppj i < end i++) {

                    var a = arr[i]

                    if (null != a) {

                        ul.appendChild(a)

                    }

                }

            },

            doAction: function() {

                Page.perPageNum('t1')

                Page.setTotalPageNums()

                Page.allContent("null")

            }

        }

    </script>

</HEAD>

<BODY>

    <div id='content'>

        <ul id="ul1">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>7</li>

            <li>8</li>

            <li>9</li>

        </ul>

        <div id="pagenum"><a href="#" class="on">1</a>&nbsp<a href="#">2</a>&nbsp<a href="#">3</a>

        </div>

        <input type="text" value="4" id="t1" />&nbsp

        <input type="button" value="set" onclick="Page.doAction()" />&nbsp&nbspEach Page

        <a id="p1"></a>Records</div>

</BODY>

</HTML>

很简单的,我给你说两种方法。

第一种最简单,直接生成若干个<div>或者<table>,因为你说是文章,所以我以下用<div>,这样比较简单。

<div id="div1">第一页内容</div>

<div id="div2" style="display:none">第二页内容</div>

<div id="div3" style="display:none">第三页内容</div>

然后你再作几个链接类似于1,2,3这样的文字,点击文字,相应的页面显示,其他页面隐藏。这样就等于有了分页效果。

第二种,

var array =["第一页内容","第二页内容","第三页内容"]

<div id="div1">第一页内容</div>

然后你再作几个链接类似于1,2,3这样的文字,点击文字,把<div>中的内容换成数组中相应的内容。