This site is currently read-only as we are migrating to Oracle Forums for an improved community experience. You will not be able to initiate activity until January 31st, when you will be able to use this site as normal.

    Forum Stats

  • 3,890,795 Users
  • 2,269,776 Discussions
  • 7,916,827 Comments

Discussions

oj-table refresh data

Bin
Bin Member Posts: 3
edited Aug 26, 2020 10:03AM in Oracle JET

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

}

};

Tagged:
User_77VTN

Answers

  • John JB Brock-Oracle
    John JB Brock-Oracle Senior Manager of Product Management, Oracle JET Seattle, WA, USAPosts: 2,911 Employee
    edited Jul 22, 2020 7:36PM

    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
  • User_77VTN
    User_77VTN Member Posts: 5 Employee
    edited Aug 26, 2020 6:44AM

    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
    User_77VTN Member Posts: 5 Employee
    edited Aug 26, 2020 6:46AM

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

  • Philip Sommer
    Philip Sommer Member Posts: 121 Bronze Badge
    edited Aug 26, 2020 10:03AM

    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