赞
踩
bootstrap 提供了table表格插件,可以快速帮我们实现分页功能。这样就不用在前端页面上写分页逻辑,只需关注后端给对应数据就行。
bootstrap-table提供两种分页方式,client和server,即客户端和服务端分页;
下载所需要的包
Bootstrap 中文网:http://www.bootcss.com/
Bootstrap Table 官网:https://bootstrap-table.com/
JQuery 官网:https://jquery.com/
放置static文件中,目录结构如下
模板中头部引用
# 作者-上海悠悠 QQ交流群:717225969 # blog地址 https://www.cnblogs.com/yoyoketang/ <head> {% load static %} <title>bootstrap-table</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="/static/bootstarp/css/bootstrap.min.css" > <link rel="stylesheet" type="text/css" href="/static/bootstrap-table/dist/bootstrap-table.min.css" > <script type="text/javascript" src="/static/bootstarp/jquery/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="/static/bootstarp/js/bootstrap.min.js"></script> <script type="text/javascript" src="/static/bootstrap-table/dist/bootstrap-table.min.js"></script> <script type="text/javascript" src="/static/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script> </head>
script 中bootstrapTable 几个摘要参数
url: 访问数据的接口,需返回json对象,如:{“total”: 2,“rows”: [{“id”: 0,“name”: “Item 0”,“price”: “$0”},]
columns: table表格中显示的字段和名称
queryParams:查询的时候,提交查询参数
<body> <div class="container"> <h1>bootstrapTable实例</h1> <hr/> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <table id="table" class="table table-striped"></table> </div> </body> <script> var url = '/teacher/info'; var columns = [ { checkbox: true, visible: true //是否显示复选框 }, { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, { field: 'tel', title: '电话' } ]; $("#table").bootstrapTable({ toolbar: '#toolbar', //自定义工具按钮 url: url, //请求后台的URL(*) method: 'get', //请求方式(*) cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) pageSize: 10, //每页的记录行数(*) pageList: [10, 20, 50, 100, 'All'], //可供选择的每页的行数(*) sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 //search: true, //是否显示表格搜索 showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 //height: 500, //行高,如果没有设置height属性,表格自动根据记录条数决定表格高度 showToggle: true, //是否显示详细视图和列表视图的切换按钮 columns: columns, //列参数 //detailView: true, //是否显示父子表 //得到查询的参数,会在url后面拼接,如:?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651 queryParams: function (params) { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 var query_params = { page: (params.offset / params.limit) + 1, //页码 size: params.limit, //页面大小 //查询框中的参数传递给后台 //search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数 }; return query_params; }, }); //得到查询的参数 </script> </html>
查询结果必须是json格式:{“total”: 2,“rows”: [{},{}]},其中total和rows名称必须保持一致,前端才能加载到数据
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage from django.db.models import Q from django.forms.models import model_to_dict # 作者-上海悠悠 QQ交流群:717225969 # blog地址 https://www.cnblogs.com/yoyoketang/ def teacherpage(request): return render(request, 'boot_table.html') def teacherInfo(request): """ 查询结果必须是json格式:{"total": 2,"rows": [{},{}]} """ if request.method == "GET": # search_kw = request.GET.get('search_kw', None) # 获取分页参数用于查询对应页面数据,page为第几页,size为每页数据条数 page_num = request.GET.get('page', 1) size = request.GET.get('size', 10) # 查询全部 teachers = Teacher.objects.all() # 使用分页器返回查询的页数和size paginator = Paginator(teachers, per_page=size) page_object = paginator.page(page_num) # 总数 total = teachers.count() # 查询list of dict rows = [model_to_dict(i) for i in page_object] # print(rows) return JsonResponse({'total': total, 'rows': rows})
默认每页查询10条数据
可以修改每页显示的条数
queryParams查询对应的参数
toolbar 对应table表格上的新增/修改/删除
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
此部分后端接口还没实现
参考教程:https://www.cnblogs.com/landeanfen/p/4976838.html
bootstrap-table官方文档:https://examples.bootstrap-table.com/
bootstrap-table API在线查看效果:https://live.bootstrap-table.com/
bootstrap table 方法 详细教程: https://www.itxst.com/bootstrap-table-methods/tutorial.html
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。