将扩展的html表行转换为jquery数据表

Question

我有一个带有行的Jquery数据表，这些行可以扩展到另一个表中。子表显示完美，但我如何渲染由View返回到数据表的表？

子表格视图

@model IEnumerable<Virtual_Machines.Process>
@{
ViewBag.Title = "VM Monitor";
Layout = "";
}

<script type="text/javascript">
var oTable1;

/* Initialize table and make first column non-sortable*/
oTable1 = $('#innerproc').dataTable({
    "bJQueryUI": true,
    "aoColumns": [
    { "bSortable": false, "bSearchable": false },
    null,
    null,
    null
    ]
});
</script>

<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="innerproc">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ProcessName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.status)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.date)
        </th>
        <th></th>
    </tr>
</thead>
<tbody>


    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ProcessName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.status)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.date)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
    }
</tbody>

正如您所看到的，我尝试使用javascript通过id属性获取对表的引用，然后将其转换为数据表。这会引发错误：Uncaught TypeError：$（...）。datatable不是函数

我还尝试在@section中嵌入代码，以便在主布局文件中调用doc.ready方法时运行，这也不起作用。我想我不确定将该表转换为数据表的位置，因为它是由视图返回的。