bootstrap表格内容循环

最新推荐文章于 2022-05-11 14:47:34 发布

文维

最新推荐文章于 2022-05-11 14:47:34 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/dx523/article/details/71479756

bootstrap 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Bootstrap实现表格数据的动态加载及展示。通过data-url属性指定远程数据源，表格将根据设置的表头名称自动填充数据，示例中展示了具体的HTML结构和远程数据格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在试用bootstrap是表格循环时用下面所示的方式：

<table id="teacher_table" class="text-center" data-toggle="table" data-url="data.php" data-method="post"  
                   data-query-params="queryParams"  
                    data-toolbar="#toolbar"  
                    data-pagination="true"  
                    data-search="true"  
                    data-show-refresh="true"  
                    data-show-toggle="true"  
                    data-show-columns="true"  
                    data-page-size="5">  
                <thead>  
                    <tr>  
                        <th data-field="name">用户账号</th>  
                        <th data-field="pwd">用户密码</th>  
                        <th data-field="t_name">教师姓名</th>  
                    </tr>  
                </thead>  
            </table>

其中data-url属性是指远程获取的数据，格式根据上面设置的表头名称data-field属性，远程资源需要按照这样的格式：

[{"name":"shangsan","pwd":"20160822","t_name":"张三"},  
{"name":"lisi","pwd":"20170233","t_name":"李四"},  
{"name":"wangwu","pwd":"20140985","t_name":"王五"},  
{"name":"zhengkai","pwd":"20140011","t_name":"郑凯"},  
{"name":"guanlin","pwd":"20141122","t_name":"关林"},  
{"name":"zhaoli","pwd":"20146699","t_name":"赵丽"},  
{"name":"dengming","pwd":"20167582","t_name":"邓明"},  
{"name":"limin","pwd":"20142541","t_name":"李敏"},  
{"name":"lixiaojuan","pwd":"20143651","t_name":"李晓娟"},  
{"name":"liming","pwd":"20142015","t_name":"李明"},  
{"name":"yuanjie","pwd":"20142036","t_name":"袁杰"}]