django下bootstrap-table无刷新应用

项目场景:

关于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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值