oracle-jet

Creating a Dynamic ojTable Using OJET


I have a JSON data with n number of rows and n number of columns. I need to create a table out of it to display the results with pagination.Is there a possibility to create a ojtable with dynamic number of rows and columns from JSON?


Solution

  • The rows will be handled for you by the component based on the number of rows of data in the JSON file. If you want to limit the number of rows shown at the start, then set the The columns option for the ojTable can be passed an object which would dynamically set the columns that should be displayed.

    Something like this:

    <table data-bind="ojComponent: {component: 'ojTable', 
            data: pagingDatasource,
            columns: dynamicCols}">
    </table>
    
    self.getCols = function () {
      var url = getUrl();
      $.getJSON(url).then(function (data) {
        var tempCols = [];
        for (var property in data.items[0]) {
          if (data.items[0].hasOwnProperty(property)) {
            tempCols.push({headerText: property, field: property});
          }
        }
        self.dynamicCols(tempCols);
        self.pagingDatasource(new oj.PagingTableDataSource(new oj.ArrayTableDataSource(data.items, {idAttribute: 'empno'})));
    }
    

    Here is a jsFiddle that shows how to do it. You can (un)comment between the two URL's to see the different generated tables based on the JSON being returned by the REST endpoints. https://jsfiddle.net/peppertech/mdp0xjh3/