Question

我们目前正在使用datatables和MVC 4，它适用于静态列

我们目前正在努力寻找一种动态创建数据表表的好方法。

例如，我们有一个包含列表列表的模型： -

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/

有关show hide功能的信息，请参阅此处了解更多信息：

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

<强>更新

抱歉，我误解了这个问题，我以为你想在渲染表上动态添加列（即隐藏/显示）。

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

使用razor或jQuery正常渲染表格。使用jquery即

将列添加到表中

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

然后最后拨打.dataTable()。

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

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

Answer 2

西蒙，基于你对上述评论，我猜你正在寻找这样的东西：

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

然后使用您最喜欢的Controller / Action Method来正常初始化您的数据表，以便为您的json提供服务。

Datatables.net动态列

2 个答案: