Jquery 引导表不呈现JSON数据(但成功加载)
我正在尝试使用插件在表中呈现json数据。数据加载成功,但是插件没有将数据呈现到表中,它只是说Jquery 引导表不呈现JSON数据(但成功加载),jquery,json,ajax,twitter-bootstrap,bootstrap-table,Jquery,Json,Ajax,Twitter Bootstrap,Bootstrap Table,我正在尝试使用插件在表中呈现json数据。数据加载成功,但是插件没有将数据呈现到表中,它只是说没有找到匹配的记录 我一直在遵循文档中的示例,尝试使用加载和刷新等方法,尽管根据,您不需要使用任何方法来加载和呈现数据,您只需在表标记中指定数据url属性,或者在js文件中的表对象上添加url属性。我尝试了两种变体,但似乎都不起作用 以下是我如何定义我的表: <h1>Table</h1> <div id="toolbar"> <button id="re
没有找到匹配的记录
我一直在遵循文档中的示例,尝试使用加载
和刷新
等方法,尽管根据,您不需要使用任何方法来加载和呈现数据,您只需在表
标记中指定数据url
属性,或者在js文件中的表对象上添加url
属性。我尝试了两种变体,但似乎都不起作用
以下是我如何定义我的表:
<h1>Table</h1>
<div id="toolbar">
<button id="remove" class="btn btn-danger" disabled="">
<i class="glyphicon glyphicon-remove"></i>
Delete
</button>
</div>
<table
id="table"
data-url="/books/all"
data-toolbar="#toolbar"
data-search="true"
data-sortable="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-show-export="true"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false"
data-side-pagination="server"
data-response-handler="responseHandler">
</table>
我在js中定义我的列:
let $table = $('#table'),
$remove = $('#remove'),
selections = [];
const initTable = () => {
$table.bootstrapTable({
url: '/books/all',
height: getHeight(),
columns: [
[
{
field: 'state',
checkbox: true,
rowspan: 2,
align: 'center',
valign: 'middle'
}, {
title: 'Book ID',
field: 'id',
rowspan: 2,
align: 'center',
valign: 'middle',
sortable: true,
footerFormatter: totalTextFormatter
}, {
title: 'Book Detail',
colspan: 3,
align: 'center'
}
],
[
{
field: 'name',
title: 'Book Name',
sortable: true,
editable: true,
align: 'center',
footerFormatter: totalNameFormatter
}, {
field: 'price',
title: 'Book Price',
sortable: true,
align: 'center',
editable: {
type: 'text',
title: 'Book Price',
validate(value) {
value = $.trim(value);
if (!value) {
return 'This field is required';
}
if (!/^\$/.test(value)) {
return 'This field needs to start with $';
}
const data = $table.bootstrapTable('getData'),
index = $(this).parents('tr').data('index');
console.log(data[index]);
return '';
}
},
footerFormatter: totalPriceFormatter
}, {
field: 'operate',
title: 'Book Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
]
]
});
setTimeout(() => {
$table.bootstrapTable('resetView');
}, 200);
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table',
() => {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
selections = getIdSelections();
});
$table.on('expand-row.bs.table', (e, index, row, $detail) => {
if (index % 2 == 1) {
$detail.html('Loading from ajax request...');
$.get('LICENSE', res => {
$detail.html(res.replace(/\n/g, '<br>'));
});
}
});
$table.on('all.bs.table', (e, name, args) => {
console.log(name, args);
});
$remove.click(() => {
const ids = getIdSelections();
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
$remove.prop('disabled', true);
});
$(window).resize(() => {
$table.bootstrapTable('resetView', {
height: getHeight()
});
});
};
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), row => row.id)
}
function responseHandler(res) {
$.each(res.rows, (i, row) => {
row.state = $.inArray(row.id, selections) !== -1;
});
return res;
};
let$table=$(“#table”),
$remove=$(“#remove”),
选择=[];
常量initTable=()=>{
$table.bootstrapTable({
url:“/books/all”,
高度:getHeight(),
栏目:[
[
{
字段:'状态',
复选框:正确,
行跨度:2,
对齐:'居中',
valign:“中间”
}, {
标题:“图书ID”,
字段:“id”,
行跨度:2,
对齐:'居中',
valign:'中间',
可排序:是的,
footerFormatter:totalTextFormatter
}, {
标题:“书籍细节”,
科尔斯潘:3,
对齐:“居中”
}
],
[
{
字段:“名称”,
书名:'书名',
可排序:是的,
是的,
对齐:'居中',
footerFormatter:totalNameFormatter
}, {
字段:'价格',
标题:"书价",,
可排序:是的,
对齐:'居中',
可编辑:{
键入:“文本”,
标题:"书价",,
验证(值){
值=$.trim(值);
如果(!值){
返回“此字段为必填字段”;
}
如果(!/^\$/.测试(值)){
返回“此字段需要以$开头”;
}
const data=$table.bootstrapTable('getData'),
index=$(this.parents('tr')。data('index');
console.log(数据[索引]);
返回“”;
}
},
footerFormatter:totalPriceFormatter
}, {
字段:“操作”,
标题:"图书经营",,
对齐:'居中',
事件:操作事件,
格式化程序:运算符格式化程序
}
]
]
});
设置超时(()=>{
$table.bootstrapTable('resetView');
}, 200);
$table.on('check.bs.table uncheck.bs.table'+
'选中所有.bs.table取消选中所有.bs.table',
() => {
$remove.prop('disabled',!$table.bootstrapTable('getSelections').length);
selections=getidsrelections();
});
$table.on('expand-row.bs.table',(e,index,row,$detail)=>{
如果(索引%2==1){
$detail.html('从ajax请求加载…');
$.get('LICENSE',res=>{
$detail.html(res.replace(/\n/g,
);
});
}
});
$table.on('all.bs.table',(e,name,args)=>{
console.log(名称,args);
});
$remove。单击(()=>{
const id=getids();
$table.bootstrapTable('remove'{
字段:“id”,
值:ids
});
$remove.prop('disabled',true);
});
$(窗口)。调整大小(()=>{
$table.bootstrapTable('resetView'{
高度:getHeight()
});
});
};
函数getIdSelections(){
return$.map($table.bootstrapTable('getSelections'),row=>row.id)
}
功能响应管理器(res){
$。每行(第(i)行)=>{
row.state=$.inArray(row.id,选项)!=-1;
});
返回res;
};
每次我刷新页面或表格时,load success.bs.table
事件都会接收数据。responseHandle
函数也会被激发并接收相同的有效数据
JSON数据格式是有效的,如果我只是从/books/all
请求复制响应并将其粘贴到bootstrapTable初始化对象中的数据
属性(就在列
属性之后),数据将正常呈现
你能帮我理解我做错了什么并解决这个问题吗?我想你只是在JSON中缺少了额外的信息,它指定了行数,并将实际数据包含在rows对象中,比如:
{
"total": 2,
"rows": [
{
"id":42
"name":"whatever",
"description":"whatever"
"cover_img":"https://whatever.jpg"
"available_count":10,
"price":6.99,
"author_id":21,
"publisher_id":5,
"author_first_name":"Harper",
"author_last_name":"Lee",
"author_birthday":"1926-04-27T22:00:00.000Z",
"publisher_name":"Penguin Fiction"
},
...]
}
我认为JSON中缺少了其他信息,其中指定了行数,并将实际数据封装在rows对象中,如:
{
"total": 2,
"rows": [
{
"id":42
"name":"whatever",
"description":"whatever"
"cover_img":"https://whatever.jpg"
"available_count":10,
"price":6.99,
"author_id":21,
"publisher_id":5,
"author_first_name":"Harper",
"author_last_name":"Lee",
"author_birthday":"1926-04-27T22:00:00.000Z",
"publisher_name":"Penguin Fiction"
},
...]
}