bootstrap table表格支持排序搜索、字段显示、导出excel操作代码-html代码-BFW代码库

bootstrap table表格支持排序搜索、字段显示、导出excel操作代码

代码语言：html

所属分类：表格

代码描述：bootstrap table表格支持排序搜索、字段显示、导出excel操作代码

代码标签： bootstrap table 表格排序搜索字段显示导出 excel 操作代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">


  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap-table.1.10.0.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-table.1.10.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-table-editable.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-table-export.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tableExport.js"></script>

    </head>
    <body>
        <div id="reportTableDiv" class="span10" style="width:70%">
            <table id="reportTable"></table>
        </div>
        <script type="text/javascript">
            $(function() {
                $('#reportTable').bootstrapTable({
                    method: 'get',
                    cache: false,
                    height: 400,
                    striped: true,
                    pagination: true,
                    pageSize: 20,
                    pageNumber: 1,
                    pageList: [10, 20, 50, 100, 200, 500],
                    search: true,
                    showColumns: true,
                    showRefresh: true,
                    showExport: true,
                    exportTypes: ['excel'],
                    clickToSelect: true,
                    columns: [{
                        field: "user_email",
                        title: "email",
                        align: "center",
                        valign: "middle",
                        sortable: "true"
                    }, {
                        field: "user_company",
                        title: "company",
                        align: "center",
                        valign: "middle",
                        sortable: "true"
                    }, {
                        field: "user_dates",
                        title: "date",
                        align: "center",
                        valign: "middle",
                        sortable: "true"
                    }, {
                        field: "user_lastlogintime",
                        title: "lastlogintime",
                        align: "center",
                        valign: "middle",
                        sortable: "true"
                    }, {
                        field: "user_version",
                        title: "version",
                        align: "center",
                        valign: "middle",
                        sortable: "true"
                    }, {
                        field: "user_isv2",
                        title: "isv2",
                        align: "center",
                        valign: "middle",
                        sortable: "true"
                    }, {
                        field: "userstatus_usertype",
                        title: "usertype",
           .........完整代码请登录后点击上方下载按钮下载查看