Bootstrap "sidePagination" Test
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>
<h3>Bootstrap "sidePagination" Test</h3>
<p>
<a href="javascript:myInit(true)">sidePagination==true (BROKEN)</a>
| <a href="javascript:myInit(false)">sidePagination==false (WORKS)</a>
</p>
<ol>
<li>When the "sidePagination" option is specified, the REST call works (see console) but no rows are displayed.</li>
<li>Whtn the "sidePagination" option is omitted the REST call works and the table is correctly displayed.</li>
</ol>
<div class="container">
<div class="row">
<table id="wp-table"></table>
</div>
</div>
JavaScript
var url = "https://api.myjson.com/bins/1tako";
var table = $('#wp-table');
queryParams = function (params) {
params.skip = params.offset;
delete params.offset;
delete params.order;
delete params.search;
console.log("queryParams: " + JSON.stringify(params));
return params;
};
var options = {
//url: 'https://api.myjson.com/bins/1tako',
pagination: true,
pageList: [5, 10, 20, 50, 100, 200],
//sidePagination: 'server',
search: true,
queryParams: queryParams,
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'reference',
title: 'Reference'
}, {
field: 'name',
title: 'Name'
}, {
field: 'pm',
title: 'Project Manager'
}, {
field: 'client',
title: 'Client'
}]
};
myInit = function(broken) {
if (broken) {
options.url = 'https://api.myjson.com/bins/4cmds';
options.sidePagination = 'server';
} else {
options.url = 'https://api.myjson.com/bins/4vwts';
delete options.sidePagination;
}
table.bootstrapTable('destroy');
table.bootstrapTable(options);
};
table.on('load-success.bs.table', function (data, data2) {
console.log("load-success.bs.table: " + JSON.stringify(data2));
});