Is there a way to get aocolumns from the server in datatable editable?

Question

So, I am trying to make one generic page for any table that is being requested by user. For that I am trying to fetch all data from server and not having anything hardcoded on the clientside.

 $(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);
                        }

                    });

    });


 });

So in this piece based on the var which_table=window.location.pathname; I try to get the data for the corresponding table from the server in which I am successful. But now I want to get even the aoColumns array from the server. My question is can I send the data in the same request along with the aoData, secho and other required fields. I think that may not render datatable properly since aoColumns in not a part of the required json. How do I get the aoColumns for any table so that even the validation becomes server side and I won`t have to design one page per table.

This below part doesnt work as I don`t know what is the correct way of doing it

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

EDITED :-

I tried @garryp`s approach ..

This is the data I get from the 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"}]

This is my code :

 $(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"
                         }
                     ]*/

                 });
             }
         });
     }

 });

So if you see the commented out aoColumns in this code is exactly the same as the output got from the server, but the one got from the server doesnt 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 wasnt mentioned at all in the makeditable function. Does that mean data is not reaching that parameter coz I don`t get any errors in the console.

Solution :-

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

Ok. I had to convert the json string to JSobject using parse and then it finally worked.

Answer 1

It doesn't work because you are assigning the return value of $.ajax(...) to aoColumns here (when you actually need to be assigning an array of columns to "aoColumns"):

}).makeEditable({

     ...

     "aoColumns": $.ajax({

Instead what you need to do is make the AJAX call FIRST. Then, inside the jQuery success function setup your 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 **/
    }

I have tried to leave all but the important bits out to make the key points clear, but this should help you understand where you have gone wrong.

I've set up a JS Fiddle here with an (untested) code sample if this doesn't make sense:

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