I controlli di impaginazione non vengono visualizzati in ng-table durante il recupero dei dati dal backend

Question

Sto recuperando un elenco di dati dal back-end e visualizzandolo utilizzando ng-table. Il problema è che non mostra i controlli di impaginazione. In precedenza, quando ho usato i dati fittizi per mostrare la tabella ng, l'impaginazione funzionava perfettamente. Qualcuno potrebbe aiutarmi qui?

Questo è il mio HTML:

<table ng-table="tableParams" show-filter="true" class="table"> 
      <thead> 
        <tr> 
          <th ng-repeat="column in columns" ng-show="column.visible" 
            class="text-center" ng-class="{ 
            'sort-asc': tableParams.isSortBy(column.field, 'asc'), 
            'sort-desc': tableParams.isSortBy(column.field, 'desc'), 
            'sortable': !$first 
            }" 
            ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')"> 
            <div>{{column.title}}</div> 
          </th> 
        </tr> 

      </thead> 
      <tr ng-repeat="user in data | filter:searchText"> 

        <td width="30" style="text-align: left"> 
          <input type="checkbox" ng-model="checkboxes.items[user.id]" /> 
        </td> 

        <td data-title="'Email Id'" class="text-center" sortable="email" ng-show="columns[1].visible"> 
          <span>{{user.email}}</span> 
        </td> 
        <td data-title="'User Karma'" class="text-center" sortable="userkarma" ng-show="columns[2].visible"> 
          <span>{{user.userkarma}}</span> 
        </td> 
        <td data-title="'Date Joined'" class="text-center" sortable="datejoined" ng-show="columns[3].visible"> 
          <span>{{user.datejoined}}</span> 
        </td> 
        <td data-title="'Unsubscribed'" class="text-center" sortable="status" ng-show="columns[4].visible"> 
          <span>{{user.unsubscribed}}</span> 
        </td> 
      </tr> 
     </table> 

Qui di seguito è il mio file js:

for (var i = 0; i < UserList.getUsers() 
      .length; i++) { 
      $scope.data.push({ 
       id: UserList.getUsers()[i]._id, 
       email: UserList.getUsers()[i].email, 
       userkarma: UserList.getUsers()[i].healthScore, 
       datejoined: moment(UserList.getUsers()[i].firstSessionAt) 
        .format("MMMM Do YYYY"), 
       unsubscribed: UserList.getUsers()[i].unsubscribed 
      }) 
     }; 
     $scope.columns = [{ 
       title: '', 
       field: 'checkbox', 
       visible: true 
      }, 
      { 
       title: 'Email', 
       field: 'email', 
       visible: true 
      }, { 
       title: 'User Karma', 
       field: 'userkarma', 
       visible: true 
      }, { 
       title: 'Date Joined', 
       field: 'datejoined', 
       visible: true 
      }, { 
       title: 'Unsubscribed', 
       field: 'unsubscribed', 
       visible: true 
      } 
     ]; 

     $scope.tableParams = new ngTableParams({ 
      page: 1, 
       count: 10, // count per page 
       filter: { 
        name: 'M' // initial filter 
       }, 
       sorting: { 
        name: 'asc' 
       } 
      }, { 
       total: $scope.data.length, // length of data 
       getData: function ($defer, params) { 
        // use build-in angular filter 
        var filteredData = params.filter() ? 
         $filter('filter')($scope.data, params 
          .filter()) : 
         data; 
        var orderedData = params.sorting() ? 
         $filter('orderBy')($scope.data, 
          params.orderBy()) : 
         $scope.data; 
        params.total(orderedData.length); // set total for recalc paginationemail 

        $defer.resolve(orderedData.slice((
          params.page() - 
          1) * params.count(), 
         params.page() * 
         params.count())); 
       } 
      }); 

Answer 1

Ciò accade perché la solita $scope.tableParams.reload() funzione utilizzata per aggiornare i dati dopo un carico di dati asincrono non aggiorna il conteggio totale elemento nella tabella. Non è mai successo prima, perché questo valore è impostato correttamente all'inizio quando si utilizzavano dati fittizi.

È necessario aggiungere una params.total(data.length); la funzione getData per aggiornare manualmente il valore.

Answer 2

ho trovato la risposta. In realtà c'è un problema con ng-table quando si caricano dati dinamici. Quando i dati vengono caricati in modo dinamico, la funzione getData non viene chiamata. Quindi questo è quello che ho fatto. Ho creato una funzione refreshTable per chiamare la funzione setTable che chiama quindi la funzione getData e rende la tabella.

$scope.refreshTable = function() { 
      console.log('\n\n refreshing table') 
      $scope['tableParams'] = { 
       reload: function() {}, 
       settings: function() { 
        return {} 
       } 
      }; 
      $timeout(setTable, 100) 
     }; 
     $scope.refreshTable(); 

     function setTable(arguments) { 

      $scope.tableParams = new ngTableParams({ 
       page: 1, // show first page 
       count: 10, // count per page 
       filter: { 
        name: '' // initial filter 
       }, 
       sorting: { 
        name: 'asc' 
       } 
      }, { 
       filterSwitch: true, 
       total: $scope.users.length, // length of data 
       getData: function ($defer, params) { 
        console.log(
         '\n\nngTable getData called now') 
        var orderedData = params.sorting() ? 
         $filter('orderBy')($scope.users, 
          params.orderBy()) : 
         data; 
        params.total(orderedData.length); 
        $defer.resolve(orderedData.slice((params.page() - 
          1) * params.count(), params.page() * 
         params.count())); 
       } 
      }); 
     } 

Answer 3

Per me, è perché stavo usando coffeescript, che restituisce automaticamente il valore dell'ultima cosa nella tua funzione. Ciò causa problemi perché getData() di ng-table ottiene una promessa e, se non ne ottiene uno, ne crea uno da $ defer. Usando coffeescript e convertendo in modo non corretto l'esempio dallo Configuring your table with ngTableParams wiki page, restituivo qualcosa che non era una promessa.

In CoffeeScript, assicurarsi che il callback per getData() termina con uno

$defer.promise 

o

return 

in modo che ng-tavolo ottiene una promessa, o sa fare uno per sé.

Answer 4

Ho avuto questo problema e applicato soluzione fornita qui, ma non risolto il mio utilizzo problem.My era come di seguito

<table ng-table="tableParams" class="table ng-table table-striped" show-filter="{{::showFilter}}"> 
 
     <tr ng-show="showHeaders"> 
 
      <th class="th-select" ng-repeat="column in columns">{{column.title}}</th> 
 
     </tr> 
 
     <tr ng-repeat="row in $data"> 
 
      <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field" ng-click="save(row)"> 
 
       {{row[column.field][column.subfield] || row[column.field]}} 
 
       <span compile="column.getValue()" ></span> 
 
      </td> 
 
     </tr> 
 
    </table>

e dopo un tentativo giorno ho capito che il problema sta usando css class "ng-table". Ho detto questo per salvare il vostro tempo in modo diverso l'aggiunta

params.total (data.length)

si dovrebbe verificare il css troppo e il codice di lavoro è:

<table ng-table="tableParams" class="table table-striped" show-filter="{{::showFilter}}"> 
 
     <tr ng-show="showHeaders"> 
 
      <th class="th-select" ng-repeat="column in columns">{{column.title}}</th> 
 
     </tr> 
 
     <tr ng-repeat="row in $data"> 
 
      <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field" ng-click="save(row)"> 
 
       {{row[column.field][column.subfield] || row[column.field]}} 
 
       <span compile="column.getValue()" ></span> 
 
      </td> 
 
     </tr> 
 
    </table>