DataTables динамически добавляет столбец в таблицу

Я использую DataTables (datatables.net) для отображения данных из источника Ajax и не могу его настроить. Одна вещь, которую я хотел бы сделать, это добавить столбец, чтобы у меня была, например, кнопка «Изменить» для каждой строки.

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

В настоящее время я использую следующий код для отображения своей таблицы:

fnServerObjectToArray = function ( aElements ){
    return function ( sSource, aoData, fnCallback ) {
        $.ajax( {
            "dataType": 'json', 
            "type": "POST", 
            "url": sSource, 
            "data": aoData, 
            "success": function (json) {
                var a = [];
                for ( var i=0, iLen=json.aaData.length ; i<iLen ; i++ ) {
                    var inner = [];
                    for ( var j=0, jLen=aElements.length ; j<jLen ; j++ ) {

                        inner.push( json.aaData[i][aElements[j]] );
                    }
                    a.push( inner );
                }
                json.aaData = a;
                fnCallback(json);
            }
        } );
    }
}

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": 'get_data.php',
        "fnServerData": fnServerObjectToArray( [ 'username', 'email' ] )
    } );
}); 

person Chad    schedule 01.06.2011    source источник


Ответы (4)


Почему бы вам не использовать fnRenderFunction в aoColumns? В качестве примера:

aoColumns: [ { "bVisible": false} , null, null, null, null,
  { "sName": "ID",
    "bSearchable": false,
    "bSortable": false,
    "fnRender": function (oObj) {
       return "<a href='EditData.php?id=" + oObj.aData[0] + "'>Edit</a>";
     }
  }
]

Вы можете использовать его для форматирования значения со стороны сервера.

См. аналогичный пример на странице http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html (игнорировать определенные настройки редактируемого подключаемого модуля)

person Jovan MSFT    schedule 01.06.2011
comment
Спасибо, как раз то, что я искал! - person Chad; 02.06.2011
comment
Огромная благодарность за этого товарища. Я использую это в контексте требования столбца «действие» для моей таблицы данных, полученной с помощью ajax. - person ; 22.07.2013

Я создал столбцы с кнопкой редактирования, ссылками и т. д., но обычно я делаю все на стороне сервера, настраивая возвращаемые данные, а затем показывая/скрывая их с помощью параметра aoColumns. Я действительно не понимаю, чего вы пытаетесь достичь: отображать данные на стороне сервера в виде ссылки?

person Nicola Peluchetti    schedule 01.06.2011
comment
Чего я пытаюсь добиться, так это иметь возможность добавлять столбец (с кнопками редактирования, ссылками и т. д.), как вы сказали, в ЛЮБУЮ таблицу независимо от источника данных. Конечно, каждое поле в этом столбце должно иметь доступ к данным в соответствующей строке. Итак, согласно моему примеру, я должен иметь возможность отображать в столбце как имя пользователя, так и адрес электронной почты. - person Chad; 01.06.2011
comment
Если у вас есть только решение на стороне сервера, отправьте его мне, я все еще могу его использовать, но я бы хотел, чтобы было решение, независимое от источника данных. - person Chad; 01.06.2011

Была такая же проблема несколько месяцев назад. Я так и сделал.
Не очень элегантное решение, но оно сработало.

Как вы, возможно, уже знаете, таблицы DataTable имеют перегрузку для приема массивов Javascript.

Итак, я сделал вызов $.ajax. получил свой json, проанализировал его в массив javascript, а затем во время анализа я создал дополнительный элемент (тег anchor) с href="edit.php?email=passed_email" Затем в заголовках столбцов и добавил столбец с именем Edit. Эти значения были переданы в «aaData» и «aoColumns». И тогда стол был заполнен.

Кстати, если вы ищете встроенное редактирование, перейдите по следующей ссылке.
Пример редактирования DataTables - с плагином jEditable

person naveen    schedule 01.06.2011
comment
у меня его нет с собой. просто возьмите запрос json и сделайте его двумерным массивом, как в примере. затем назначьте его aaData согласно примеру. - person naveen; 01.06.2011
comment
Я имел в виду ту часть, где вы добавили столбец и ссылку. обратите внимание, что я новичок в JS и еще новее в jQuery. - person Chad; 01.06.2011
comment
пожалуйста, опубликуйте свой образец ответа json. я постараюсь дать что-нибудь. - person naveen; 01.06.2011
comment
как сейчас: {aaData:[{имя пользователя:johndoe,email:[email protected]},{имя пользователя:janedoe,email:[email protected]}]} - person Chad; 01.06.2011

у меня есть RND по этой проблеме, и я получаю это Надеюсь, это поможет вам.

person Usman Hayat Khan    schedule 25.10.2013