Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

oj-table refresh data

BinJul 14 2020 — edited Aug 26 2020

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

}

};

Comments

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

1 - 4

Post Details

Added on Jul 14 2020
4 comments
1,625 views