bootstrap table样式丢失
2017-10-14 11:53
393 查看
问题描述:采用bootstrap中的table进行页面布局,然后通过ajax请求数据源,然后动态添加表格内容。添加时,采用的自己拼接字符串,然后追加到表格中。结果发现bootstrap的表格样式没有生效。
页面代码:
JS代码:
如上,便是具体代码,内容拼接也很正常,页面能够正常显示数据,但样式丢失。
通过笔者研究后,发现这样动态添加的方式是有问题的。
不能直接在<table>标签中动态append代码。如果想要自己拼写代码,需要在<tbody>中追加代码,这样样式就能正常展示。
修改后代码:
当然,除了自己手动拼接html代码外,也可以引用bootstrap-table.js自动的添加内容。既方便也不会出现差错。
具体使用方式,请参见:多种方式填充单元格数据
希望对大家有帮助,谢谢!
页面代码:
<table class="table table-striped" id="content"> <th class="row"> <td class="col-xs-3">消费类别</td> <td class="col-xs-3">描述</td> <td class="col-xs-3">消费数量</td> <td class="col-xs-3">消费时间</td> </th> </table>
JS代码:
$.ajax({ type: "GET", url: "../../getBillingRecords.do", // contentType: "application/json; charset=utf-8", dataType: "json", async:false, data:{ currentPage:options.currentPage, pageSize:options.numberOfPages }, success: function (data) { if (data == ""){ swal({ title: "暂无数据", text: "3秒后自动消失", timer: 3000, type:"info", showConfirmButton: true }); }else{ var html = ""; for (var i = 0; i < data.length;i++){ html += "<tr class='row'>" + "<td class='col-xs-3'>"+data[i].categoryName+"</td>" + "<td class='col-xs-3'>"+data[i].describes+"</td>" + "<td class='col-xs-3'>"+data[i].amount+"</td>" + "<td class='col-xs-3'>"+data[i].createTime+"</td>" + "</tr>" ; } // $("#content").empty(); $("#content").append(html); } }, error: function () { swal({ title: "服务器错误,请联系管理员", text: "5秒后自动消失", timer: 5000, type:"error", showConfirmButton: true }); } });
如上,便是具体代码,内容拼接也很正常,页面能够正常显示数据,但样式丢失。
通过笔者研究后,发现这样动态添加的方式是有问题的。
不能直接在<table>标签中动态append代码。如果想要自己拼写代码,需要在<tbody>中追加代码,这样样式就能正常展示。
修改后代码:
<table class="table table-striped"> <th class="row"> <td class="col-xs-3">消费类别</td> <td class="col-xs-3">描述</td> <td class="col-xs-3">消费数量</td> <td class="col-xs-3">消费时间</td> </th> <tbody id="content"> </tbody> </table>
当然,除了自己手动拼接html代码外,也可以引用bootstrap-table.js自动的添加内容。既方便也不会出现差错。
具体使用方式,请参见:多种方式填充单元格数据
希望对大家有帮助,谢谢!
相关文章推荐
- BootStrap的table表格,栅格系统,form表单的样式
- 如何给bootstrap table设置行列单元格样式
- Bootstrap 之Table样式
- bootstrap-table自定义复选框列的样式
- bootstrap设置table的样式
- Bootstrap 之Table样式
- bootstrap-table,当前行鼠标悬停样式
- bootstrap table的样式
- 关于bootstrap--表格(table的各种样式)
- 给bootstrap table设置行列单元格样式
- bootstrap table样式
- bootstrap在IE下table丢失横向滚动条的问题
- Bootstrap导航栏样式使用
- SpringMVC+bootstrap-table
- bootstrap table笔记
- Bootstrap Table简单例子学习
- bootstrapTable+ajax加载数据 refresh更新数据
- tableView cell的几种样式样式 右侧带图片
- bootstrap-table 初始化数据及使用问题
- ios tableview一些样式的整理