[英]Bootstrap - My table can't read a local JSON file
I don't know, I can't read some JSON file ou put a table which read JSON data (internal or external source)我不知道,我无法读取一些 JSON 文件 ou 放置一个读取 JSON 数据的表(内部或外部源)
Does someone have an idea?有人有想法吗?
Here are my link and script I used这是我使用的链接和脚本
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
Here is my script where I create the table, I use data-URL to load the data from a local JSON file这是我创建表的脚本,我使用 data-URL 从本地 JSON 文件加载数据
<table id="table" data-toggle="table" data-height="460" data-search="true" data-url="data.json">
<thead>
<tr>
<th data-field="id">#</th>
<th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
<th data-field="type" data-formatter="nameFormatter">Type</th>
<th data-field="artist" data-formatter="nameFormatter">Artiste</th>
<th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
</tr>
</thead>
</table>
<script>
$table.bootstrapTable('refresh',{data: data})
})
function nameFormatter(value) {
return 'Formatted ' + value
}
var $table = $('#table')
$(function() {
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$table.bootstrapTable({data: data})
})
</script>
I really don't know why it doesn't work...我真的不知道为什么它不起作用......
thanks in advance提前致谢
If you want to load a local json file, try like below.如果要加载本地 json 文件,请尝试如下。
function nameFormatter(value) {
return 'Formatted ' + value
}
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$("#table").bootstrapTable({data: data})
And remove data attribute data-url="data.json"
from the table.并从表中删除数据属性
data-url="data.json"
。
You can run the snippet below to see the results.您可以运行下面的代码片段来查看结果。
function nameFormatter(value) { return 'Formatted ' + value } var data = [ {"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"} ] $("#table").bootstrapTable({data: data})
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <.-- Latest compiled and minified JavaScript --> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap:min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table:min.css"> <script src="https.//unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script> <table id="table" data-toggle="table" data-height="460" data-search="true"> <thead> <tr> <th data-field="id">#</th> <th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th> <th data-field="type" data-formatter="nameFormatter">Type</th> <th data-field="artist" data-formatter="nameFormatter">Artiste</th> <th data-field="sheet" data-formatter="nameFormatter">Fiche</th> </tr> </thead> </table>
If you want to load from an external source, your function should contain only the formatter function.如果你想从外部源加载,你的 function 应该只包含格式化程序 function。
Try the snippet below to see the results.试试下面的代码片段来查看结果。
function nameFormatter(value) { return 'Formatted ' + value }
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <.-- Latest compiled and minified JavaScript --> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap:min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table:min.css"> <script src="https.//unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table:min.js"></script> <table id="table" data-toggle="table" data-height="460" data-search="true" data-url="https.//api.myjson.com/bins/q9n5g"> <thead> <tr> <th data-field="id">#</th> <th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th> <th data-field="type" data-formatter="nameFormatter">Type</th> <th data-field="artist" data-formatter="nameFormatter">Artiste</th> <th data-field="sheet" data-formatter="nameFormatter">Fiche</th> </tr> </thead> </table>
Remove the data-toggle attribute if you are not loading data from external json file.如果您不从外部 json 文件加载数据,请删除data-toggle属性。
It seems any calls to $('#table').bootstrapTable() are completely ignored when data-toggle is enabled and data is not rendered.当启用数据切换并且未呈现数据时,似乎完全忽略了对 $('#table').bootstrapTable() 的任何调用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.