django下bootstrap-table无刷新应用

it2024-10-05  35

项目场景:

关于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")
最新回复(0)