Jquery Datatables.net动态列

我们目前正在使用MVC4，它在静态列中运行良好

我们目前正在努力寻找一种动态创建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; }  
}

公共类样本模型{
公共test1{get；set；}
公共test2{get；set；}
public listadictionalcolumns{get；set；}
}
公共类表列
{
公共表列（）{}
公共表列（字符串ColumnHeader、字符串ColumnValue、int ColumnWidth）
{
this.ColumnHeader=ColumnHeader；
this.ColumnValue=ColumnValue；
this.ColumnWidth=ColumnWidth；
}
公共字符串列头{get；set；}
公共字符串列值{get；set；}
公共int列宽度{get；set；}
}

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

---

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

如果要一次性将所有数据作为json发送回，可以使用

fnShowHide

函数动态隐藏/显示列

 fnShowHide(0);

例如，我将动态构建过滤按钮，如下所示：

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

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

然后最后调用

.dataTable（）

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

---

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

西蒙，根据您对上述内容的评论，我猜您正在寻找类似的内容：

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

@foreach（模型中的表列tc）{
@列标题
}

---

然后像往常一样使用您最喜欢的控制器/操作方法初始化数据表以提供json。

不幸的是，这些列可能完全不同，这完全取决于添加到列列表中的列。我们还需要捕获列标题以便显示您是将整个表呈现给客户端，还是希望通过ajax调用动态添加/删除列？嗨，我看了下面的答案，不幸的是，它仍然没有完全回答我的问题。我们拥有的列数是x，也就是说，我们不知道有多少列，我们正在尝试动态构建表，而不是显示或隐藏某些列。希望这有意义，我已经添加了一个更新。但不确定这是否有帮助。：）

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