Dynamic columns with angular datatables

Question

So I try to generate columns in datatables based on response from api request.

    $scope.getProductCustomFields = function() {
                    $scope.custom_fields_loading = true;
                    $scope.dtCustomFieldsInstance = {};
                    $scope.dtCustomFieldsOptions = DTOptionsBuilder.newOptions().withOption('order', []);
                    $scope.dtCustomFieldsOptions.withOption('ajax', {
                        headers: {'Authorization': 'Basic ' + $rootScope.globals.currentUser.api_token},
                        dataSrc: 'data',
                        url: API.returnUrl('/ecommerce/reports/get-product-custom-fields?' + $httpParamSerializer({product: $scope.product})),
                        type: 'GET'
                    })
                        .withOption('processing', true)
                        .withOption('serverSide', true)
                        .withPaginationType('full_numbers')
                        .withOption('createdRow', createdRow);



function createdRow(row, data, dataIndex) {
                    // Recompiling so we can bind Angular directive to the DT
                    $compile(angular.element(row).contents())($scope);
                }
                $scope.dtCustomFieldsColumns = [];
    //Here I make another request to php within this function since I cannot actually use dataSrc: 'data' as array            
     ProductsReportsService.getProductCustomFields($scope.product).then(function (response) {
                        $scope.data = response.data.data;
                        angular.forEach($scope.data, function (value, key) {
                            $scope.dtCustomFieldsColumns.push(DTColumnBuilder.newColumn('value.value').withTitle(key).notSortable());
                        });
                    });
                    $scope.custom_fields_loading = false;
                };

As you can see I make two requests, a ajax one whose data is not accessible and another one before which I have commented, that I use for my forEach.

data looks like this:

array:1 [
  "test drop down" => array:2 [
    0 => array:4 [
      "id" => 1
      "label" => "test drop down"
      "value" => "test1"
      "name" => "test drop down"
    ]
    1 => array:4 [
      "id" => 1
      "label" => "test drop down"
      "value" => "test2"
      "name" => "test drop down"
    ]
  ]

So to put it simple what I try to accomplish is table that basically looks like this:

<table>
  <thead>
     <tr>
        <th>test drop down</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>test1</td>
     </tr>
     <tr>
         <td>test2</td>
     </tr>
  </tbody>
</table>

Right now my table only has the headers right but I have no data in table body.

    <table>
      <thead>
         <tr>
            <th>test drop down</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td></td>
         </tr>
         <tr>
             <td></td>
         </tr>
      </tbody>
    </table>

Thank you for your time and help!

Combinig dynamic columns and serverside processing is quite impossible. You cannot have both. — davidkonrad
– davidkonrad, Commented Apr 28, 2017 at 4:11
So the only way for serverside processing is the classic one? With an exact number of columns who's number I already know? — Alphonse
– Alphonse, Commented Apr 28, 2017 at 8:06
This is how dataTables works, serverSide or not. You can with various techniques have dynamic columns, but they all involve re-initialisation. And this why serverSide along with dynamic columns would be impossible (or more correct ridiculous) since the dataTable should be generated over and over upon filtering, sorting, paging and so on. You could make one first load, render the DOM table and then initialise as serverSide...Or why not have a range of invisible columns you turn on and off, and give them dynamic header captions...? — davidkonrad
– davidkonrad, Commented Apr 28, 2017 at 8:15

user5968867 · Accepted Answer · 2017-04-28 01:07:47Z

0

Not sure is this is what you're looking for, but displaying a table like that from given data set (assuming it's saved in $scope.dtCustomFieldsColumns) would be something like this:

<tbody>
   <tr ng-repeat="column in dtCustomFieldsColumns.testdropdown">
      <td>{{column.value}}</td>
   </tr>
</tbody>

You should change test drop down key in your data set to something like testDropDown. That'll help you access columns directly. Good luck.

answered Apr 28, 2017 at 1:07

user5968867

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic columns with angular datatables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related