最详细的JS动态创建表格以及实现分页!

整篇文章用HTML+JS+JQ实现的功能有：渲染表格，表格搜索，页码详情展示、分页以及分页的快速查找。

效果图

先看效果，在没有数据的情况下。(图一)

完整页面在搜索框输入关键字4，并查找的情况下。(图二)

完整的HTML代码

话不多说先上完整的html代码，为了方便我把css写在一起的。

		  <div>
            <div style="overflow: hidden">
                <input type="text" class="form-control" id="search-input" placeholder="搜索"
                       style="height: 30px!important;width:20%;float:right;margin: 5px 0;">
            </div>
            <div id="table-box" style="height: 428px; clear: both;">
                <table class="table table-striped" style="margin: 0;">
                    <thead style="background-color: #eee;">
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">小区编码</th>
                        <th scope="col">小区名称</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    <!--                <tr>-->
                    <!--                    <th style="width:8%;text-align: center;cursor: pointer">-->
                    <!--                        <input type="radio" id="check-radio" name="isCheck">-->
                    <!--                    </th>-->
                    <!--                </tr>-->
                    </tbody>
                </table>
            </div>
            <nav aria-label="Page navigation example" style="display: flex;align-items: center;justify-content: space-between;height: 74px;">
                <div id="page-text">
                    <!--                    <div style="float: left">第-->
                    <!--                        <span class="first-page"></span>~-->
                    <!--                        <span class="last-page"></span>条,-->
                    <!--                    </div>-->
                    <!--                    <div style="float: left">总共-->
                    <!--                        <span class="page-total"></span>-->
                    <!--                        条数据</div>-->
                </div>
                <div style="display: flex;align-items: center">
                    <ul class="pagination">
                        <!--                    <li class="page-item" id="pre">-->
                        <!--                        <a class="page-link" href="#" aria-label="Previous">-->
                        <!--                            <span aria-hidden="true">&laquo;</span>-->
                        <!--                        </a>-->
                        <!--                    </li>-->
                        <!--                    <li class="page-item"><a class="page-link" href="#">1</a></li>-->
                        <!--                    <li class="page-item"><a class="page-link" href="#">2</a></li>-->
                        <!--                    <li class="page-item"><a class="page-link" href="#">3</a></li>-->
                        <!--                    <li class="page-item" id="next">-->
                        <!--                        <a class="page-link" href="#" aria-label="Next">-->
                        <!--                            <span aria-hidden="true">&raquo;</span>-->
                        <!--                        </a>-->
                        <!--                    </li>-->
                    </ul>
                    <input style="width:50px;margin: 0 5px" type="text" class="form-control" id="search-page" />
                    <div  class="btn btn-default page-confirm" >跳转</div>
                </div>
            </nav>
          </div>

直接复制html代码然后把注释的放开就是图一的效果了，

生成表格

写完了静态的html，那么接下来先渲染表格，这是表格的html代码

            <div id="table-box" style=" height: 428px; clear: both;">
                <table class="table table-striped" style="margin: 0;">
                    <thead style="background-color: #eee;">
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">小区编码</th>
                        <th scope="col">小区名称</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>
            </div>

因为要动态获取表格的高度所以外面加了个盒子。
这是动态生成表格高度的代码

        let tableHeight = document.getElementById("table-box")
        tableHeight.style.height = data.length * 30(每条数据的高度)+ 40(thead的高度) + "px"   //data.length为每页有多少条数据。

接下来动态生成表格的js代码

                  for (let i = 0; i < data.length; i++) {  //data为后端返回的数据
                    var html = "";
                    html += `<tr>
                                 <td style="width:8%;text-align: center;cursor: pointer">
                                 <input type="radio" class="check-radio" name="radio-group"
                                 data-isCheck="${data[i].id == tableList.id ? 'isCheck' : ''}" >
                                 </td>
                                 <td>${data[i].id}</td>
                                 <td>${data[i].Name}</td>
                             </tr>`;
                    $('#tbody').append(html);
                    $('input[data-isCheck="isCheck"]').attr("checked", true);  //true为选择，false为取消选择
                  }

生成了表格后的页面

单选框选择触发事件用这个方法

                // 根据单选框触发是否提交事件!
                $('input:radio.check-radio').change(function () {
                   console.log(this)  //里面自己写需要的功能
                })

