title: AngularJs datatable dynamic table change
body: <p>I am working on a project and i want to do some things which are new to me. I am new in AngularJS and newer in angular data tables.</p>
  
  <p>I got angular data table from <a href="http://l-lin.github.io/angular-datatables/#/welcome" rel="nofollow"><strong>here</strong></a> and is a little bit tricky for me because i don't really know how to use it. Examples are not very explanatory for me.</p>
  
  <p>What i want to do:</p>
  
  <ul>
  <li><p>i have a sigle page with some checkboxes on the left</p></li>
  <li><p>on the right i want a data table with data provided by server after user clicks on a checkbox</p></li>
  <li><p>data table must change dinamicaly because depends on the request i have other headers for data table. For example when user click on "role" objects returned have only 2 fields id and role, i want to render role column but not id. When user clicks on "users" data returned by server has multiple objects which have much more fields, for example : "accNonExp", "accNonLocked", "email", "username" and others.</p></li>
  </ul>
  
  <p>How can i do this ?</p>
  
  <p>here is my conde right now :</p>
  
  <p>js :</p>
  
  <pre><code>depo.controller('masterMainController', ['$scope', '$http', function ($scope, $http) {
      $scope.listOfTables = null;
      $scope.tableData = {};
  
      $scope.onClick = function(){
          $scope.tableData = getTableData($scope.valueSelected);
      };
  
      $http.post('/master/listOfTables').success(function (response) {
          $scope.listOfTables = response;
          console.log(response);
      });
  
      function getTableData(table) {
          $http.post('/master/tableData/' + table).success(function (response) {
              console.log(response);
              return response;
          });
      }
  
      $scope.dataTable = function(DTOptionsBuilder, DTColumnBuilder) {
          var vm = this;
          vm.dtOptions = DTOptionsBuilder.fromJson($scope.tableData)
              .withPaginationType('full_numbers');
  /*        vm.dtColumns = [
              DTColumnBuilder.newColumn('id').withTitle('ID'),
              DTColumnBuilder.newColumn('firstName').withTitle('First name'),
              DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
          ];*/
      }
  }]);
  </code></pre>
  
  <p>JSP:</p>
  
  <pre><code>&lt;%@ include file="/WEB-INF/views/includes/onlyForLoggedUsers.jsp" %&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Main Master&lt;/title&gt;
  &lt;/head&gt;
  &lt;script content="text/javascript" src="/res/custom_script/admin/masterMain.js"&gt;&lt;/script&gt;
  &lt;body ng-app="depo"&gt;
  &lt;div class="container-fluid" ng-controller="masterMainController"&gt;
      &lt;p class="logout_paragraph"&gt;Logged as &lt;strong&gt;${pageContext.request.userPrincipal.name}&lt;/strong&gt; | &lt;a
              id="logout_link" onclick="formSubmit()"&gt;Logout&lt;/a&gt;&lt;/p&gt;
  
      &lt;form action="/logout" method="post" id="logoutForm" style="display: none;"&gt;
          &lt;input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/&gt;
      &lt;/form&gt;
      &lt;div class="jumbotron"&gt;
          &lt;h2&gt;Welcome !&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div id="divChkListOfTables" class="admin_left_menu pre-scrollable col-md-2"&gt;
              &lt;div id="chkListOfTables" class="admin_tables_list radio"&gt;
                  &lt;h4&gt;Tables&lt;/h4&gt;
                  &lt;label ng-repeat="table in listOfTables.tables" class="admin_tables_list_chk_box"&gt;
                      &lt;input type="radio" name="chkTablesRadio" ng-model="$parent.valueSelected" ng-change="onClick()"
                             ng-value="table" class="radio-button"&gt; {{table}}
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="admin_data_table" class="col-md-10"&gt;
              &lt;table datatable="dataTable" dt-options="masterMainController.dtOptions" dt-columns="masterMainController.dtColumns" class="row-border hover"&gt;
  
              &lt;/table&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Spring RestController:</p>
  
  <pre><code>@RestController
  @RequestMapping(value = "/master")
  public class MasterMainRest {
  
      @Autowired
      UnitService unitService;
  
      @Autowired
      RoleService roleService;
  
      @Autowired
      UsersService usersService;
  
      @RequestMapping(value = "/listOfTables", method = RequestMethod.POST)
      public MasterTablesDTO getListOfTables(){
          List&lt;String&gt; tables = new ArrayList&lt;&gt;();
          tables.add("unit");
          tables.add("role");
          tables.add("users");
  
          MasterTablesDTO masterTablesDTO = new MasterTablesDTO();
          masterTablesDTO.setTables(tables);
  
          return masterTablesDTO;
      }
  
      @RequestMapping(value = "/tableData/{table}", method = RequestMethod.POST)
      public List getTablesData(@PathVariable String table){
          List list = null;
          switch (table){
              case "unit":
                  list = unitService.findAll();
                  break;
              case "role":
                  list = roleService.findAll();
                  break;
              case "users":
                  list = usersService.findAll();
                  break;
          }
          return list;
      }
  
  }
  </code></pre>
  
  <p>When i reach this page i gat this error :</p>
  
  <pre><code>TypeError: Cannot read property 'aDataSort' of undefined
      at U (jquery.dataTables.min.js:63)
      at xa (jquery.dataTables.min.js:67)
      at HTMLTableElement.&lt;anonymous&gt; (jquery.dataTables.min.js:91)
      at Function.n.extend.each (jquery-2.1.3.min.js:2)
      at n.fn.n.each (jquery-2.1.3.min.js:2)
      at m [as dataTable] (jquery.dataTables.min.js:83)
      at h.fn.DataTable (jquery.dataTables.min.js:159)
      at Object.g [as renderDataTableAndEmitEvent] (angular-datatables.min.js:6)
      at Object.h [as doRenderDataTable] (angular-datatables.min.js:6)
      at Object.d.render (angular-datatables.min.js:6)
  </code></pre>
  
  <p>Yes i know this error is beause $scope.tableData is empty, or this is what i read on some forums.
  How can i make first checkbox checked and $scope.tableData loaded with data acording to that checkbox checked ?</p>
  
  <p>Thank you in advance !</p>