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: '操作',width: 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' οnclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + id + "')\" 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;}</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: '操作',width: 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' οnclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + id + "')\" 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;}</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

django：bootstrap table加载django返回的数据相关推荐

第三节：微信小程序模拟动态加载服务器返回json数据
上一节虽然完成了新闻的静态展示页面,但是实际开发中,数据通常是请求服务器返回的json数据,这时候就需要页面动态加载显示服务器返回的数据. 在完成的静态页面的代码上,需要做相应的修改,首先需要编写po ...
28 Java类的加载机制、什么是类的加载、类的生命周期、加载：查找并加载类的二进制数据、连接、初始化、类加载器、双亲委派模型、自定义类加载器
28Java类的加载机制 28.1.什么是类的加载 28.2.类的生命周期 28.2.1.加载:查找并加载类的二进制数据 28.2.2.连接 28.2.3.初始化 28.3.类加载器 28.4.类的加 ...
jsonStore加载远程和本地数据实例
以前一直是用jsonstore加载远程数据,最近要做combox加载webservice返回的本地数据,进了误区弄了好久,不过把store研究了下,自己做个记录方便以后使用,也给遇到同样问题的同学做个 ...
Ext JS - Combobox 加载下拉框数据级联下拉框
Combobox 加载下拉框数据点击下拉框,数据从后台加载,是很常见的需求.如下图: View 中下拉框 dockedItems : [ {dock : 'top',xtype : 'toolbar ...
Recyclerview删除数据后无法加载下一页数据（或者是漏了一条数据）
使用场景:项目中用到了"订单列表"界面,会有个删除订单的功能,点击删除之后,之前一页的10个数据会变成9个,然后加载更多就触发不了(也可能会少一条数据) 分析:触发不了是我的rec ...
前端 JS 如何在一个页面中局部加载其它页面的数据
一个页面很大,可以分成多个部分,先把小部分的 jsp 写好之后,再在主页面中通过 Struts 2 标签或 ajax 请求来引入其它的 jsp 显示信息. 通过 jQuery 函数来加载其它页面的数据 ...
【前端】【cornerstone】cornerstone.js如何编辑图像/加载已有图像数据（以画直线为例）
[前端][cornerstone]cornerstone.js如何编辑图像/加载已有图像数据(以画直线为例) 首次加载图像加载已有图像部分参考博客:<cornerstone.js 使用总结& ...
R语言读取（加载）txt格式数据为dataframe、可视化绘制温度直方图、自定义设置坐标轴名称字体大小
R语言读取(加载)txt格式数据为dataframe.可视化绘制温度直方图.自定义设置坐标轴名称字体大小目录 R语言读取(加载)txt格式数据为dataframe.可视化绘制温度直方图.自定义设置坐 ...
java mina json_jsonStore加载远程和本地数据实例
以前一直是用jsonstore加载远程数据,最近要做combox加载webservice返回的本地数据,进了误区弄了好久,不过把store研究了下,自己做个记录方便以后使用,也给遇到同样问题的同学做个 ...

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

django：bootstrap table加载django返回的数据相关推荐

最新文章

热门文章