oj-table refresh data

Bin

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);

}

};

John JB Brock-Oracle

The only thing I can think of to look at first would be if the keyAttributes value that you have set in your DataProvider is truly a uniqueId and you do not have duplicates in your dataset.

User_77VTN

I have faced similar issue and the suggestion solved. I was using a column 'code' as id Attribute where in reality it is not unique between rows. So changed the idAttribute to 'id' instead of 'code'.(Note: 'id' is not a column. It just took its own ref). Then the data got auto refreshed as soon as the observable is changed.

----------------------------------------------------------------------------------------- JS code -----------------------------------------

self.testArr = ko.observableArray();

//self.testDS = new PagingDataProviderView(new ArrayDataProvider(self.testArr, { idAttribute: 'code' }));  ===> REFRESH NOT WORKING

self.testDS = new PagingDataProviderView(new ArrayDataProvider(self.testArr, { idAttribute: 'id' })); //// REFRESH WORKING

self.testCols = ko.observable();

self.testCols([{

        "headerText": "code",

        "field": "code",

        "id": "test_code"

      },

      {

        "headerText": "amount",

        "field": "amnt",

        "id": "test_amnt"

      }

      ]);

var dir1 ={ "code":"c1","amnt":100 };

self.testArr.push(dir1);

var dir2 ={ "code":"c1","amnt":20 };

self.testArr.push(dir2);

-----------table------------------------------------------------------------------------------------------------------------------

<oj-table aria-label="Test Table" id="test-details-table" data='[[testDS]]'

                        selection-mode='{"row": "single", "column": "multiple"}' columns='[[testCols]]'

                        columns-default='{"sortable": "disabled" }' row-renderer="[[testTableRowRenderer]]"

                        scroll-policy='loadMoreOnScroll' class="width100">

                        <oj-paging-control class="lastTab" id="test_paging" data='[[testDS]]'

                            page-options='{"type":"Number"}' page-size='5' slot='bottom'>

                        </oj-paging-control>

                    </oj-table>

------------------------------------------------------------------------------------------------------------------------------------

User_77VTN

Check by changing keyAttributes --> from 'departmentId' ti 'id'

Philip Sommer

For completeness sake, let me make the following remarks:

1. idAttribute is deprecated and you should use keyAttributes instead
2. Specifying a non-existent field name as 1066874 recommends is not offically supported. Instead, you can simply not specify any keyAttributes, in which case the DataProvider will default to using the array index (which is guaranteed to be unique of course).

Source: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/ArrayDataProvider.html#constructor-section