2017-10-21 17 views
0

donc je travaille avec la pile MEAN (mongo, express, angulaire, noeud) et j'essaye de mettre une table avec le traitement côté serveur , J'ai réussi à charger les données correctement mais quand je recherche, changez la page ou une autre action l'URL qui est envoyée au serveur n'est pas la même que la première fois. J'ai ce contrôleur pour la table:Angular datable avec le traitement côté serveur Ajax URL pas bien formé après la première fois

.controller('ClientDatatableController', function($scope, $state, $filter, $compile, Client, popupService, DTOptionsBuilder, DTColumnBuilder){ 
    var vm = this; 

    vm.dtOptions = DTOptionsBuilder.newOptions() 
     .withOption('ajax', '/api/clients/') 
     .withDataProp('data') 
     .withOption('serverSide', true) 
     .withOption('processing', true) 
     .withOption('order', [0, 'desc']) 
     .withOption('stateSave', true) 
     .withPaginationType('full_numbers') 
     .withOption('createdRow', function(row) { 
      // Recompiling so we can bind Angular directive to the DT 
      $compile(angular.element(row).contents())($scope); 
     }) 
     .withColumnFilter({ 
     aoColumns: [{ 
      type: 'number' 
     }, { 
      type: 'text', 
      bRegex: true, 
      bSmart: true 
     }, { 
      type: 'number' 
     }, { 
      type: 'text', 
      bRegex: true, 
      bSmart: true 
     }, { 
      type: 'text', 
      bRegex: true, 
      bSmart: true 
     }] 
    }); 

    vm.dtColumns = [ 
     DTColumnBuilder.newColumn('numeroCliente').withOption('name','numeroCliente').withTitle('Número Cliente'), 
     DTColumnBuilder.newColumn('nome').withOption('name','nome').withTitle('Nome Cliente'), 
     DTColumnBuilder.newColumn('nif').withOption('name','nif').withTitle('NIF'), 
     DTColumnBuilder.newColumn('').withOption('name','morada.concelho').withTitle('Concelho').renderWith(function(data, type, full){ 
      var morada = full.morada; 
      if (morada.concelho) return morada.concelho; 
      else return ''; 
     }), 
     DTColumnBuilder.newColumn('').withOption('name','morada.localidade').withTitle('Localidade').renderWith(function(data, type, full){ 
      var morada = full.morada; 
      if (morada.localidade) return morada.localidade; 
      else return ''; 
     }), 
     DTColumnBuilder.newColumn('_id') 
         .withTitle('') 
         .withOption('sortable', false) 
         .withClass('button-column') 
         .renderWith(function(data, type){ 
      var href = $state.href("viewClient", {id: data}); 

      return '<a class="btn btn-default" href=' + href + '><span class="fa fa-search"></span></a>'; 
     }), 
     DTColumnBuilder.newColumn('_id') 
         .withTitle('Apagar') 
         .withOption('autoWidth', false) 
         .withOption('width','10%') 
         .withOption('sortable', false) 
         .renderWith(function(data, type){ 
          return '<a class="btn btn-danger btn-xs" ng-click="deleteClient(\'' + data + '\')">Delete</a>' 
         }) 
    ]; 

Je ne ai trouvé personne avec le même problème à ce jour, les requêtes GET sont les suivantes:

GET /api/clients/?draw=1&columns%5B0%5D%5Bdata%5D=numeroCliente&columns%5B0%5D%5Bname%5D=numeroCliente&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=nome&columns%5B1%5D%5Bname%5D=nome&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=nif&columns%5B2%5D%5Bname%5D=nif&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=&columns%5B3%5D%5Bname%5D=concelho&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=&columns%5B4%5D%5Bname%5D=localidade&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=_id&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=false&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B6%5D%5Bdata%5D=_id&columns%5B6%5D%5Bname%5D=&columns%5B6%5D%5Bsearchable%5D=true&columns%5B6%5D%5Borderable%5D=false&columns%5B6%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B6%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=desc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1508546310543 200 53.234 ms - 17452 
GET /?draw=2&columns=%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D&order=%5Bobject%20Object%5D&start=20&length=10&search=%5Bobject%20Object%5D&sRangeSeparator=~ 200 0.744 ms - 5926 

Comme vous pouvez le voir la deuxième demande de don N'ayez pas/api/clients avant, si quelqu'un peut m'aider je l'apprécierais vraiment.

Merci

Répondre

1

Eh bien je me suis dit que le problème était avec le plugin ColumnFilter, alors j'ai changé le type de demande POST et régler la fonction fnServerData:

.withFnServerData((sSource, aoData, fnCallback, oSettings) => { 
      $http.post('api/clients', { 
       tableData: { 
        draw: aoData[0].value, 
        columns: aoData[1].value, 
        order: aoData[2].value, 
        start: aoData[3].value, 
        length: aoData[4].value, 
        search: aoData[5].value 
       }      
      }).then((data) => {       
       fnCallback(data.data);       
      }); 
     })