bootstrap-table+Django: 服务端分页

最新推荐文章于 2023-03-24 21:33:32 发布

weixin_30323961

最新推荐文章于 2023-03-24 21:33:32 发布

阅读量898

点赞数

文章标签： python javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/gcgc/p/11249082.html

版权

分页方式：

bootstrap-table提供两种分页方式，client和server，即客户端和服务端分页；

特点：

　　client端分页：后台返回所有数据，前台翻页时不再请求后台。

　　server端分页：后台根据前台每次翻页时传递的参数，进行切片查询数据，每次只返回对应页面的数据。

弊端：

　　client端分页：

　　　　1、后台一次查询所有数据，对服务器造成压力交大；

　　　　2、当页面存在bootstrap-switch时，由于我是在bootstrap-table中的onLoadSuccess加载完表格后渲染switch开关，

　　　　　当使用client分页时，只进行了一次后台查询，也就是执行了一次onLoadSuccess函数，所以除了第一页开关按钮正常，其他页面都没有渲染出开关。

　　server端分页：

　　　　暂无

实现代码：

　　server端分页，前台代码：

<script type="text/javascript">

                    $('#mytab').bootstrapTable({
                        {#全部参数#}
                        //请求后台的URL（*）或者外部json文件，json内容若为json数组[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]，
                        //且键的名字必须与下方columns的field值一样，同时sidePagination需要设置为client或者直接注释掉，这样前台才能读取到数据，且分页正常。
                        //当json文件内容为json对象时：{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}，
                        //分页要写为server，但是server如果没有处理的话,会在第一页显示所有的数据，分页插件不会起作用
                        {#url: "{% static 'guchen_obj.json' %}",     #}

                        url:"/account/user_management_data",     //从后台获取数据时，可以是json数组，也可以是json对象
                        dataType: "json",
                        method: 'get',                      //请求方式（*）
                        toolbar: '#toolbar',                //工具按钮用哪个容器
                        striped: true,                      //是否显示行间隔色
                        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                        pagination: true,                   //是否显示分页（*）
                        sortable: true,                     //是否启用排序
                        sortOrder: "asc",                   //排序方式
                        {#queryParams: oTableInit.queryParams,//传递参数（*）#}
                        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）,数据为json数组时写client，json对象时（有total和rows时）这里要为server方式，写client列表无数据
                        pageNumber: 1,                       //初始化加载第一页，默认第一页
                        pageSize: 5,                       //每页的记录行数（*）
                        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                        {#search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大#}
                        strictSearch: true,
                        showColumns: true,                  //是否显示所有的列
                        showRefresh: true,                  //是否显示刷新按钮
                        minimumCountColumns: 2,             //最少允许的列数
                        clickToSelect: true,                //是否启用点击选中行
                        {#height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度#}
                        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                        showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                        cardView: false,                    //是否显示详细视图
                        detailView: false,                   //是否显示父子表
                        idField: 'project_name',          //指定主键
                        singleSelect: true,                //开启单选,想要获取被选中的行数据必须要有该参数

                        //得到查询的参数，会在url后面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651
                        queryParams: function (params) {
                            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                            var query_params = {
                                rows: params.limit,                         //页面大小
                                page: (params.offset / params.limit) + 1,   //页码
                                sort: params.sort,      //排序列名
                                sortOrder: params.order, //排位命令（desc，asc）

                                //查询框中的参数传递给后台
                                search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数
                            };
                            return query_params;
                        },

                        columns: [
                            {
                                checkbox:true  //第一列显示复选框
                             },

                            {
                                field: 'member_code',  //返回数据rows数组中的每个字典的键名与此处的field值要保持一致
                                title: '工号'
                            },
                            {
                                field: 'name',
                                title: '姓名'
                             },
                            {
                                field: 'role',
                                title: '角色'
                             },
                            {
                                field: 'create_time',
                                title: '创建时间'
                            },
                            {
                                field: 'status',
                                title: '状态',
                                formatter: user_status,
                            },
                            {
                                field: 'operate',
                                title: '操作',
                                width: 120,
                                align: 'center',
                                valign: 'middle',
                                formatter: actionFormatter,
                             },
                        ],

                        onLoadSuccess: function(data){
                             {#获取行数据的状态#}
                            console.log('渲染数据完成后，打印所有数据')
                            console.log(data);
                            {#获取所有列表数据#}
                            var data=$("#mytab").bootstrapTable("getData");
                            console.log('已获取全部数据%s',data);
                            {#根据每行数据的status值渲染开关#}
                            for (var i=0;i<data.length;i++){
                                console.log(data[i].project_id,data[i].status)
                                if (data[i].status == 1){
                                    console.log('这个是开启的')
                                    $("[id='project_status_switch_on']").bootstrapSwitch({
                                        onText: "启用",      // 设置ON文本  
                                        offText: "禁用",    // 设置OFF文本  
                                        onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary)  
                                        offColor: "danger",  // 设置OFF文本颜色 (info/success/warning/danger/primary)  
                                        size: "small",    // 设置控件大小,从小到大  (mini/small/normal/large)
                                        // 当开关状态改变时触发  
                                        onSwitchChange : function(event, state) {  
                                            console.log(state);
                                            {#获取该行的project_id#}
                                            var project_id = this.value;
                                            console.log(project_id);
                                            if (state == false) {
                                                status=1
                                                {#alert("ON");#}
                                                console.log(status);
                                                set_status(project_id, status);
                                            } else {
                                                status=0
                                                {#alert("OFF");#}
                                                set_status(project_id, status);
                                            }  
                                         }  
                                    })
                                }else{
                                    console.log('这个是禁用的')
                                    $("[id='project_status_switch_off']").bootstrapSwitch({
                                        onText: "启用",      // 设置ON文本  
                                        offText: "禁用",    // 设置OFF文本  
                                        onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary)  
                                        offColor: "danger",  // 设置OFF文本颜色 (info/success/warning/danger/primary)  
                                        size: "small",    // 设置控件大小,从小到大  (mini/small/normal/large)
                                        // 当开关状态改变时触发  
                                        onSwitchChange : function(event, state) {  
                                            console.log(state);
                                            {#获取该行的project_id#}
                                            var project_id = this.value;
                                            console.log(project_id);
                                            if (state == false) {
                                                status=1
                                                {#alert("ON");#}
                                                console.log(status);
                                                set_status(project_id, status);
                                            } else {
                                                status=0
                                                {#alert("OFF");#}
                                                set_status(project_id, status);
                                            }  
                                         }  
                                    })
                                }
                            }
                        }

                    });


                //操作栏的格式化,value代表当前单元格中的值，row代表当前行数据，index表示当前行的下标
                function actionFormatter(value, row, index) {
                    var id = index;
                    var data = JSON.stringify(row);
                    var result = "";
                    {#result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";#}
                    {#result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + JSON.stringify(row) + "','" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";#}
                    result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + row + "','" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                    {#result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"edit()\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";#}
                    {#result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";#}
                    return result;

                }

                {#状态栏格式化,根据该行数据的status的值控制checked属性是否选中#}
                function user_status(value, row, index) {
                    var data = JSON.stringify(row); //获取该行数据
                    var data_json = JSON.parse(data);
                    console.log(data_json);
                    console.log('格式化最先被执行')
                    {#for (var i=0;i<data_json.length;i++){#}
                    {#    console.log('第%s行的状态为%s',i,data_json.status);#}

                    if (data_json.status == 1) {
                        console.log('设置为开启')
                        return "<input value='"+data_json.project_id+"' type='checkbox' checked id='project_status_switch_on' name='mycheck'>";

                    } else {
                        console.log('设置为关闭')
                        return "<input value='"+data_json.project_id+"' type='checkbox'  id='project_status_switch_off' name='mycheck'>";
                    }
                }

                // 搜索查询按钮触发事件
                $(function() {
                    $("#search-button").click(function () {
                        $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
                        $('#search-keyword').val()
                    })
                })

                //重置搜索条件
                function clean(){
                    //先清空
                    $('#search-keyword').val('');
                    //清空后查询条件为空了，再次刷新页面，就是全部数据了
                    $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
                }

        </script>

server端分页，后台代码：

def user_management_data(request):
    """
    如果是get请求则只展示用户数据，
    post请求新增用户
    :param request:
    :return:
    """
    if request.method == 'GET':
        search_kw = request.GET.get('search_kw', None)
        print search_kw
        # 获取分页参数用于查询对应页面数据，page为第几页，num为每页数据条数,right_boundary为数据切片的右侧边界
        page = request.GET.get('page')
        num = request.GET.get('rows')
        right_boundary = int(page)*int(num)
        print page,num,int(page)*int(num)
        # 如果搜索关键字不为空，则根据此关键字模糊查询工号和姓名
        if search_kw:
           page_user = User.objects.filter(Q(member_code__contains=search_kw) | Q(name__contains=search_kw))[int(num)*(int(page)-1):right_boundary]
           # 获取查询结果的总条数
           total = User.objects.filter(Q(member_code__contains=search_kw) | Q(name__contains=search_kw)).count()
           print '查询结果总数为:%s' % total
        else:
            # 根据前台传来的分页信息，页码（page）和每页条数（rows）,计算分页后的user对象片段，例如前台传来第2页的参数，
            # rows=10，page=2，则服务端需要给前台返回[10:20]的数据片段，切片是左闭右开，所以最大只会取到下标为10到19，共10个数据
            page_user = User.objects.all()[int(num)*(int(page)-1):right_boundary]
            # server端分页时必须返回total和rows,total用于分页时显示总数
            total = User.objects.all().count()
        # rows为具体数据
        rows = []
        # 遍历查询出的user对象，将对应数据放到rows中
        for user in page_user:
            rows.append({'member_code': user.member_code, 'name': user.name, 'role': user.role_name.role_name, 'create_time': user.create_time, 'status': user.status})
        print rows
        # return render(request, 'account/user_management.html', {'rows': json.dumps(rows, cls=DateEncoder)})
        # 序列化数据，因为有datetime类型数据，所以使用自定义类DateEncoder序列化
        return HttpResponse(json.dumps({'total': total, 'rows': rows}, cls=DateEncoder))