Datatables.net динамические столбцы

Question

Мы в настоящее время используем datatables с MVC 4, который работает хорошо для статических столбцов

То, что мы в настоящее время боремся с, чтобы найти хороший способ для динамического создания таблицы DataTables.

К примеру, у нас есть модель, которая содержит список столбцов: -

public class SampleModel { 
    public test1 {get;set;} 
    public test2 {get;set;} 
    public List<TableColumn>AditionalColumns { get ; set;} 
} 


public class TableColumn 
{ 
    public TableColumn() { } 

    public TableColumn(string ColumnHeader, string ColumnValue, int ColumnWidth) 
    { 
     this.ColumnHeader = ColumnHeader; 
     this.ColumnValue = ColumnValue; 
     this.ColumnWidth = ColumnWidth; 
    } 

    public string ColumnHeader { get; set; } 
    public string ColumnValue { get; set; } 
    public int ColumnWidth { get; set; } 
} 

Мы можем преобразовать данные в формат, соответствующий ему (JSON), требуемого DataTables, однако, не может найти далеко, чтобы динамически создавать и создавать столбцы «на лету».

Любая помощь или совет были бы очень признательны.

Answer 1

Если вы отправляете все данные назад как json за один раз, вы можете использовать функцию fnShowHide для динамического скрытия/отображения столбцов.

fnShowHide(0); 

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

$('#aTable').find('th').each(function(index) {    
     var filterButton = $('<button/>', 
    { 
     text: $(this).text(),  
     click: function() { fnShowHide(index); } 
    }); 

    $('#AddRemoveColumnPlaceHolder').append(filterButton); 
}); 

Это берет возвращает заголовок строки, которые возвращаются с вашей точки зрения, петли каждого создания кнопки и отображения fnShowHide с индекс.

Вот полный рабочий пример в jsFiddle:

http://jsfiddle.net/hutchonoid/5xsvN/7/

Для информации о функциональных возможностях показать скрыть смотрите здесь для получения дополнительной информации:

http://datatables.net/release-datatables/examples/api/show_hide.html

Update

Извините, я неправильно понял вопрос, я думал, что вы хотите динамически добавлять столбцы (т. hide/display) на отображаемой таблице.

Если бы я был вами, я бы сделал это так.

Извлеките стол, как обычно, с помощью бритвы или с помощью jQuery. Добавить столбцы в таблицу с помощью JQuery т.е.

// dynamically add the column 
$("#aTable th:last").parent().append('<th>Col 3</th>') 

Тогда называют .dataTable() последним.

Единственная причина, по которой я говорю это, потому что из моего прошлого опыта мне гораздо легче манипулировать структурой dom, используя стандартный javascript/jQuery.

Извините, если это не полностью ответит на ваш вопрос.

Answer 2

Саймон, основанный на ваш комментарий к вышесказанному я предполагаю, что вы ищете что-то вроде этого:

<table id="myTable"> 
    <thead> 
    <tr> 
     @foreach(TableColumn tc in Model) { 
     <th>@tc.ColumnHeader</th> 
     } 
    </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

Затем инициализировать DataTables как обычно, используя ваш любимый контроллер/метод действий, чтобы служить вашей JSON ,