Datatables.net动态列

Question

目前，我们正在使用的数据表与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; }  
}

我们可以将数据转换为Datatables所需的适当格式（json），但是找不到动态创建和动态创建列的方法。

任何帮助或建议，将不胜感激。

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

更新

抱歉，我误解了这个问题，我想您想在呈现的表格上动态添加列（即隐藏/显示）。

如果我是你，我会这样做。

使用剃刀或jQuery正常渲染表。 使用jquery将列添加到表中

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

然后最后调用.dataTable() 。

我说这的唯一原因是，根据我过去的经验，我发现使用标准javascript / jQuery操作dom结构要容易得多。

很抱歉，如果这样不能完全回答您的问题。

Answer 2

Simon，根据您对以上内容的评论，我猜您正在寻找类似以下内容的产品：

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

然后使用喜欢的Controller / Action方法像平常一样初始化数据表，以提供json。