Bootstrap Table通过data-url及data-ajax后台分页
张鹏鹍
使用data-url 后台分页
- 前台代码
<!-- Page Content -->
<div class="col-sm-10" id="content">
{% csrf_token %}
<title>Re-install</title>
<div style="height: 50px">
<div class="alert_message alert alert-danger" style="display: none">
<strong></strong>
</div>
</div>
<div class="toolbar">
</div>
<table
id="table"
data-url="/" //后台url地址
data-toggle="table"
data-silent-sort="false"//是否排序
data-height="800"//table固定高度
data-pagination="true"//是否分页
data-search="true"//是否有搜索框
data-show-search-button="true"//是否显示搜索按键
data-side-pagination="server"//指定分页方式为后台分页，必须和data-url或者data-ajax配合使用
data-page-size="20"//初始每页数据条数
data-page-list="[10, 20, 50, 100, 200]"
data-method="post"//请求方式
class="table text-nowrap">
<!-- data-url="/managements/reinstall/" -->
<thead>
<tr>
<th data-field="id" data-sortable="true">Id</th>
<th data-field="restore_code" data-sortable="true">Restore Code</th>
<th data-field="agent_id" data-sortable="true">Agent Id</th>
<th data-field="limited_at" data-sortable="true">Expiry Date</th>
<th data-field="is_sent" data-sortable="true">Completed</th>
<th data-field="sent_at" data-sortable="true">Completed Date</th>
<th data-field="created_at" data-sortable="true">Created Time</th>
<th data-field="deleted"
data-formatter="operateFormatter"
data-events="operateEvents">
Deleted
</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<input hidden id="del_id">
<h5 class="modal-title" id="exampleModalLabel">Delete Warning</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="del_url" onclick="del()" class="btn btn-primary" data-dismiss="modal">
Delete
</button>
</div>
</div>
</div>
</div>
- 后台代码
使用的是Django来做的后台处理
def post(self, request, *args, **kwargs):
pagination = request.GET.get('pagination')
result = {}
if pagination == 'server':
request_data = json.loads(request.body.decode())
offset = int(request_data['offset'])//起始位置
limit = int(request_data['limit'])//获取的数据条数
search = request_data['search']//搜索条件
order_by = '-id'//排序规则
if 'sort' in request_data.keys():
order_by = request_data['sort']
if request_data['order'] == 'desc':
order_by = '-' + order_by
restore_list = Restore.objects.order_by(order_by)[offset:offset+limit]
count = Restore.objects.all().count()
restore_result = []
for restore in restore_list:
limited_at = restore.limited_at
sent_at = restore.sent_at
is_sent = restore.is_sent
data = {
'id': restore.id,
'restore_code': restore.restore_code,
'agent_id': restore.agent_id,
'limited_at': limited_at.strftime("%Y-%m-%d %H:%M:%S") if limited_at else '',
'is_sent': 'Yes' if is_sent else '',
'sent_at': sent_at.strftime("%Y-%m-%d %H:%M:%S") if sent_at else '',
'created_at': restore.created_at.strftime("%Y-%m-%d %H:%M:%S"),
}
if search != '':
for value in data.values():
if value and search in str(value):
restore_result.append(data)
count = len(restore_result)
else:
restore_result.append(data)
result = {//返回json的格式，这两个key是固定的
"total": count,//总的数据量
"rows": restore_result//当前页的数据列表
}
return JsonResponse(result)
使用data-ajax后台分页
- 前台代码
<table id="table"
data-toolbar="#toolbar"
data-height="800"
data-search="true"
data-sortable="true"
data-pagination="true"
data-ajax="ajaxRequest"//调用的ajax请求方法名
data-side-pagination="server"
data-show-extended-pagination="true">
<thead>
<tr>
<th data-field="0" data-sortable="true" data-switchable="false">M-id</th>
<th data-field="1" data-sortable="true" data-switchable="false">O-id</th>
<th data-field="2" data-sortable="true" data-switchable="false">name</th>
<th data-field="3" data-sortable="true">serial_number</th>
<th data-field="4" data-sortable="true">gender</th>
<th data-field="5" data-sortable="true">birthday</th>
</tr>
</thead>
</table>
<script>
function ajaxRequest(params) {
var offset = params.data.offset;//请求数据起始位置
var limit = params.data.limit;//请求的数据量
var search = params.data.search;
const list = {
"select_country": $("#select_country").val().toString(),
"select_region": $("#select_region").val().toString(),
"select_status": $("#select_status").val().toString(),
"offset": offset,
"limit": limit,
"search": search,
};
// ajaxでデータを読み取る
$.ajax({
type: "POST",
contentType: "application/json;charset=UTF-8",
url: "/",
data: JSON.stringify(list),
success: function (data) {
params.success({ //注意，必须返回参数 params
total: data.total,
rows: data.rows
});
},
error: function (e) {
console.log(e.status);
console.log(e.responseText);
}
});
}
//这个方法绑定了一个search按钮，当查询条件变更时，重新刷新一下table
$("#search_button").click(function () {
$("#table").bootstrapTable('refresh');
});
</script>
- 后台代码
与data-url请求方式相同
类似资料：