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' 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: '操作', 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' 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),