基于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小时内删除。
发表评论