【3.2.2】HTML表格分页（tabLe）

December 24, 2020 html 阅读量：次

效果图：

说明：

bootstrap tab好用,并且是前端分页（就是不需要去读后台数据库来辅助分页）
你下载了bootstrap，不是你就有了bootstrap table插件，你还得要下载bootstrap table插件；

一、下载

bootstrap下载地址：http://www.bootcss.com/

bootstrap table插件下载地址（下面3个有关）最好是从Github下载

官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Github地址： https://github.com/wenzhixin/bootstrap-table

中文文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

首先去github下载最新的版本，下载下来之后解压如下:

复制dist目录下的文件到项目中去:

还得引入Bootstrap的样式与JS，和Jquery文件，完整的引入如下:

<!-- 引入bootstrap样式 -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="css/bootstrap-table.css" rel="stylesheet">
<!-- jquery -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="js/bootstrap-table.js"></script>
<!-- 引入中文语言包 -->
<script src="js/bootstrap-table-zh-CN.js"></script>

二、用法

1.写一个空的table壳就可以

<table class="table table-striped table-bordered table-hover" id="tableL01"></table>

2.在js中准备表头数据和表中的数据后用

$('#tableL01').bootstrapTable({}),就可以启动了，

注意此处的tableL01是你表格的id号，有时不出来数据，是因为在网上拷贝的代码后，没有改id号的原因，对初学者算是一个坑；