搜索功能

接下来搜索功能，在主函数中定义searchList()这个方法

        searchList() {
            let searchInput = document.getElementById("search-input")
            searchInput.addEventListener("keyup", function (event) { //搜索用的键盘回车事件
                event.preventDefault();
                let searchValue = $("#search-input").val()
                if (event.keyCode === 13) {
                    let data = searchValue
                    getTableList(data, 1) //getTableList为表格查询请求接口的方法
                }
            });
        },

这里就实现了搜索功能，效果看图

表格下面的功能

接下来实现表格下面的功能，html代码

            <nav aria-label="Page navigation example" style="display: flex;align-items: center;justify-content: space-between;height: 74px;">
                <div id="page-text">
                </div>
                <div style="display: flex;align-items: center">
                    <ul class="pagination">
                    </ul>
                    <input style="width:50px;margin: 0 5px" type="text" class="form-control" id="search-page" />
                    <div  class="btn btn-default page-confirm" >跳转</div>
                </div>
            </nav>

实现之前要先定义一个对象来储存页码信息

    var pageList= {       //不要在意名字===/~_~/
        pageNo: 1,    //当前页
        pageSize: 10,   //一页多少条,我这里写死了的没有涉及到改变展示页数
        pageCount: 0,    //总共多少条
        pageTotal: 0,    //总共多少页
        pagingShowNum: []  //展示的页码数组成的数组
    };
    var newPagingShowNum=[]  //定义一个新的页码数组成的数组，来装页码

并在请求到后端返回的接口数据中初始化pageObj 对象

                pageList.pageNo = data.pageNum    //当前页
                pageList.pageCount = data.count   //总共多少条数据
                pageList.pageTotal = Math.ceil(pageList.pageCount / pageList.pageSize) //总共多少页

左下的页码展示

实现动态生成左下的页码展示

 $("#page-text").append(`
          当前第<span style="color: #a2a2a2">${pageList.pageNo}</span>页,总<span style="color: #a2a2a2">${pageList.pageCount}</span>条,共<span style="color: #a2a2a2">${pageList.pageTotal}</span>页
          `)

效果图

分页

接下来实现分页，分页有点复杂，当显示到中间时效果如图

因为我做的分页只展示四条数据，涉及到小于五条与大于四条分页时两种情况。
定义pagingShowNum

                    if (pageList.pageTotal <= 5) {
                        for (let i = 0; i < pageList.pageTotal; i++) {
                            pageList.pagingShowNum[i] = i + 1
                        }
                    } else {
                        for (let i = 0; i < 4; i++) {       //最长显示五页
                            pageList.pagingShowNum[i] = i + 1
                        }
                        pageList.pagingShowNum[pageList.pagingShowNum.length - 1] = pageList.pageTotal
                    }

动态生成分页的js代码

           if (pageList.pageTotal <= 5) {//小于五条的情况
                     $(".pagination").append(`
                         <li class="page-item" id="pre">
                       		 <a class="page-link" href="#" aria-label="Previous">
                            	<span aria-hidden="true">&laquo;</span>
                         	 </a>
                         </li>
                    	 <li class="page-item"><a class="pageFirst" href="#">1</a></li>
                   		 <li class="page-item" id="page-div"></li>
                   		 <li class="page-item" id="next">
                      	   <a class="page-link" href="#" aria-label="Next">
                             <span aria-hidden="true">&raquo;</span>
                     	   </a>
                  		</li>
                    `)
                        for (let i = 1; i < pageList.pagingShowNum.length; i++) {
                            if (pageList.pagingShowNum[i]) {
                                $("#page-div").append(`
                                <a class="page-link page-a" href="#" >${pageList.pagingShowNum[i]}</a>
                                `)
                            }
                        }
                    } else { }//大于四条的情况   

