C'è un modo per ottenere aocolumn dal server modificabile modificabile?

Question

Quindi, sto cercando di creare una pagina generica per qualsiasi tabella richiesta dall'utente. Per questo sto cercando di recuperare tutti i dati dal server e di non avere nulla di codificato sul clientide.

$(document).ready(function(){ 

    /* Add/remove class to a row when clicked on */ 
    $('#table1 tr').on('click', function() { 
     $(this).toggleClass('row_selected'); 
    }); 


    var which_table=window.location.pathname; 
    var which_table_data=which_table.substring(0, which_table.length-1)+'/data'; 
    var table_name=which_table.substring(14, which_table.length-1); 
    $('#table1').dataTable({ 
      "bProcessing": true, 
      "bServerSide": true, 
      "bjQueryUI": true, 
      "sAjaxSource": which_table_data, 
      "bPaginate": true, 
      "sPaginationType": "full_numbers", 
      "bjQueryUI": true, 
      "sScrollX":"100%", 
      "aoColumnDefs": [{ 
       "targets" : [0], 
       "visible" : false, 
       "searchable" : false 
      }] 
    }).makeEditable({ 
     "sUpdateURL": "../update/" + table_name, 
     "sAddURL": "../add/" + table_name, 
     "sDeleteURL": "../delete/" + table_name, 
     "aoColumns": $.ajax({ 
         dataType: "json", 
         url: '/get_aoColumns', 
         data: function (table_name) { 
          return { 
           q: table_name 
          }; 
         }, 

         results: function (data) { 
          alert(data); 
         } 

        }); 

    }); 


}); 

Quindi, in questo pezzo sulla base del var which_table=window.location.pathname; cerco di ottenere i dati per la tabella corrispondente dal server in cui io sono riuscito. Ma ora voglio ottenere anche l'array aoColumns dal server. La mia domanda è: posso inviare i dati nella stessa richiesta insieme a aoData, secho e altri campi obbligatori. Penso che non possa rendere datatable correttamente dal momento che aoColumns non fa parte del json richiesto. Come ottengo l'aoColumns per qualsiasi tabella in modo che anche la convalida diventi lato server e non dovrò progettare una pagina per tabella.

Questa sotto parte doesnt lavoro come non so che è il modo corretto di farlo

