Подтвердить что ты не робот

Есть ли способ получить столбцы с сервера в datatable editable?

Итак, я пытаюсь создать одну общую страницу для любой таблицы, запрашиваемой пользователем. Для этого я пытаюсь извлечь все данные с сервера и не иметь ничего жестко закодированного на стороне клиента.

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

                    });

    });


 });

Итак, в этом фрагменте, основанном на var which_table=window.location.pathname;, я пытаюсь получить данные для соответствующей таблицы с сервера, на котором я успешно. Но теперь я хочу получить даже массив aoColumns с сервера. Мой вопрос: могу ли я отправить данные в одном запросе вместе с полями aoData, secho и другими обязательными полями. Я думаю, что это может не отображаться правильно, поскольку aoColumns не является частью требуемого json. Как получить aoColumns для любой таблицы, чтобы даже проверка стала серверной, и мне не придется составлять одну страницу за таблицу.

Эта часть ниже не работает, так как я не знаю, как правильно это сделать

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

EDITED: -

Я попробовал подход @garryp`.

Это данные, которые я получаю с сервера

[{"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"}]

Это мой код:

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

                 });
             }
         });
     }

 });

Итак, если вы видите, что пропущенные aoColumns в этом коде точно такие же, как вывод, полученный с сервера, но тот, который получен от сервера, не имеет значения t 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 в функции makeditable. Означает ли это, что данные не достигают этого параметра, я не получаю никаких ошибок в консоли.

Решение: -

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

Ok. Мне пришлось преобразовать строку json в JSobject, используя синтаксический анализ, и затем он наконец-то сработал.

4b9b3361

Ответ 1

Это не работает, потому что здесь вы присваиваете возвращаемое значение $.ajax(...) to aoColumns (когда вам действительно нужно назначить массив столбцов "aoColumns" ):

}).makeEditable({

     ...

     "aoColumns": $.ajax({

Вместо этого вам нужно сделать звонок AJAX FIRST. Затем внутри функции jQuery success установите свой файл данных.

$.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 **/
    }

Я попытался оставить все, кроме важных бит, чтобы сделать ключевые моменты ясными, но это должно помочь вам понять, где вы поступили неправильно.

Я установил JS Fiddle здесь с образцом (непроверенным) кодом, если это не имеет смысла:

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

Ответ 2

Предполагая, что /get_aoColumns возвращает все правильно, похоже, что вы хотите сначала получить эту информацию, а затем в обработчике успеха создать datatable. В вашем коде выше, похоже, что объявление dataTables может завершиться до того, как запрос ajax имеет шанс завершить, так как об этом:

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