当页数大于4条时就要考虑生成…来隐藏没有展示的代码

                  $(".pagination").append( `
                    <li class="page-item" id="pre">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="pageFirst" href="#">1</a></li>
                    <li class="page-item" id="page-div"></li>     <!--中间动态生成的页码-->
                    <li class="page-item"><a class="pageLast" href="#">${pageList.pageTotal}            </a></li>
                    <li class="page-item" id="next">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
               `)
                        $('#page-div').after(`
                      <li class="page-item" ><a class="ellipsis-right" href="#">...</a></li>
                 `); //右边省略号
                        $('#page-div').before(`
                      <li class="page-item" ><a class="ellipsis-left" href="#">...</a></li>
                 `); //左边省略号
                        for (let i = 1; i < pageList.pagingShowNum.length - 1; i++) {
                            if (newPagingShowNum.length != 0) {
                                pageList.pagingShowNum[1] = newPagingShowNum[1]
                                pageList.pagingShowNum[2] = newPagingShowNum[2]
                                $("#page-div").append(`
                <a class="page-link page-a" href="#">${pageList.pagingShowNum[i]}</a>`)
                            } else {
                                if (pageList.pagingShowNum[i]) {
                                    $("#page-div").append(`
                <a class="page-link page-a" href="#">${pageList.pagingShowNum[i]}</a>
                `)
                                }
                            }
                        }
                        if (pageList.pagingShowNum[2] < 4) {
                            $(".ellipsis-left").hide()    //中间页面小于4，左边省略号隐藏
                        }
                        if (pageList.pagingShowNum[2] > pageList.pageTotal - 2) {
                            $(".ellipsis-right").hide()   //中间页面大于最大页码-2，右边省略号隐藏
                        }

右边省略号展开

                $(".ellipsis-right").on("click", function () {
                    $("#page-div").empty()
                    if (pageList.pagingShowNum[2] < pageList.pageTotal - 2) {
                        pageList.pagingShowNum[1] = pageList.pagingShowNum[1] + 2
                        pageList.pagingShowNum[2] = pageList.pagingShowNum[2] + 2
                    } else {      //点到最右边是[1,…,total-2,total-1,total]
                        pageList.pagingShowNum[1] = pageList.pageTotal - 2
                        pageList.pagingShowNum[2] = pageList.pageTotal - 1
                        $(".ellipsis-right").hide()
                    }
                    if (pageList.pagingShowNum[2] == pageList.pageTotal - 1) {
                        $(".ellipsis-right").hide()
                    }
                    if (pageList.pagingShowNum[1] > 3) {
                        $(".ellipsis-left").show()
                    }
                    for (let i = 1; i < pageList.pagingShowNum.length - 1; i++) {
                        if (pageList.pagingShowNum[i]) {
                            $("#page-div").append(`
                <a class="page-link page-a" href="#">${pageList.pagingShowNum[i]}</a>
                `)
                        }
                    }
                    newPagingShowNum= pageList.pagingShowNum
                })

左边省略号展开

                $(".ellipsis-left").on("click", function () {
                    $("#page-div").empty()
                    if (pageList.pagingShowNum[1] > 3) {
                        pageList.pagingShowNum[1] = pageList.pagingShowNum[1] - 2
                        pageList.pagingShowNum[2] = pageList.pagingShowNum[2] - 2
                        $(".ellipsis-right").show()
                    } else {  //点到最左边是[1,2,3,…,total]
                        pageList.pagingShowNum[1] = 2
                        pageList.pagingShowNum[2] = 3
                    }
                    if (pageList.pagingShowNum[1] < 3) {
                        $(".ellipsis-left").hide()
                    }
                    for (let i = 1; i < pageList.pagingShowNum.length - 1; i++) {
                        if (pageList.pagingShowNum[i]) {
                            $("#page-div").append(`
                <a class="page-link page-a" href="#">${pageList.pagingShowNum[i]}</a>
                `)
                        }
                    }
                    newPagingShowNum = pageList.pagingShowNum
                })

页码选择

                $("#page-div").on("click", function (e) {
                    if (e.target.classList.value.includes("page-a")) {
                        let pageNum = Number(e.target.text)
                        Action.isValue("", pageNum)   //向后端请求数据的方法
                        if (pageNum >= 3 && pageNum != newPagingShowNum[2] && pageNum < pageList.pageTotal) {
                            newPagingShowNum = [1, pageNum - 1, pageNum, pageList.pageTotal]
                        } else if (pageNum >= 3 && pageNum == newPagingShowNum[2] && pageNum < pageList.pageTotal - 1) {
                            newPagingShowNum = [1, pageNum, pageNum + 1, pageList.pageTotal]
                        } else if (pageNum < 3) {
                            newPagingShowNum = [1, 2, 3, pageList.pageTotal]
                        }
                    }
                })

