使用JS动态生成表格数据和分页显示

根据录入的内容动态显示到页面，不需要通过数据库保存，这样子减轻服务器压力。同时如果数据过多，支持分页显示，这些数据到保存时可以一起提交到后台。
效果如下：
这里写图片描述
js代码(要引入JQuery)：
<!DOCTYPE html>
<html lang="en">
<style>

</style>
<head>
    <meta charset="UTF-8">
    <script src="myjs/jquery-1.9.1.min.js"></script>
    <title>动态表格数据插入和分页显示</title>
</head>
<body>
    <table>
          <tr>
            <td>序号：</td>
            <td >
                <input type="text" class="form-control" id="number" name="number">
            </td>
        </tr>
        <tr>
            <td>附件名称：</td>
            <td >
                <input type="text" class="form-control" id="annexName" name="annexName">
            </td>
        </tr>
        <tr>
            <td>附件说明：</td>
            <td >
                <textarea type="text" class="form-control" cols="15"   id="annexInstruction" name="annexInstruction"></textarea>
            </td>

        </tr>
        <tr>
            <td>
                <button type="button" id="addAnnex">添加</button>
            </td>
        </tr>
    </table>

    <table class="table table-bordered" id="mytable-add" style="margin-left: 30%;width: 40%">
        <tr>
            <th>
                <input type="checkbox" id="checkall">
            </th>
            <th>
                序号
            </th>
            <th>
                附件名称
            </th>
            <th>
                说明
            </th>
        </tr>
        <tbody id="annexTbody" >
            <!--动态生成-->
        </tbody>
        <tr >
            <td></td>
            <td>
                当前第<span id="currentPage">1</span>页
            </td>
            <td>
                 <button type="button" id="prePage">上一页</button>
            </td>
            <td>
                 <button type="button" id="nextPage">下一页</button>
            </td>
        </tr>
        </table>

        <script type="text/javascript">
            var count=0;
            var page=0;
            var size=3;
            var annexList = new Array();
              //添加数据
        $("#addAnnex").click( function () {
            //获取值
            var number = $("#number").val();
            var annexName = $("#annexName").val();
            var annexInstruction = $("#annexInstruction").val();
           //拼接tr数据
            var annexHtml =
                "<tr >" +
                    "<td>" +
                        "<input type = 'checkbox' value='annex" + count + "'>" +
                    "</td>" +
                    "<td>"+ number + "</td>" +
                    "<td>" + annexName + "</td>" +
                    "<td>" + annexInstruction +"</td>" +
                "</tr>";
            if (count < size) {
                //第一页显示的数量
                $("#annexTbody").append(annexHtml);
                $("#nextPage").attr("disabled","disabled");
            } else {
                $("#nextPage").removeAttr("disabled");
            }
            count++;
            //保存到数组中
            var annex = new Object();
            annex.number = number;
            annex.annexName = annexName;
            annex.annexInstruction = annexInstruction;
            annexList.push(annex);
        });

        //上一页
        $("#prePage").click( function () {
             page--;
             paging();
        });

        //下一页
        $("#nextPage").click( function () {
             page++;
             paging();

        });

        //分页
        function paging() {
            var annexHtml ="";
            var curentNumber = page*size;
            var length = curentNumber+size;
            //当前页数
            var currentPage = page+1;
            for(var i = curentNumber; i < length; i++ ) {
                // console.log(annexList[i]);
                if(typeof(annexList[i]) == "undefined") {
                 break;
                }
                annexHtml +=
                 "<tr >" +
                    "<td>" +
                        "<input type = 'checkbox' >" +
                    "</td>" +
                    "<td>"+ annexList[i].number + "</td>" +
                    "<td>" + annexList[i].annexName + "</td>" +
                    "<td>" + annexList[i].annexInstruction +"</td>" +
                "</tr>";

            }

            if(typeof(annexList[length]) == "undefined") {
                //到了最后一页不可以点击
                $("#nextPage" ).attr("disabled","disabled");
            } else {
                //恢复点击
                $("#nextPage" ).removeAttr("disabled");
            }

            if(page == 0) {
                //到了第一页不可以点击
                $("#prePage" ).attr("disabled","disabled");
            } else {
                $("#prePage" ).removeAttr("disabled");
            }
            //填充到表格
            $("#annexTbody").html(annexHtml);
            //显示当前页数
            $("#currentPage").text(currentPage);
        }

        </script>
</body>
</html>
使用JS动态生成表格数据和分页显示

猜你喜欢
