1
bootstrap-table 플러그인을 사용하여 내 json 데이터를 테이블에 렌더링하려고합니다. 데이터가 성공적으로로드되지만 플러그인은 데이터를 테이블로 렌더링하지 않으며 단지 No matching records found이라고합니다. the example I almost copy-pasted에 따라, 당신은로드하고 데이터를 렌더링하기 위해 어떤 방법을 사용할 필요가 없습니다 불구하고부트 스트랩 테이블은 JSON 데이터를 렌더링하지 않습니다 (성공적으로로드합니다)
나는이 문서의 예제 다음이었다, 당신은 단지 지정해야, load 및 refresh 같은 방법을 사용하려고했습니다 data-url 속성 (table 태그) 또는 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>
/books/all 반환이 같은 JSON 데이터 :
[{"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"},...]
내가 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;
};
load-success.bs.table 이벤트는 페이지 또는 타를 새로 고칠 때마다 데이터를받습니다. 블레어. responseHandle 함수도 실행되고 동일한 유효한 데이터를받습니다.
JSON 데이터 포맷은 유효하고 방금 /books/all 요청으로부터 응답을 복사하고 (다만 columns 속성 후) bootstrapTable 초기화 객체의 data 속성에 붙여 경우, 데이터는 일반적으로 표현된다.
내가 뭘 잘못하고 있는지 이해하고 그 문제를 해결할 수 있도록 도와 주시겠습니까?