I use the oj-table on my page. The first time I load data for the table, I got 68 data from the server, and all the data can be displayed in the table.
After that, whatever I refresh the table data, it only display 34 lines in the table. Actually, there are more than 34 data.
But if you click the table header to sort the data, all of data will be displayed.
The oj version I used is v8.1.0
codes:
HTML
<oj-table id='departmentTable' aria-label=''
data='[[departmentDataProvider]]'
columns='{{departmentColumnArray}}'
selection-mode='{"row": "multiple"}'
style='width: 100%;'>
</oj-table>
<script type="text/html" id="departmentTable_department_name">
<td>
<span data-bind="text: $context.row.departmentName"></span>
</td>
</script>
<script type="text/html" id="departmentTable_department_manager">
<td>
<span data-bind="text: $context.row.departmentManager"></span>
</td>
</script>
JS
var self = this;
self.departmentColumnArray = [
{ headerText: 'Department Name', field: 'departmentName', renderer: oj.KnockoutTemplateUtils.getRenderer('departmentTable_department_name', true)},
{ headerText: 'Department Manager', field: 'departmentManager', renderer: oj.KnockoutTemplateUtils.getRenderer('departmentTable_department_manager', true)}
];
self.departmentData = ko.observableArray();
self.departmentDataProvider = new oj.ArrayDataProvider(self.departmentData, { keyAttributes: 'departmentId' });
self.data = new Array();
self.firstLoadData = function(){
//all the data can be displayed in the table
for(let i = 1; i <= 68; i++){
self.data.push({
'departmentId': i,
'departmentName': 'Department' + i,
'departmentManager': 'Manager' + i
});
}
self.departmentData(self.data);
};
self.num = -1;
self.getDataFromServer = function(){
var responseData = {
'status': 'error'
};
if(data.length + self.num <= 0){
return responseData;
}
responseData.status = 'success';
responseData.dataArr = self.data.slice(0, self.num--);
return responseData;
};
self.refreshDepartment = function(){
//if the amount of data >= 34,then only the first 34 lines display in the table.
self.departmentData.removeAll();
var responseData = self.getDataFromServer();
if(responseData.status == 'success'){
self.departmentData(responseData.dataArr);
}
};