django:bootstrap table加载django返回的数据

 bootstrap table加载表格数据有两类方式:

一种通过data属性的方式配置,一种是javascipt方式配置

这里看js配置方式:

  1、当数据源为.json文件时

    url参数写上json文件的地址就行,但是json文件格式必须为json格式(2种):

    a:一种为json数组格式 [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}],同时sidePagination 需要为client或者直接注释掉该参数,只有这样前台的分页插件才能正常工作;

      但是不能为server,否则前台提示:没有找到匹配的记录

[  
        {  
            "id": 0,  
            "name": "Item 0",  
            "price": "$0"  
        },  
        {  
            "id": 1,  
            "name": "Item 1",  
            "price": "$1"  
        }  
    ]  

    b:另一种为json对象格式,必须要有total和rows两个key,{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]},

且键的名字必须与下方columns的field值一样,才能读取到数据,同时 sidePagination 参数必须要为server,但是如果后台没有处理的话,前台会在第一页显示全部数据,为client时,前台会提示:没有找到匹配的记录。

{
    "total": 2,
    "rows": [
        {
            "id": 0,
            "name": "Item 0",
            "price": "$0"
        },
        {
            "id": 1,
            "name": "Item 1",
            "price": "$1"
        }
    ]
}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
 <head>
        <meta charset="UTF-8" />
        <title>项目列表</title>

        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

 </head>

    <body>
        <table id="mytab" class="table table-hover"></table>
    </body>

        <script>
          var aaa = JSON.parse('{{ datalist|safe }}');
            alert(aaa);
        </script>

        <script type="text/javascript">

            {#var Datalist ='{{ datalist|safe }}'; // 获取后台传来的数据需要加上safe过滤#}
            {#datalist= [[93,93,0,100.0],[20,23,26,29]]#}
            var aaa = JSON.parse('{{ datalist|safe }}');
            alert(aaa);


                    $('#mytab').bootstrapTable({
                        {#全部参数#}
                        url: "{% static 'guchen_array.json' %}",         //请求后台的URL(*)或者外部json文件,json内容为json数组[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]
                                                                        //且键的名字必须与下方columns的field值一样,同时sidePagination需要设置为client或者直接注释掉,这样前台才能读取到数据,且分页正常。
                                           //当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' %}",#}
              
dataType: "json", method: 'get', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: true, //是否启用排序 sortOrder: "asc", //排序方式 {#queryParams: oTableInit.queryParams,//传递参数(*)#} sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) 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: true, //是否显示父子表 columns: [ { field: 'id', title: '项目名' }, { field: 'name', title: '数据库表名' }, { field: 'price', title: '总数' }, { field: 'operate', title: '操作', 120, align: 'center', valign: 'middle', formatter: actionFormatter, }, ],//操作栏的格式化 function actionFormatter(value, row, index) { var id = value; var result = ""; result += "<a href='javascript:;' class='btn btn-xs green' onclick="EditViewById('" + id + "', view='view')" title='查看'><span class='glyphicon glyphicon-search'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs blue' onclick="EditViewById('" + id + "')" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs red' onclick="DeleteByIds('" + id + "')" title='删除'><span class='glyphicon glyphicon-remove'></span></a>"; return result; } </script> </html>

页面展示如下:

 下一步将外部json文件修改为使用django后台传递的数据。

   2、当数据源为django后台返回时

  改动只有url参数变了。

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
 <head>
        <meta charset="UTF-8" />
        <title>项目列表</title>

        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

 </head>

    <body>
        <table id="mytab" class="table table-hover"></table>
    </body>

{#        <script>#}
          {#var aaa = JSON.parse('{{ datalist|safe }}');#}
{#          aaa = {{ datalist|safe }}#}
{#            alert(aaa[0]);#}
{#        </script>#}

        <script type="text/javascript">

            {#var Datalist ='{{ datalist|safe }}'; // 获取后台传来的数据需要加上safe过滤#}
            {#datalist= [[93,93,0,100.0],[20,23,26,29]]#}
            var aaa = JSON.parse('{{ datalist|safe }}');
            alert(aaa);


                    $('#mytab').bootstrapTable({
                        {#全部参数#}
                        {#url: "{% static 'guchen1.json' %}",         //请求后台的URL(*)或者外部json文件,json内容必须为json数组[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]#}
                        {#                                                //且键的名字必须与下方columns的field值一样,才能读取到数据#}
                        url:"http://127.0.0.1:8000/getdata",
                        dataType: "json",
                        method: 'get',                      //请求方式(*)
                        toolbar: '#toolbar',                //工具按钮用哪个容器
                        striped: true,                      //是否显示行间隔色
                        cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                        pagination: true,                   //是否显示分页(*)
                        sortable: true,                     //是否启用排序
                        sortOrder: "asc",                   //排序方式
                        {#queryParams: oTableInit.queryParams,//传递参数(*)#}
                        sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                        pageNumber: 1,                       //初始化加载第一页,默认第一页
                        pageSize: 10,                       //每页的记录行数(*)
                        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: true,                   //是否显示父子表

                        columns: [
                            {
                                field: 'id',        //返回数据rows数组中的每个字典的键名与此处的field值要保持一致
                                title: '项目名'
                            },
                            {
                                field: 'name',
                                title: '数据库表名'
                            },
                            {
                                field: 'price',
                                title: '总数'
                            },
                            {
                                field: 'operate',
                                title: '操作',
                                 120,
                                align: 'center',
                                valign: 'middle',
                                formatter: actionFormatter,
                             },

                        ],

                    });


                //操作栏的格式化
                function actionFormatter(value, row, index) {
                    var id = value;
                    var result = "";
                    result += "<a href='javascript:;' class='btn btn-xs green' onclick="EditViewById('" + id + "', view='view')" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
                    result += "<a href='javascript:;' class='btn btn-xs blue' onclick="EditViewById('" + id + "')" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                    result += "<a href='javascript:;' class='btn btn-xs red' onclick="DeleteByIds('" + id + "')" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
                    return result;
                }
        </script>


</html>

这里要注意的是django后台的返回必须是json,且必须要有total和rows两个key,同样rows中的键名需要与columns中的fileds值一样

def getdata(request):
    datalist = {
        "total": 3,
        "rows": [{
            "id": 1,
            "name": "mdm",
            "price": 200
        }]
    }
    return HttpResponse(json.dumps(datalist))

注意:这里加载表格页面用的是/bootstrapTable这个url,获取表格数据用的是getdata这个视图

url(r'^bootstrapTable/',views.bootstrapTable),
url(r'^getdata/',views.getdata),

 参考:https://www.jianshu.com/p/b5ca011a0d9c

【推广】 免费学中医,健康全家人
原文地址:https://www.cnblogs.com/gcgc/p/11136889.html