项目场景:
关于django平台下实现bootstrap-table无刷新页面应用(Ajax):
页面内容:
分别引入
<link href="{% static 'css/bootstrap-table-master/bootstrap-table.min.css' %}" rel="stylesheet"><script src="{%
<script src="{% static 'js/bootstrap-table-master/bootstrap-table.min.js' %}"></script>
<dir style="padding: 0px;">
<table id="articles-table" data-toggle="table" class="table table-bordered"></table>
</dir>
ajax列表处理:
<script>
var token = $('input[name=csrfmiddlewaretoken]').val();
var $articlesTable = $('#articles-table').bootstrapTable('destroy').bootstrapTable({
url:'all/',
method: 'GET',
dataType: "json",
uniqueId: 'id',
striped: false,
cache: false,
sortName: 'id',
sortable: false,
sortOrder: 'desc',
sidePagination: "server",
undefinedText: '__',
singleSelect:false,
toolbar: '#soft-toolbar',
search: false,
strictSearch: true,
clickToSelect: true,
pagination: true,
pageNumber: 1,
pageSize: 5,
pageList: [5,10,20,50,100],
paginationPreText: "上一页",
paginationNextText: "下一页",
queryParamsType: "",
queryParams : function (params) {
var temp = {
'pageSize': params.pageSize,
'pageNumber': params.pageNumber,
'searchText': params.searchText,
'sortName': params.sortName,
'sortOrder': params.sortOrder
};
return temp;
},
columns:[
{
checkbox: true
},{
field: 'title',
title: '标题',
width: '200px'
},{
field:'content',
title:'内容',
width: '300px'
},{
field: 'create_time',
title: '创建时间',
width: '100px'
},{
title:'删除',
formatter: function (value,row, index) {
return '<button type="button" class="btn btn-primary btn-xs" onclick="deleteData(' + row.id + ')">删除</button>';
}
}
],
onLoadError: function () {
toastr.error("数据加载失败!","错误提示")
},
onClickRow: function (row, $element) {
// EditViewById(id,'view);
}
});
</script>
后台处理:
def index(request): return render(request, 'weus/index.html') def all(request): if request.method == 'GET' and request.GET: # 判断是get请求,并且get请求有值 pageSize = int(request.GET.get('pageSize')) pageNumber = int(request.GET.get('pageNumber')) searchText = request.GET.get('searchText') sortName = request.GET.get('sortName') sortOrder = request.GET.get('sortOrder') total = Article.objects.all().count() articles = Article.objects.order_by('-id')[(pageNumber - 1) * pageSize:(pageNumber) * pageSize] rows = [] data = {"total": total, "rows": rows} for article in articles: rows.append({'id': article.id, 'title': article.title, 'content': article.content}) return HttpResponse(json.dumps(data), content_type="application/json")