3.表头数据和表格内容的数据，都是以json的形式写在$('#tableL01').bootstrapTable({ //你的数据写在这里 });

4.在启动此表格之前，一定要先将以前的表格给清除掉，方法是：

$('#tableL01').bootstrapTable('destroy');   //动态加载表格之前，先销毁表格

以上3、4两点合并起来就是先执行4，再执行3，

5.准备表头数据：

var tableColumns = [
    {field: 'name', title: '名称', sortable: true},
    {field: 'number', title: '编号', sortable: true},
];

6.准备表格内容数据：

var mydata=[
    {name:"aaaa",number:1111},
    {name:"bbbb",number:2222},
    ];

注意表格内容的name,number是与第5点中的field名字是相对应的，不然，你的表格显示不出内容。这算一个坑。

7.完整的$('#tableL01').bootstrapTable({})就应该这样写：

$('#tableL01').bootstrapTable({//表格初始化
    columns: tableColumns,  //表头
    data:mydata, //表格中的数据,这是从本地取得数据，如果是从后台取数据，就应该改为后台地址
});

8.要想达到前端分页的目的，还要加入以下参数：

$('#tableL01').bootstrapTable({//表格初始化
    columns: tableColumns,  //表头
    data:mydata, //通过ajax返回的数据
    width:300,
    height:268,
    method: 'get',
    pageSize: 3, //每页3条
    pageNumber: 1,  //第1页
    pageList: [10,25],   //在使用过程中根据情况调整每页条数.虽然你现在定义的每页3条，但你可以随时调整为10条或25条。
    cache: false,   //不缓存
    striped: true,
    pagination: true,
    sidePagination: 'client',
    search: false,
    showRefresh: false,
    showExport: false,
    showFooter: true,
    // exportTypes: ['csv', 'txt', 'xml'],
    clickToSelect: true,
});

完整的程序如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-table-develop/src/bootstrap-table.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="bootstrap-table-develop/src/bootstrap-table.js"></script>
    <script src="bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
 
    <script type="text/javascript">
        $(function () {
            var tableColumns = [
                {field: 'name', title: '名称', sortable: true},
                {field: 'number', title: '编号', sortable: true},
                {field: 'classes', title: '类型', sortable: true},
                {field: 'standard', title: '规格', sortable: true},
                {field: 'managestaff', title: '专管员', sortable: true},
                {field: 'remark', title: '备注', sortable: true}
            ];
            var data1=[
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
                {name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
 
 
            ];
            $('#tableL01').bootstrapTable('destroy');   //动态加载表格之前，先销毁表格
 
            $('#tableL01').bootstrapTable({//表格初始化
                columns: tableColumns,  //表头
                data:data1, //通过ajax返回的数据
                width:300,
                height:268,
                method: 'get',
                pageSize: 3,
                pageNumber: 1,
                pageList: [],
                cache: false,
                striped: true,
                pagination: true,
                sidePagination: 'client',
                search: false,
                showRefresh: false,
                showExport: false,
                showFooter: true,
                // exportTypes: ['csv', 'txt', 'xml'],
                clickToSelect: true,
            });
 
        });
    </script>
</head>
<body>
 
<div class="panel panel-default">
    <div class="panel-body table-responsive">
        　　　　　　　　　
        <div class="query-div" id="toolbar">
            <form class="form-inline" role="form" id="query_form">
                <div class="form-group query-form-group">
                    <label for="status">状态</label>
                    <select class="form-control" id="with_appr_status"
                    <option value="">全部</option>
                    <option value="S1">待处理</option>
                    <option value="S2">已处理</option>
                    </select>
                </div>
                <div class="form-group query-form-group">
                    <button type="button" class="btn btn-default" id="with_query">查询</button>
                </div>
            </form>
        </div>
 
        <table class="table table-striped table-bordered table-hover" id="tableL01">
 
        </table>
    </div>
</div>
 
</body>
</html>

三、我的案例

结合flask来传参

@search.route('/submit_search_species', methods=['POST'])
def submit_search_species():
    form_information = request.form

    species = form_information["species"]

    #建立table
    # columns = create_dsmz_db()

    spe_hash = ''
    spe_hash = get_info_from_dsmz_db(species)

    data1 = []
    header = ['name','strain','strain_id','bacdive_id','famliy','genbank','note']

    one_index = column_id_header.index('id')
    name_index = column_id_header.index('species')
    strain_index = column_id_header.index('strain')
    strain_id_index = column_id_header.index('strain_id')
    bacdive_id_index = column_id_header.index('bacdive_id')
    family_index = column_id_header.index('family')
    genebank_index = column_id_header.index('genebank')
    note_index = column_id_header.index('note')
    for one_spe in spe_hash:

        # print(one_spe[strain_id_index])
        one_id = str('<a  href=/species/%s> <u><font color=red>%s </p></u></a>' % (one_spe[one_index],one_spe[name_index]))

        one_line = {'name':one_id,
                    'strain': str(one_spe[strain_index].encode('utf-8')),
                    'strain_id': str(one_spe[strain_id_index].encode('utf-8')),
                    'bacdive_id': str(one_spe[bacdive_id_index].encode('utf-8')),
                    'family': str(one_spe[family_index].encode('utf-8')),
                    'genebank': str(one_spe[genebank_index].encode('utf-8')),
                    'note': str(one_spe[note_index].encode('utf-8')),
                    }
        data1.append(one_line)

    result_link = '/data/mschange_batch/%s-result' % species

    html_result = { "result": data1,'test':spe_hash[0]}
    return render_template("search_species_result.html", html_result=html_result)

search_species_result.html

{% extends "base-2.html" %}


{% block body %}

		<br>
		<br>
		<br>
<div class="panel panel-default">
    <div class="panel-body table-responsive">

        <table class="table table-striped table-bordered table-hover" id="tableL01">

        </table>
    </div>
</div>



	<script type="text/javascript">
        $(function () {
            var tableColumns = [
                {field: 'name', title: 'Specie Name', sortable: true},
                {field: 'strain', title: 'Strain', sortable: true},
                {field: 'strain_id', title: 'Strain ID', sortable: true},
                {field: 'bacdive_id', title: 'Bacdive ID', sortable: true},
                {field: 'family', title: 'Family', sortable: true},
                {field: 'genebank', title: 'GenBank', sortable: true},
                {field: 'note', title: 'Note', sortable: true}
            ];
            var data1={{ html_result['result'] |safe}};

            $('#tableL01').bootstrapTable('destroy');   //动态加载表格之前，先销毁表格

            $('#tableL01').bootstrapTable({//表格初始化
                columns: tableColumns,  //表头
                data:data1, //通过ajax返回的数据
                width:300,
                height:485,
                method: 'get',
                pageSize: 10,
                pageNumber: 1,
                pageList: [],
                cache: false,
                striped: true,
                pagination: true,
                sidePagination: 'client',
                search: false,
                showRefresh: false,
                showExport: false,
                showFooter: true,
                // exportTypes: ['csv', 'txt', 'xml'],
                clickToSelect: true,
            });

        });
    </script>

{% endblock %}

参考资料

https://blog.csdn.net/jintingbo/article/details/82924330

药企，独角兽，苏州。团队长期招人，感兴趣的都可以发邮件聊聊：tiehan@sina.cn

个人公众号，比较懒，很少更新，可以在上面提问题，如果回复不及时，可发邮件给我： tiehan@sina.cn