分页方式：
bootstrap-table提供两种分页方式，client和server，即客户端和服务端分页；
特点：
client端分页：后台返回所有数据，前台翻页时不再请求后台。
server端分页：后台根据前台每次翻页时传递的参数，进行切片查询数据，每次只返回对应页面的数据。
弊端：
client端分页：
1、后台一次查询所有数据，对服务器造成压力交大；
2、当页面存在bootstrap-switch时，由于我是在bootstrap-table中的onLoadSuccess加载完表格后渲染switch开关，
当使用client分页时，只进行了一次后台查询，也就是执行了一次onLoadSuccess函数，所以除了第一页开关按钮正常，其他页面都没有渲染出开关。
server端分页：
暂无
实现代码：
server端分页，前台代码：
<script type="text/javascript"> $('#mytab').bootstrapTable({ {#全部参数#} //请求后台的URL（*）或者外部json文件，json内容若为json数组[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]， //且键的名字必须与下方columns的field值一样，同时sidePagination需要设置为client或者直接注释掉，这样前台才能读取到数据，且分页正常。 //当json文件内容为json对象时：{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}， //分页要写为server，但是server如果没有处理的话,会在第一页显示所有的数据，分页插件不会起作用 {#url: "{% static 'guchen_obj.json' %}", #} url:"/account/user_management_data", //从后台获取数据时，可以是json数组，也可以是json对象 dataType: "json", method: 'get', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: true, //是否启用排序 sortOrder: "asc", //排序方式 {#queryParams: oTableInit.queryParams,//传递参数（*）#} sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）,数据为json数组时写client，json对象时（有total和rows时）这里要为server方式，写client列表无数据 pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 5, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） {#search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大#} strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 {#height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度#} uniqueId: "ID", //每一行的唯一标识，一般为主键列 showToggle: false, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 idField: 'project_name', //指定主键 singleSelect: true, //开启单选,想要获取被选中的行数据必须要有该参数 //得到查询的参数，会在url后面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651 queryParams: function (params) { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 var query_params = { rows: params.limit, //页面大小 page: (params.offset / params.limit) + 1, //页码 sort: params.sort, //排序列名 sortOrder: params.order, //排位命令（desc，asc） //查询框中的参数传递给后台 search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数 }; return query_params; }, columns: [ { checkbox:true //第一列显示复选框 }, { field: 'member_code', //返回数据rows数组中的每个字典的键名与此处的field值要保持一致 title: '工号' }, { field: 'name', title: '姓名' }, { field: 'role', title: '角色' }, { field: 'create_time', title: '创建时间' }, { field: 'status', title: '状态', formatter: user_status, }, { field: 'operate', title: '操作', 120, align: 'center', valign: 'middle', formatter: actionFormatter, }, ], onLoadSuccess: function(data){ {#获取行数据的状态#} console.log('渲染数据完成后，打印所有数据') console.log(data); {#获取所有列表数据#} var data=$("#mytab").bootstrapTable("getData"); console.log('已获取全部数据%s',data); {#根据每行数据的status值渲染开关#} for (var i=0;i<data.length;i++){ console.log(data[i].project_id,data[i].status) if (data[i].status == 1){ console.log('这个是开启的') $("[id='project_status_switch_on']").bootstrapSwitch({ onText: "启用", // 设置ON文本 offText: "禁用", // 设置OFF文本 onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary) offColor: "danger", // 设置OFF文本颜色 (info/success/warning/danger/primary) size: "small", // 设置控件大小,从小到大 (mini/small/normal/large) // 当开关状态改变时触发 onSwitchChange : function(event, state) { console.log(state); {#获取该行的project_id#} var project_id = this.value; console.log(project_id); if (state == false) { status=1 {#alert("ON");#} console.log(status); set_status(project_id, status); } else { status=0 {#alert("OFF");#} set_status(project_id, status); } } }) }else{ console.log('这个是禁用的') $("[id='project_status_switch_off']").bootstrapSwitch({ onText: "启用", // 设置ON文本 offText: "禁用", // 设置OFF文本 onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary) offColor: "danger", // 设置OFF文本颜色 (info/success/warning/danger/primary) size: "small", // 设置控件大小,从小到大 (mini/small/normal/large) // 当开关状态改变时触发 onSwitchChange : function(event, state) { console.log(state); {#获取该行的project_id#} var project_id = this.value; console.log(project_id); if (state == false) { status=1 {#alert("ON");#} console.log(status); set_status(project_id, status); } else { status=0 {#alert("OFF");#} set_status(project_id, status); } } }) } } } }); //操作栏的格式化,value代表当前单元格中的值，row代表当前行数据，index表示当前行的下标 function actionFormatter(value, row, index) { var id = index; var data = JSON.stringify(row); var result = ""; {#result += "<a href='javascript:;' class='btn btn-xs green' onclick="EditViewById('" + id + "', view='view')" title='查看'><span class='glyphicon glyphicon-search'></span></a>";#} {#result += "<a href='javascript:;' class='btn btn-xs blue' onclick="EditViewById('" + JSON.stringify(row) + "','" + id + "')" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";#} result += "<a href='javascript:;' class='btn btn-xs blue' onclick="EditViewById('" + row + "','" + id + "')" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>"; {#result += "<a href='javascript:;' class='btn btn-xs blue' onclick="edit()" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";#} {#result += "<a href='javascript:;' class='btn btn-xs red' onclick="DeleteByIds('" + id + "')" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";#} return result; } {#状态栏格式化,根据该行数据的status的值控制checked属性是否选中#} function user_status(value, row, index) { var data = JSON.stringify(row); //获取该行数据 var data_json = JSON.parse(data); console.log(data_json); console.log('格式化最先被执行') {#for (var i=0;i<data_json.length;i++){#} {# console.log('第%s行的状态为%s',i,data_json.status);#} if (data_json.status == 1) { console.log('设置为开启') return "<input value='"+data_json.project_id+"' type='checkbox' checked id='project_status_switch_on' name='mycheck'>"; } else { console.log('设置为关闭') return "<input value='"+data_json.project_id+"' type='checkbox' id='project_status_switch_off' name='mycheck'>"; } } // 搜索查询按钮触发事件 $(function() { $("#search-button").click(function () { $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！ $('#search-keyword').val() }) }) //重置搜索条件 function clean(){ //先清空 $('#search-keyword').val(''); //清空后查询条件为空了，再次刷新页面，就是全部数据了 $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！ } </script>
server端分页，后台代码：
def user_management_data(request): """ 如果是get请求则只展示用户数据， post请求新增用户 :param request: :return: """ if request.method == 'GET': search_kw = request.GET.get('search_kw', None) print search_kw # 获取分页参数用于查询对应页面数据，page为第几页，num为每页数据条数,right_boundary为数据切片的右侧边界 page = request.GET.get('page') num = request.GET.get('rows') right_boundary = int(page)*int(num) print page,num,int(page)*int(num) # 如果搜索关键字不为空，则根据此关键字模糊查询工号和姓名 if search_kw: page_user = User.objects.filter(Q(member_code__contains=search_kw) | Q(name__contains=search_kw))[int(num)*(int(page)-1):right_boundary] # 获取查询结果的总条数 total = User.objects.filter(Q(member_code__contains=search_kw) | Q(name__contains=search_kw)).count() print '查询结果总数为:%s' % total else: # 根据前台传来的分页信息，页码（page）和每页条数（rows）,计算分页后的user对象片段，例如前台传来第2页的参数， # rows=10，page=2，则服务端需要给前台返回[10:20]的数据片段，切片是左闭右开，所以最大只会取到下标为10到19，共10个数据 page_user = User.objects.all()[int(num)*(int(page)-1):right_boundary] # server端分页时必须返回total和rows,total用于分页时显示总数 total = User.objects.all().count() # rows为具体数据 rows = [] # 遍历查询出的user对象，将对应数据放到rows中 for user in page_user: rows.append({'member_code': user.member_code, 'name': user.name, 'role': user.role_name.role_name, 'create_time': user.create_time, 'status': user.status}) print rows # return render(request, 'account/user_management.html', {'rows': json.dumps(rows, cls=DateEncoder)}) # 序列化数据，因为有datetime类型数据，所以使用自定义类DateEncoder序列化 return HttpResponse(json.dumps({'total': total, 'rows': rows}, cls=DateEncoder))