利用DOM创建分页列表

最新推荐文章于 2023-04-27 12:19:53 发布
chuorou9758
最新推荐文章于 2023-04-27 12:19:53 发布
阅读量317
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/2256041/blog/366297
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" href="page.css" rel="stylesheet">
    <script src="data.js"></script>
    <!--<script src="../js/page.js"></script>-->
 <script>
        var num = 10;//每页显示的数量
 var count = person.length;//总记录数
 var page;//总页数
 var current=1;//当前页从第一页开始
 if (count % num == 0) {
            page = count / num;
 } else {
            page = Math.ceil(count / num);
 }
        var show=5;//每次显示的页码数量，包括首页和尾页
 function initial_page(p) {
            var ptable = document.getElementById("table1");
 var rows_num = ptable.rows.length;
 var div2 = document.getElementById("d2");

 var tbody1 = document.getElementById("tbody1");
 tbody1.innerHTML = "";
 current=p;
 if (p != page) {
                for (var j = 1, i = num * (current - 1) + 1; i <= num * current && j <= num; i++, j++) {
                    var tr = document.createElement("tr");
 var td1 = document.createElement("td");
 var td2 = document.createElement("td");
 var td3 = document.createElement("td");
 var td4 = document.createElement("td");
 var td5 = document.createElement("td");
 var td6 = document.createElement("td");

 td1.appendChild(document.createTextNode(person[i - 1].姓名));
 td2.appendChild(document.createTextNode(person[i - 1].年龄));
 td3.appendChild(document.createTextNode(person[i - 1].性别));
 td4.appendChild(document.createTextNode(person[i - 1].电话));
 td5.appendChild(document.createTextNode(person[i - 1].邮箱));
 td6.appendChild(document.createTextNode(person[i - 1].地址));

 tbody1.appendChild(tr);
 tbody1.appendChild(td1);
 tbody1.appendChild(td2);
 tbody1.appendChild(td3);
 tbody1.appendChild(td4);
 tbody1.appendChild(td5);
 tbody1.appendChild(td6);
 }
            } else {
                for (var j = 1, i = num * (current - 1) + 1; j <= count - num * (current - 1) && i <= count; i++, j++) {
                    var tr = document.createElement("tr");
 var td1 = document.createElement("td");
 var td2 = document.createElement("td");
 var td3 = document.createElement("td");
 var td4 = document.createElement("td");
 var td5 = document.createElement("td");
 var td6 = document.createElement("td");

 td1.appendChild(document.createTextNode(person[i - 1].姓名));
 td2.appendChild(document.createTextNode(person[i - 1].年龄));
 td3.appendChild(document.createTextNode(person[i - 1].性别));
 td4.appendChild(document.createTextNode(person[i - 1].电话));
 td5.appendChild(document.createTextNode(person[i - 1].邮箱));
 td6.appendChild(document.createTextNode(person[i - 1].地址));

 tbody1.appendChild(tr);
 tbody1.appendChild(td1);
 tbody1.appendChild(td2);
 tbody1.appendChild(td3);
 tbody1.appendChild(td4);
 tbody1.appendChild(td5);
 tbody1.appendChild(td6);
 }
            }
            mid_page(current);
 next_page(current);
 }

        function pre_page(p){
            var div2 = document.getElementById("d2");
 p=current;
 if(current==1){
                var s=document.createElement("span");
 s.innerHTML="上一页 ";
 div2.appendChild(s);

 }else{
                var a=document.createElement("a");
 a.href="javascript:initial_page("+(current-1)+");";
 a.innerHTML="上一页 ";
 a.setAttribute("onclick","initial_page("+(current-1)+");");
 a.style="text-decoration: none";
 div2.appendChild(a);
 }
        }
        function jumpPage() {
            var p = document.getElementById("txt").value;
 if (p == null || p == ""||isNaN(p)||(p< 1 || p > page) ){
                /* input1.value=current;
                 } else if (isNaN(p)){
                 alert("请输入正确的页码!");
                 } else if (p< 1 || p > page) {*/
 alert("此页码不存在!")
            } else {
                window.location.href="javascript:initial_page("+p+")";
 }
        }
        function next_page(p){
            var div2 = document.getElementById("d2");
 current=p;
 if(current==page){
                var s=document.createElement("span");
 s.innerHTML="下一页 ";
 div2.appendChild(s);
 }else{
                var a=document.createElement("a");
 a.href="javascript:void(0);";
 a.innerHTML="下一页 ";
 a.setAttribute("onclick","initial_page("+(current+1)+");");
 a.style="text-decoration: none";
 div2.appendChild(a);
 }
            var div2 = document.getElementById("d2");
 var text_node1 = document.createTextNode("转到");
 div2.appendChild(text_node1);

 var input1 = document.createElement("input");
 input1.type = "text";
 input1.id = "txt";
 input1.style = "width:20px";
 div2.appendChild(input1);

 var text_node2 = document.createTextNode("页");
 div2.appendChild(text_node2);

 var input2 = document.createElement("input");
 input2.id="btn";
 input2.type = "button";
 input2.value = "确定";
 input2.onclick= function(){
                jumpPage();
 }
            div2.appendChild(input2);
 }

        function mid_page(p){
            var div2 = document.getElementById("d2");
 p=current;
 div2.innerHTML="";
 pre_page(p);
 if(current<=show-1){
                for(var i=1;i<=show;i++){
                    var a=document.createElement("a");
 a.innerHTML=i+" ";
 a.href="javascript:initial_page("+i+");";
 a.setAttribute("onclick","initial_page("+i+");");
 a.style="text-decoration: none";
 div2.appendChild(a);
 }

                var s1=document.createElement("span");
 s1.innerHTML="... "
 div2.appendChild(s1);

 var a=document.createElement("a");
 a.innerHTML=page+" ";
 a.href="javascript:initial_page("+page+");";
 a.setAttribute("onclick","initial_page("+page+");");
 a.style="text-decoration: none";
 div2.appendChild(a);
 }else if(current>=page-show+3){
                var a=document.createElement("a");
 a.setAttribute("onclick","initial_page("+1+");");
 a.href="javascript:initial_page("+i+");";
 a.innerHTML="1 ";
 a.style="text-decoration: none";
 div2.appendChild(a);

 var s1=document.createElement("span");
 s1.innerHTML="... ";
 div2.appendChild(s1);

 for(var i=page-(show-1)+1;i<=page;i++){
                    var a=document.createElement("a");
 a.setAttribute("onclick","initial_page("+i+");");
 a.href="javascript:initial_page("+i+");";
 a.innerHTML=i+" ";
 a.style="text-decoration: none";
 div2.appendChild(a);
 }
            }else{
                var a1=document.createElement("a");
 a1.setAttribute("onclick","initial_page("+1+");");
 a1.href="javascript:initial_page("+1+");";
 a1.innerHTML="1 ";
 a1.style="text-decoration: none";
 div2.appendChild(a1);

 var s1=document.createElement("span");
 s1.innerHTML="... ";
 div2.appendChild(s1);

 for(var i=current-2;i<=current+2;i++){
                    var a=document.createElement("a");
 a.setAttribute("onclick","initial_page("+i+");");
 a.href="javascript:initial_page("+i+");";
 a.innerHTML=i+" ";
 a.style="text-decoration: none";
 div2.appendChild(a);
 }

                var s2=document.createElement("span");
 s2.innerHTML="... ";
 div2.appendChild(s2);

 var a2=document.createElement("a");
 a2.setAttribute("onclick","initial_page("+page+");");
 a2.href="javascript:initial_page("+page+");";
 a2.innerHTML=page+" ";
 a2.style="text-decoration: none";
 div2.appendChild(a2);
 }
        }



    </script>
</head>
<body onload="initial_page(1)">
    <div id="d1">
        <table id="table1">
            <caption><b>客户通讯录</b></caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody id="tbody1"></tbody>
        </table>
    </div>

    <div id="d2"></div>
</body>
</html>
var person=[
    {"姓名":"张三1","性别":"男","年龄":"20","电话":"123456","邮箱":"123134@qq.com","地址":"上海杨浦区"},
]
转载于:https://my.oschina.net/u/2256041/blog/366297