基于bootstrap的分页以及表格的动态搜索⼀、需求：有时候我们需要做数据的展⽰，通过表格的⽅式展⽰。这⾥涉及到数据的展⽰、搜索。
⼆、组件：
我们使⽤bootstrap的table插件来完成我们的需求。分页、搜索。
官⽅地址：
Bootstrap中⽂⽹：
Bootstrap Table Demo：
Bootstrap Table API：
Bootstrap Table源码：
Bootstrap DataPicker：
Boostrap Table 扩展API：
三、使⽤。
1、导⼊js
1 <script src="/static/js/jquery-2.1.1.min.js"></script>
2 <script src="/static/js/bootstrap.min.js"></script>
3 <script src="/static/plugins/fast-click/fastclick.min.js"></script>
4 <script src="/static/plugins/bootstrap-table/bootstrap-table.min.js"></script>
2、html代码：
1                    <div class="panel">
2 {#                        <div class="panel-heading">#}
3 {#                            <h3 class="panel-title">服务器信息展⽰</h3>#}
4 {#                        </div>#}
5                        <div class="panel-body">
6                            <table data-toggle="table"
7                                    data-url="/cmdb_back_data/"
8                                    data-search="true"
9                                    data-data-type="json"
10                                    data-show-refresh="true"
11                                    data-show-toggle="true"
12                                    data-show-columns="true"
13                                    data-sort-name="id"
14                                    data-page-list="[10, 15, 20]"
15                                    data-page-size="10"
16                                    data-pagination="true" data-show-pagination-switch="true">
17                                <thead>
18                                    <tr>
19                                        <th data-field="id" data-sortable="true" data-formatter="invoiceFormatter">ID</th>
20                                        <th data-field="docker_ip" data-sortable="true">容器IP</th>
21                                        <th data-field="server_ip" data-sortable="true" data-formatter="dateFormatter">服务器IP</th>
22                                        <th data-field="department" data-align="center" data-sortable="true" data-sorter="priceSorter">所属部门</th>
23                                        <th data-field="app_name" data-align="center" data-sortable="true" data-formatter="statusFormatter">所属应⽤</th>
24                                        <th data-field="app_owner" data-align="center" data-sortable="true" data-formatter="trackFormatter">应⽤负责⼈</th>
25                                    </tr>
26                                </thead>
27                            </table>
28                        </div>
29                    </div>
30                    <!--===================================================-->
3、介绍html中代码的含义：
data-url= 服务器端请求的数据的数据的地址。
data-search 是否启⽤搜索框。
data-data-type 服务器端数据返回是json
data-show-refresh 是否显⽰刷新按钮
data-show-toggle 是否显⽰切换试图（table/card）按钮
data-show-columns 是否显⽰内容列的下拉框
data-sort-name  定义排序列，通过url⽅式获取数据填写字段名，否则填写下标
data-sort-name ⾃定义排序字段。
data-page-list 如果设置了分页，设置可供选择的页⾯数据条数。设置为All 则显⽰所有记录。
data-page-size  如果设置了分页，页⾯数据条数
data-pagination 设置为 true 会在表格底部显⽰分页条
data-show-pagination-switch是否显⽰数据条数选择框
data-field 字段名字。
d ata-side-pagination="server" 分页是在客户端还是服务端。默认是'client'在客户端。
需要注意的是：我们分页⼀般都在服务器端进⾏分页不要在客户端分页，如果数据量较⼤的话，浏览器加载耗时较长！
更多请看：bootstrap-table.wenzhixin/zh-cn/documentation/
四、后端需要传过来⼀个json串，以key:value形式以data-field为key。
后端代码，前端分页代码：
1 def cmdb_back_data(request):
2    list_info = []
3    limit_pag = ('limit', None)  # 页⾯的显⽰的数据条⽬。
4    offset_index = ('offset', None)  # 页⾯的显⽰索引。
5    docker_ip = ('docker_ip', None)  # 容器IP。
6    server_ip = ('server_ip', None)  # 物理机IP。
7    offset_index_session = ('offset_index')
8    docker_obj = models.Docker.objects.all()
9    dep_info = {0: '⼴告', 1: '客服'}
10for i in docker_obj:
11        dict_temp = {}
12        dict_temp['id']=i.id
13        dict_temp['docker_ip'] = i.docker_ip
14        server_ip_obj = models.Server.objects.filter(id=i.phy_ip_id).first()
15        server_ip = server_ip_obj.server_ip
16        dict_temp['server_ip'] = server_ip
17        dict_temp['department'] = dep_info[i.department]
18        dict_temp['app_owner'] = i.app_owner
19        dict_temp['app_name'] = i.app_name
20        list_info.append(dict_temp)
21    # print(retu_dict)
22return HttpResponse(json.dumps(list_info))
后端代码，后端分页：
1 def cmdb_back_data(request):
2    list_info = []
3    limit_pag = ('limit', None)  # 页⾯的显⽰的数据条⽬。
4    offset_index = ('offset', None)  # 页⾯的显⽰索引。
5    docker_ip = ('docker_ip', None)  # 容器IP。
6    server_ip = ('server_ip', None)  # 物理机IP。
7    offset_index_session = ('offset_index')
8    docker_obj = models.Docker.objects.all()
9    dep_info = {0: '⼴告', 1: '客服'}
10for i in docker_obj:
11        dict_temp = {}
12        dict_temp['id']=i.id
13        dict_temp['docker_ip'] = i.docker_ip
14        server_ip_obj = models.Server.objects.filter(id=i.phy_ip_id).first()
15        server_ip = server_ip_obj.server_ip
16        dict_temp['server_ip'] = server_ip
17        dict_temp['department'] = dep_info[i.department]
18        dict_temp['app_owner'] = i.app_owner
19        dict_temp['app_name'] = i.app_name
20        list_info.append(dict_temp)
21        total = unt()
22        rows = list_info[int(offset_index):int(limit_pag) + int(offset_index)]
23        retu_dict = {'rows': rows, 'total': total}
24    # print(retu_dict)
25return HttpResponse(json.dumps(retu_dict))
效果：
js获取json的key和value
可以动态的查询，我们要搜索内容~！
注意：
分页分2种，默认情况是前端分页。前端分页需要后端传⼀个和前端字段定义⼀样的可迭代的列表。
前端分页可以实现动态查询排序，后端分页，不⽀持排序和动态查询。如果数据量不⼤的话，可以⽤前端分页。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。