【3.2.2】HTML表格分页(tabLe)

效果图:

说明:

  1. bootstrap tab好用,并且是前端分页(就是不需要去读后台数据库来辅助分页)
  2. 你下载了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 %}

参考资料

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

Sam avatar
About Sam
专注生物信息 专注转化医学