根据json数据创建表格的方法并能够控制表格翻页

表格的头部已经写好

<table>
        <thead>
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
        </thead>
        <tbody id="tbody">//根据json数据在表下面自动添加数据
        </tbody>
    </table>

传递的json如下

var json = {
            a:{"a":"北京市",
            "b":"东城区",
            "c":"西城区",
            "d":"朝阳区",
            "e":"丰台区"},
            b:{"a":"石景山区",
            "b":"海淀区",
            "c":"门头沟区",
            "d":"房山区",
            "e":"通州区"},
            c:{"a":"顺义区",
            "b":"昌平区",
            "c":"大兴区",
            "d":"怀柔区",
            "e":"平谷区"},
            d:{"a":"密云区",
            "b":"延庆区",
            "c":"天津市",
            "d":"和平区",
            "e":"河东区"},
            e:{"a":"河西区",
            "b":"南开区",
            "c":"河北区",
            "d":"红桥区",
            "e":"东丽区"},
            f:{"a":"西青区",
            "b":"津南区",
            "c":"北辰区",
            "d":"武清区",
            "e":"宝坻区"},
            q:{"a":"北京市",
            "b":"东城区",
            "c":"西城区",
            "d":"朝阳区",
            "e":"丰台区"},
            w:{"a":"石景山区",
            "b":"海淀区",
            "c":"门头沟区",
            "d":"房山区",
            "e":"通州区"},
            r:{"a":"顺义区",
            "b":"昌平区",
            "c":"大兴区",
            "d":"怀柔区",
            "e":"平谷区"},
            t:{"a":"密云区",
            "b":"延庆区",
            "c":"天津市",
            "d":"和平区",
            "e":"河东区"},
            y:{"a":"河西区",
            "b":"南开区",
            "c":"河北区",
            "d":"红桥区",
            "e":"东丽区"},
            u:{"a":"西青区",
            "b":"津南区",
            "c":"北辰区",
            "d":"武清区",
            "e":"宝坻区"}
        };

js代码部分：

• 创建一个五列的数据

            //console.log(json[i])
                row = tbody.insertRow(tbody.rows.length);
                row.insertCell(0).innerHTML =json[i].a;
                row.insertCell(1).innerHTML =json[i].b;
                row.insertCell(2).innerHTML =json[i].c;
                row.insertCell(3).innerHTML =json[i].d;
                row.insertCell(4).innerHTML =json[i].e;
        }

此时一个表格就建好了

表格的翻页

js代码如下

<script>
 $(function() {
    var $table = $('table');
    var currentPage = 0;
    //当前页默认值为0 var pageSize = 5;
    //每一页显示的数目 $table.bind('paging',function() {
    $table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();
}
);
    var sumRows = $table.find('tbody tr').length;
    var sumPages = Math.ceil(sumRows/pageSize);
    //总页数 var $pager = $('<div class="page"></div>');
    //新建div，放入a标签,显示底部分页码 for(var pageIndex = 0;
    pageIndex<sumPages;
    pageIndex++) {
    $('<a href="#" rel="external nofollow" id="pageStyle" onclick="changCss(this)"><span>'+(pageIndex+1)+'</span></a>').bind("click", {
    "newPage":pageIndex}
,function(event) {
    currentPage = event.data["newPage"];
    $table.trigger("paging");
    //触发分页函数}
).appendTo($pager);
    $pager.append(" ");
}
$pager.insertAfter($table);
    $table.trigger("paging");
    //默认第一页的a标签效果 var $pagess = $('#pageStyle');
    $pagess[0].style.backgroundColor="#006B00";
    $pagess[0].style.color="#ffffff";
}
);
    //a链接点击变色，再点其他回复原色function changCss(obj) {
    var arr = document.getElementsByTagName("a");
    for(var i=0;
    i<arr.length;
    i++) {
    if(obj==arr[i]) {
    //当前页样式 obj.style.backgroundColor="#006B00";
    obj.style.color="#ffffff";
}
else {
    arr[i].style.color="";
    arr[i].style.backgroundColor="";
}
}
}
</script>  

• 翻页标签的样式如下规定

<style>
#pageStyle{ 
         display:inline-block; 
         width:32px; 
         height:32px; 
         border:1px solid #CCC; 
         line-height:32px; 
         text-align:center; 
         color:#999; 
         margin-top:20px; 
         text-decoration:none; 
         
         } 
         #pageStyle:hover{ 
                 background-color:#CCC; 
         } 
         #pageStyle .active{ 
                 background-color:#0CF; 
                 color:#ffffff; 
         } 
</style>