Currently, the whole table is loaded into the client's browser using an Ajax call:
JS side (issues-detail.js):
var tabToggleLink = $('a[data-toggle="tab"]');
tabToggleLink.on('show.bs.tab', function (e) {
var activeTab = $(e.target).attr('href');
if (activeTab === (id + 'Content') && dataTable.data().length === 0) {
view.getTableModel(id, function (t) {
(function ($) {
var table = $(id).DataTable();
table.rows.add(t.responseObject().data).draw()
})(jQuery);
});
}
});
Java side (IssuesDetail):
/**
* Returns the UI model for the specified table.
*
* @param id
* the ID of the table
*
* @return the UI model as JSON
*/
@JavaScriptMethod
@SuppressWarnings("unused") public JSONObject getTableModel(final String id) {
List<List<String>> rows;
if ("#issues".equals(id)) {
rows = getIssuesModel().getContent(getIssues());
}
else {
rows = getScmModel().getContent(getIssues());
}
return toJsonArray(rows);
}
Pagination is currently only available on the client side:
var dataTable = table.DataTable({
language: {
emptyTable: "Loading - please wait ..."
},
pagingType: 'numbers', order: [[1, 'asc']],
columnDefs: [{
targets: 0, orderable: false
}]
});
For a larger number of issues it would make sense to replace this part of the code with a server side pagination:
- Client rather requests the content of the selected page
- Server returns a page of the current results (staring at the given position, using a given page size)