项目场景:
关于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")