bootstrapTable的使用

最新推荐文章于 2023-04-19 17:43:33 发布

翠西陈

最新推荐文章于 2023-04-19 17:43:33 发布

阅读量977

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap

本文链接：https://blog.youkuaiyun.com/chenze666/article/details/76216009

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用BootstrapTable插件创建可交互的数据表格。通过引入必要的样式表和脚本文件，配置表格的各项属性如分页、搜索等，并实现数据的动态加载及导出功能。

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

引用

<link href="../../assets/css/bootstrap.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../assets/js/dataTables.bootstrap.min.js"></script>
<link href="../../assets/css/bootstrap-table.css" rel="stylesheet" />
<script type="text/javascript" src="../../assets/js/bootstrap-table.js"></script>
<script type="text/javascript" src="../../assets/js/bootstrap-table-zh-CN.js"></script>

table组件

<table class="table table-hover table-bordered table-striped text-nowrap"
        id="httpdnsResult" style="height: 100%;">
                <thead></thead>
                <tbody></tbody>
</table>

加载bootstrapTable

$('#httpdnsResult').bootstrapTable({
                url : condition,
                method : 'post',
                contentType : "application/x-www-form-urlencoded",
                locale : 'zh-CN',
                pagination : true,
                pageNumber : 1,
                pageSize : 10,
                pageList : [ 10, 20, 50, 100 ],
                sidePagination : "client",
                showRefresh : true,
                search : true,
                strictSearch : false,
                showColumns : true,
                sortable : true,
                sortOrder : 'asc',
                showToggle : true,
                showExport : true, //是否显示导出按钮  
                exportDataType : 'all',
                buttonsAlign : "right", //按钮位置  
                exportTypes : [ 'excel' ], //导出文件类型  
                Icons : 'glyphicon-export',
                exportOptions : {
                    fileName : 'httpdns数据', //文件名称设置  
                    worksheetName : 'sheet1', //表格工作区名称  
                    tableName : 'httpdns数据'
                },
                columns : [ {
                    title : '序号',
                    field : 'num',
                }, {
                    title : 'appName',
                    field : 'appName',
                }, {
                    title : 'netWorkType',
                    field : 'netWorkType',
                }, {
                    title : 'client',
                    field : 'client',
                }, {
                    title : 'time(点击排序)',
                    field : 'time',
                    sortable : true,
                    sortName : 'originalTime'
                }]
            })

表格数据加载成功

$("#httpdnsResult").on('load-success.bs.table',function() {
    //加载成功后操作
}