"aoColumns": $.ajax({ 
         dataType: "json", 
         url: '/get_aoColumns', 

Edited: -

Ho provato @ approccio garryp`s ..

Questi sono i dati ricevo dal server

[{"cssclass": "required", "type": "textarea"}, {"sUpdateURL": "../update/my_table", "cssclass": "required", "type": "textarea", "loadtype": "POST", "submit": "OK"}, {"loadurl": "../data/", "sUpdateURL": "../update/my_table", "loadtype": "POST", "type": "select", "submit": "OK"}] 

Questo è il mio codice:

$(document).ready(function(){ 

    /* Add/remove class to a row when clicked on */ 
    $('#table1 tr').on('click', function() { 
     $(this).toggleClass('row_selected'); 
    }); 



    var which_table=window.location.pathname; 
    var which_table_data=which_table.substring(0, which_table.length-1)+'/data'; 
    var table_name=which_table.substring(14, which_table.length-1); 
    if(table_name.indexOf('Welog')> -1) { 
     $('#table1').dataTable({ 
      "bProcessing": true, 
      "bServerSide": true, 
      "bjQueryUI": true, 
      "sAjaxSource": which_table_data, 
      "bPaginate": true, 
      "sPaginationType": "full_numbers", 
      "bjQueryUI": true, 
      "sScrollX": "100%" 
      }); 
      $('#formAddNewRow').hide(); 


     } 
    else { 
     $.ajax({ 
      url: '../get_aodata/' + table_name, 
      async: false, 
      success: function (data) { 
       alert(data); 
       $('#table1').dataTable({ 
        "bProcessing": true, 
        "bServerSide": true, 
        "bjQueryUI": true, 
        "sAjaxSource": which_table_data, 
        "bPaginate": true, 
        "sPaginationType": "full_numbers", 
        "bjQueryUI": true, 
        "sScrollX": "100%", 
        "aoColumnDefs": [{ 
         "targets": [0], 
         "visible": false, 
         "searchable": false 
        }] 
       }).makeEditable({ 
        "sUpdateURL": "../update/" + table_name, 
        "sAddURL": "../add/" + table_name, 
        "sDeleteURL": "../delete/" + table_name, 
        "sAddDeleteToolbarSelector": "#table1_length", 
        "aoColumns" : data 

      /*"aoColumns" : [ 
         { 
          "cssclass": "required", 
          "type":"textarea" 
         }, 
         { 
          "cssclass": "required", 
          "type":"textarea", 
          "submit" : "OK", 
          "sUpdateURL": "../update/"+table_name, 
          "loadtype" : "POST" 
         }, 
         { 
          "loadurl" : "../data/", 
          "type" : "select", 
          "submit": "OK", 
          "sUpdateURL": "../update/"+table_name, 
          "loadtype" : "POST" 
         } 
        ]*/ 

       }); 
      } 
     }); 
    } 

}); 

Quindi, se vedete i aoColumns commentati nel presente codice è esattamente lo stesso come l'uscita ottenuto dal server, ma quello ottenuto dal server doesn t work and the one commented out if uncommented does work. The one got from the server if used using aoColumns : data just behaves the same way as if aoColumns parameter wasn t menzionato affatto nella funzione makeditable. Significa che i dati non raggiungono quel parametro. Coz Non ho errori nella console.

Soluzione: -

success : function(data){ 
    var data_str= JSON.parse(data); 
}); 

Ok. Ho dovuto convertire la stringa json in JSobject usando parse e infine ha funzionato.

Answer 1

Non funziona perché si sta assegnando il valore di ritorno di $.ajax(...)-aoColumns qui (quando effettivamente necessario essere l'assegnazione di una serie di colonne di "aoColumns"):

}).makeEditable({ 

    ... 

    "aoColumns": $.ajax({ 

Invece quello che ti serve fare è rendere PRIMA la chiamata AJAX. Quindi, all'interno della funzione jQuery success, il tuo datatable.

$.ajax({ 
    url: '/get_aoColumns', 
    ... 
    success : function(data) { 
     // ToDo: put all your datatable code in here. 
     // and assign `data` to "aoColumns" 

      /** data table code **/ 

     }).makeEditable({ 
     "aoColumns": data 

      /** rest of data table code **/ 
    } 

ho cercato di lasciare tutto, ma i bit importanti fuori per fare i punti chiave chiaro, ma questo dovrebbe aiutare a capire dove hai sbagliato.

ho creato un JS Fiddle qui con un esempio di codice (non testato) se questo non ha senso:

http://jsfiddle.net/GarryPas/got4fxhb/1/

Answer 2

assumendo /get_aoColumns sta tornando tutto correttamente, sembra che si desidera recuperare prima tali informazioni e quindi nel gestore di successo, creare il datatable.Nel tuo codice sopra, sembra che la dichiarazione dataTables possa finire prima che la richiesta ajax abbia una possibilità di completare, quindi a proposito di questo:

$(document).ready(function() { 
    /* Add/remove class to a row when clicked on */ 
    $('#table1 tr').on('click', function() { 
     $(this).toggleClass('row_selected'); 
    }); 
    var which_table = window.location.pathname; 
    var which_table_data = which_table.substring(0, which_table.length - 1) + '/data'; 
    var table_name = which_table.substring(14, which_table.length - 1); 

    //wrap the ajax request to get aoColumns outside of the initializaer 
    $.get('/get_aoColumns', {q: table_name}, function (aoColumns) { 
     $('#table1').dataTable({ 
      "bProcessing": true, 
      "bServerSide": true, 
      "bjQueryUI": true, 
      "sAjaxSource": which_table_data, 
      "bPaginate": true, 
      "sPaginationType": "full_numbers", 
      "sScrollX": "100%", 
      "aoColumnDefs": [{ 
        "targets": [0], 
        "visible": false, 
        "searchable": false 
       }] 
     }).makeEditable({ 
      "sUpdateURL": "../update/" + table_name, 
      "sAddURL": "../add/" + table_name, 
      "sDeleteURL": "../delete/" + table_name, 
      "aoColumns": aoColumns //the data retrieved from the request to get_aoColumns 
     }); 
    }); 
});