第一页

                $(".pageFirst").on("click", function () {
                    let pageNum = 1
                    Action.isValue("", pageNum)  //向后端请求数据的方法
                    newPagingShowNum = [1, 2, 3, pageList.pageTotal]
                })

最后一页

                $(".pageLast").on("click", function () {
                    let pageNum = pageList.pageTotal
                    Action.isValue("", pageNum)   //向后端请求数据的方法
                    newPagingShowNum = [1, pageNum - 2, pageNum - 1, pageList.pageTotal]
                })

上一页

                $("#pre a").on('click', function () {
                    if (pageList.pageNo > 1) {
                        let pageNum = pageList.pageNo - 1;
                        Action.isValue("", pageNum)    //向后端请求数据的方法
                        if (pageNum > 2 && pageNum < pageList.pageTotal) {
                            newPagingShowNum = [1, pageNum - 1, pageNum, pageList.pageTotal]
                        } else if (pageNum = 2) {
                            newPagingShowNum = [1, pageNum, pageNum + 1, pageList.pageTotal]
                        }
                    }
                });

下一页

                $("#next a").on('click', function () {
                    if (pageList.pageNo < pageList.pageTotal) {
                        let pageNum = pageList.pageNo + 1;
                        Action.isValue("", pageNum)    //向后端请求数据的方法
                        if (pageNum > 2 && pageNum < pageList.pageTotal - 1) {
                            newPagingShowNum = [1, pageNum, pageNum + 1, pageList.pageTotal]
                        } else if (pageNum = pageList.pageTotal - 1) {
                            newPagingShowNum = [1, pageNum - 1, pageNum, pageList.pageTotal]
                        }
                    }
                });

分页到这里就结束了，有些地方要多思考。

快速查找分页

最后实现跳转功能，接下来搜索功能，在主函数中定义pageSearch()这个方法
话不多说，上代码

        pageSearch() {
            let searchPage = document.getElementById("search-page")
             //同时绑定了鼠标点击跳转按钮事件和输入数字后直接按Enter回车搜索
            searchPage.addEventListener("keyup", function (e) {  
                e.preventDefault()
                if (event.keyCode === 13) {
                    $(".page-confirm").click()
                }
            })
            $(".page-confirm").on("click", function (e) {
                e.preventDefault()
                let pageValue = Number($("#search-page").val())
                //正则判断
                if (!pageValue) {
                    Action.isValue("", 1)     //向后端请求数据的方法，这里输入错误默认返回第一页
                    pageList.pageMessage = "请输入数字！"
                } else if (pageValue <= 0) {
                    Action.isValue("", 1)    //向后端请求数据的方法，这里输入错误默认返回第一页
                    pageList.pageMessage = "请输入正整数！"
                } else if (Math.floor(pageValue) === pageValue) {
                    if (pageValue > pageList.pageTotal) {
                        Action.isValue("", 1)    //向后端请求数据的方法，这里输入错误默认返回第一页
                        pageList.pageMessage = "超出最大页码！"
                    } else {
                        Action.isValue("", pageValue)   //向后端请求数据的方法，这里输入成功查找pageValue
                        pageList.pageMessage = "查找成功！"
                        //页码改变了，newPagingShowNum这个储存页码的数组也要改变
                        if (pageValue < pageList.pageTotal - 1 && pageValue > 1) {
                            newPagingShowNum = [1, pageValue, pageValue + 1, pageList.pageTotal]
                        } else if (pageValue == pageList.pageTotal - 1) {
                            newPagingShowNum = [1, pageValue - 1, pageValue, pageList.pageTotal]
                        } else if (pageValue == 1) {
                            newPagingShowNum = [1, 2, 3, pageList.pageTotal]
                        } else if (pageValue == pageList.pageTotal) {
                            newPagingShowNum = [1, pageValue - 2, pageValue - 1, pageList.pageTotal]
                        }
                    }
                } else {
                    Action.isValue("", 1)
                    pageList.pageMessage = "请输入整数！"   //向后端请求数据的方法，这里输入错误默认返回第一页
                }
            })
        },

到这里基本上关于表格的所有功能都实现了，有什么问题欢迎补充…,对了没有实现改变点击改变按钮颜色，有什么更好的方法欢迎补充…