当前位置: 代码迷 >> 综合 >> django下bootstrap-table无刷新应用
  详细解决方案

django下bootstrap-table无刷新应用

热度:8   发布时间:2024-03-06 21:43:46.0

项目场景:

关于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")
  相关解决方案