BootStrap table使用方法分析
118 浏览量
2020-10-21
04:02:31
上传
评论
收藏 66KB PDF 举报
BootStrap table使用方法分析使用方法分析
主要为大家详细介绍了JS组件Bootstrap Table使用方法，具有一定的实用性和参考价值，感兴趣的小伙伴们可
以参考一下
本文实例为大家分享了BootStrap table的使用方法，供大家参考，具体内容如下
bootstrap table git address：https://github.com/wenzhixin/bootstrap-table
引入文件
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../bower_components/bootstrap-table-develop/dist/bootstrap-table.min.css"/>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/bootstrap-table.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
使用方式
<table data-toggle="table" data-url="data.json">
<thead>
...
</thead>
</table>
or
<table id="table" class="mychar1-table"></table>
$('#table').bootstrapTable({
url: 'data.json'
});
第二种更好理解点：第二种更好理解点：
var $table = $('#mychart1');
$table.bootstrapTable({
url: reqprojectname_w+'list/spectrumlist',
dataType: "json",
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
singleSelect: false,
pagination: true, //分页
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //显示搜索框
sidePagination: "server", //服务端处理分页
columns: [{
field: 'id',
title: '序号'
}, {
field: 'liushuiid',
title: '交易编号'
}, {
field: 'orderid',
title: '订单号'
}, {
field: 'receivetime',
title: '交易时间'
}, {
field: 'price',
title: '金额'
}, {
field: 'coin_credit',
title: '投入硬币'
}, {
field: 'bill_credit',
title: '投入纸币'
}, {
field: 'changes',
title: '找零'
}, {
field: 'tradetype',
title: '交易类型'
},{
评论0
最新资源