根据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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,637评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 唐优优以前只是个普通人家的孩子。说是普通,其实也不算。优优的父亲离家多年未归,母亲体弱多病卧床不起。这样一看倒也算...
    东洋的西洋医学部阅读 270评论 0 0
  • 1. 转自:【豆丁推荐】-最小二乘法原理在既有线测量中的应用 - 豆丁网 最小二乘法即最小平方法,是一种数学优化技...
    horu阅读 630评论 0 0
  • 我是无意中发现这个游戏的,并没有刻意地去找。那时正是机械设计考试前夕,艰深晦涩的理论知识让我充满了疲惫,根本无...
    屋顶无歌阅读 509评论 0 1