绘制动态html表格

受一个大佬在评论留言的代码启发由来！

首先html部分

 <p align="center">巡线日程表</p>
        <table width="95%" border="1" cellpadding="4" cellspacing="1" bgcolor="#999999" id="tableId">
            <thead>
                <th style="text-align: center">编号</th>
                <th style="text-align: center">日期</th>
                <th style="text-align: center">开始时间</th>
                <th style="text-align: center">派单时间</th>
              <!--  <td>片管员</td>
                <td>巡线单位</td>-->
            </thead>
            <tbody id="list">
            <!--<tr>
                <td bgcolor="#FFFFFF">1</td>
                <td bgcolor="#FFFFFF">&nbsp;</td>
                <td bgcolor="#FFFFFF">&nbsp;</td>
                <td bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
           -->
            </tbody>
        </table>
        <div id="pageDiv"></div>


**js** 部分

```javascript
  var datas = [], Filtered = [], page = 1, pagesize = 10, pageData = [];
    //生成模拟数据
    getAll(start,end);
    for(var x = 0; x < 5;x++){
        datas.push("<tr>" +
            "<td>&nbsp;&nbsp;</td>" +
            "<td>&nbsp;&nbsp;</td>" +
            "<td>&nbsp;&nbsp;</td>" +
            "<td>&nbsp;&nbsp;</td>" +
            "</tr>");
    }

核心JS部分

  //过滤
    function filter(q) {
        Filtered = [];
        if (q == '') {
            Filtered = datas;
        } else {
            for (var i = 0, n = datas.length; i < n; i++) {
                if (datas[i].toLowerCase().indexOf(q.toLowerCase()) > -1) {
                    Filtered.push(datas[i]);
                }
            }
        }
        render();
    }
    //渲染数据
    function render() {
        document.getElementById('list').innerHTML = getPageData();
        setPageInfo();
    }
    //转到指定页
    function goPage(n) {
        page = n;
        render();
    }
    //取得当前页数据
    function getPageData() {
        if ((page - 1) * pagesize > Filtered.length) {
            page = Math.ceil(Filtered.length / pagesize);
        }
        var n = Math.min(pagesize, Filtered.length - (page - 1) * pagesize);
        pageData = Filtered.slice((page - 1) * pagesize, n + (page - 1) * pagesize);
        var html = [];
        for (var i = 0, n = pageData.length; i < n; i++) {
            html.push('<li>' + pageData[i] + '</li>');
        }
        return html.join("");
    }
    //设置分页条信息
    function setPageInfo() {
        var pageinfo = '';
        var pageCount = Math.ceil(Filtered.length / pagesize);
        if (pageCount <= 1) {
            document.getElementById('pageDiv').innerHTML = '';
            return;
        }
        if (page > 1) {
            pageinfo += '<a href="javascript:void(0);" οnclick="goPage(1);">首页</a> ';
        }
        if (page > 10) {
            pageinfo += '<a href="javascript:void(0);" οnclick="goPage(' + (page - 10) + ');">前10页</a> ';
        }
        for (var i = Math.max(1, page - 10) ; i < page; i++) {
            pageinfo += '<a href="javascript:void(0);" οnclick="goPage(' + i + ');">' + i + '</a> ';
        }
        pageinfo += page + ' ';

        for (var i = page + 1 ; i <= Math.min(10 + page, pageCount) ; i++) {
            pageinfo += '<a href="javascript:void(0);" οnclick="goPage(' + i + ');">' + i + '</a> ';
        }
        if (page + 10 < pageCount) {
            pageinfo += '<a href="javascript:void(0);" οnclick="goPage(' + (page + 10) + ');">后10页</a> ';
        }
        if (page < pageCount) {
            pageinfo += '<a href="javascript:void(0);" οnclick="goPage(' + pageCount + ');">末页</a> ';
        }
        document.getElementById('pageDiv').innerHTML = pageinfo;
    }

    Filtered = datas;
    render();

最后：
如果你是通过js动态获取的数据 需要在最后重新渲染数据 也就是 调用

  Filtered = datas;
    render();