基于bootstrap的分页以及表格的动态搜索

一、需求：有时候我们需要做数据的展示，通过表格的方式展示。这里涉及到数据的展示、搜索。

二、组件：

我们使用bootstrap的table插件来完成我们的需求。分页、搜索。

官方地址：

Bootstrap中文网：http://www.bootcss.com/       

Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html

Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table

Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/

Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/

三、使用。

1、导入js

<script src="/static/js/jquery-2.1.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/plugins/fast-click/fastclick.min.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table.min.js"></script>

2、html代码：

                    <div class="panel">
{#                        <div class="panel-heading">#}
{#                            <h3 class="panel-title">服务器信息展示</h3>#}
{#                        </div>#}
                        <div class="panel-body">
                            <table data-toggle="table"
                                   data-url="/cmdb_back_data/"
                                   data-search="true"
                                   data-data-type="json"
                                   data-show-refresh="true"
                                   data-show-toggle="true"
                                   data-show-columns="true"
                                   data-sort-name="id"
                                   data-page-list="[10, 15, 20]"
                                   data-page-size="10"
                                   data-pagination="true" data-show-pagination-switch="true">
                                <thead>
                                    <tr>
                                        <th data-field="id" data-sortable="true" data-formatter="invoiceFormatter">ID</th>
                                        <th data-field="docker_ip" data-sortable="true">容器IP</th>
                                        <th data-field="server_ip" data-sortable="true" data-formatter="dateFormatter">服务器IP</th>
                                        <th data-field="department" data-align="center" data-sortable="true" data-sorter="priceSorter">所属部门</th>
                                        <th data-field="app_name" data-align="center" data-sortable="true" data-formatter="statusFormatter">所属应用</th>
                                        <th data-field="app_owner" data-align="center" data-sortable="true" data-formatter="trackFormatter">应用负责人</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <!--===================================================-->

 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 字段名字。

• data-side-pagination="server" 分页是在客户端还是服务端。默认是'client'在客户端。

   需要注意的是：我们分页一般都在服务器端进行分页！！！！ 不要在客户端分页，如果数据量较大的话，浏览器加载耗时较长！

• 更多请看：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

四、后端需要传过来一个json串，以key:value形式以data-field为key。

后端代码，前端分页代码：

def cmdb_back_data(request):
    list_info = []
    limit_pag = request.GET.get('limit', None)  # 页面的显示的数据条目。
    offset_index = request.GET.get('offset', None)  # 页面的显示索引。
    docker_ip = request.GET.get('docker_ip', None)  # 容器IP。
    server_ip = request.GET.get('server_ip', None)  # 物理机IP。
    offset_index_session = request.session.get('offset_index')
    docker_obj = models.Docker.objects.all()
    dep_info = {0: '广告', 1: '客服'}
    for i in docker_obj:
        dict_temp = {}
        dict_temp['id']=i.id
        dict_temp['docker_ip'] = i.docker_ip
        server_ip_obj = models.Server.objects.filter(id=i.phy_ip_id).first()
        server_ip = server_ip_obj.server_ip
        dict_temp['server_ip'] = server_ip
        dict_temp['department'] = dep_info[i.department]
        dict_temp['app_owner'] = i.app_owner
        dict_temp['app_name'] = i.app_name
        list_info.append(dict_temp)
    # print(retu_dict)
    return HttpResponse(json.dumps(list_info))

 后端代码，后端分页：

def cmdb_back_data(request):
    list_info = []
    limit_pag = request.GET.get('limit', None)  # 页面的显示的数据条目。
    offset_index = request.GET.get('offset', None)  # 页面的显示索引。
    docker_ip = request.GET.get('docker_ip', None)  # 容器IP。
    server_ip = request.GET.get('server_ip', None)  # 物理机IP。
    offset_index_session = request.session.get('offset_index')
    docker_obj = models.Docker.objects.all()
    dep_info = {0: '广告', 1: '客服'}
    for i in docker_obj:
        dict_temp = {}
        dict_temp['id']=i.id
        dict_temp['docker_ip'] = i.docker_ip
        server_ip_obj = models.Server.objects.filter(id=i.phy_ip_id).first()
        server_ip = server_ip_obj.server_ip
        dict_temp['server_ip'] = server_ip
        dict_temp['department'] = dep_info[i.department]
        dict_temp['app_owner'] = i.app_owner
        dict_temp['app_name'] = i.app_name
        list_info.append(dict_temp)
        total = docker_obj.count()
        rows = list_info[int(offset_index):int(limit_pag) + int(offset_index)]
        retu_dict = {'rows': rows, 'total': total}
    # print(retu_dict)
    return HttpResponse(json.dumps(retu_dict))

 

效果：

可以动态的查询，我们要搜索内容~！

 注意：

• 分页分2种，默认情况是前端分页。前端分页需要后端传一个和前端字段定义一样的可迭代的列表。
• 前端分页可以实现动态查询 排序，后端分页，不支持排序和动态查询。如果数据量不大的话，可以用前端分页。