Question

我在DataTables论坛上问了这个问题，但为了获得快速反馈，我愿意忍受一些滥用，所以我在这里交叉发帖。

我刚刚开始进入ASP.NET MVC5的冒险，拥有1995年扎根的网络开发技能。经过一番努力，基本的CRUD应用程序正在运行，我正在着手打扮一些。 DataTables提供的功能似乎非常合适。

我对JavaScript的理解可以放在一个小注释块中，但我可以遵循格式良好的指令。所以，当我发现文档说“只需添加这三行包含行和JS这一行，然后你就开始运行”，我认为这很简单。我做了我认为的指示所说的，没有任何改变。做了更多的研究，我发现有人的项目为MVC5和DataTables 1.10创建了绑定，但是指令很稀疏（如果你理解他们要告诉你的事情，那么“简单”就很容易了。）

从DataTables说明开始（“只需添加这三行......”），这就是我所拥有的：

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="products" >
    <tr>
        <th> @Html.DisplayName("Code")</th>
        <th>@Html.DisplayNameFor(model => model.Name)</th>
        <th>@Html.DisplayNameFor(model => model.Category)</th>
        <th>@Html.DisplayName("Active")</th>
        <th>@Html.DisplayName("Published")</th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>@Html.DisplayFor(modelItem => item.ProductCode)</td>
        <td>@Html.DisplayFor(modelItem => item.Name)</td>
        <td>@Html.DisplayFor(modelItem => item.Category)</td>
        <td>@Html.DisplayFor(modelItem => item.Active.Value)</td>
        <td>@Html.DisplayFor(modelItem => item.Published.Value)</td>
        <td>@Html.ActionLink("Details", "Details", new { id=item.ID })</td>
    </tr>
}
</table>

理论上，我需要添加的是一行：

$(document).ready( function () {
    $('#products').DataTable();
} );

缺少什么（这是我的基本理解的来源）是在哪里添加它。我已经尝试了几个地方，并没有改变表格。我尝试的第一个地方是第三个区块的script标记：

<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
$(document).ready( function () {
    $('#products').DataTable();
} );</script>

这是正确的地方吗？我是否正确识别目标表？我是否需要弄清楚如何实现https://github.com/ALMMa/datatables.mvc中的代码？在掌握JavaScript之前，我应该放弃所有的希望吗？

感谢您提供给我的任何帮助。

干杯。

JD

Answer 1

我也很难在MVC5中运行DataTables。我试图在Scaffolding针对视图模型生成的标准索引视图中使用它。我能够建造一个小型原型而不是针对桌子的FOREACH发电机我从建议的示例中输入了许多不同的JS和CSS代码行，并修补了BundleConfig。仍然没有喜悦索引将正确显示，但不会显示可排序列等功能最终通过将标题中的列数与显示的表体中的列数完全匹配来解决。请注意，Id列不计入显示的列中。在我的示例中，有6个显示列和6个标题。但是隐藏了Id列的模型中的七个。 Action Column也有一个标题。

现在到处都有JavaScript和css片段。我想清理它以便重复使用。

我能够部分纠正捆绑。然后，熟练的合作伙伴向我展示了如何在不在_Layout页面上的索引页面中正确部署捆绑引用，在每页上不必要地加载捆绑引用。

您还会看到任何路径中都没有版本号。这有助于在不更改源代码的情况下允许JS，CSS和DataTable更新。

确保<table>行中指定的表ID与底部Javascript中的值完全匹配，并在JS中使用＃。当我完成这个任务时，我的页面中没有剩余的JS行的JS。请尝试以下方法。

从NuGet下载最新的Bootstrap和DataTable

通过添加

修改AppStart文件夹中的RegisterBundles代码

//
    //  These are the DataTables bundles
    //  Be sure to activate them on the Page where they are needed or on _Layout 
    //
    bundles.Add(new ScriptBundle("~/bundles/dataTables").Include(
              "~/Scripts/DataTables/jquery.dataTables.js",
              "~/Scripts/DataTables/dataTables.bootstrap.js"));

    bundles.Add(new StyleBundle("~/Content/dataTables").Include(
              "~/Content/DataTables/css/jquery.dataTables.css",
              "~/Content/DataTables/css/jquery.dataTables.min.css"));

然后在索引页面的顶部和底部添加对包的引用。

在索引页的头部

 @model IEnumerable<"Your Own Model">.PriceList>

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @Styles.Render("~/Content/dataTables")


<h2>Price List</h2>
        <table id="table_id" class="table table table-striped table-hover">
            <thead>
                <tr>                        
                    <th>
                        Product Ptr
                    </th>                        
                    <th>
                        Product Class
                    </th>
                    <th>
                        Ver
                    </th>
                    <th>
                        Year
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        Action
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>  
                            @Html.HiddenFor(modelItem => item.PriceList_Id)

                        <td>
                            @Html.DisplayFor(modelItem => item.Product_Pt)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ProductClass_Pt)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Version)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Year)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ProductDesc)
                        </td>

                        <td>
                            @Html.ActionLink("Edit", "Edit", new { id=item.PriceList_Id }) |
                            @Html.ActionLink("Details", "Details", new { id = item.PriceList_Id }) |
                            @Html.ActionLink("Delete", "Delete", new { id = item.PriceList_Id })
                        </td>

                    </tr>
                }
            </tbody>
        </table>
@section scripts {

@Scripts.Render("~/bundles/dataTables")

<script type="text/javascript">

    $(document).ready(function () {
        $('#table_id').DataTable();
    });

</script>
}

Answer 2

来自W3C脚本规范：

如果src具有URI值，则用户代理必须忽略该元素的内容并通过URI检索脚本

你想要的是这个：

<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<script type="text/javascript">
    $(document).ready( function () {
        $('#products').dataTable();
    } );
</script>

注意：.dataTable();上的外壳。我必须检查，但我认为.dataTable()是创建方法，.DataTable()访问数据表对象一旦创建。

数据表祝你好运。我喜欢它，但“只需几行就可以了！”一旦你想要做超出基本的任何事情，就会迅速让位给复杂的API。

编辑：此外，这是合法的吗？

SRC =“// cdn.datatables.net .....

你不需要“http：”吗？我原以为你会这样做，但也许不会。

Answer 3

它正在工作!!

所以，这就是我必须做的事情：

在_Layout.cshtml我将以下内容添加到head代码中：

<link href="~/Content/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="~/Scripts/jquery.dataTables.js"></script>

在BundleConfig.cs中，我添加了以下几行：

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.10.2.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
                    "~/Scripts/jquery.dataTables.js"));

最后，在Index.cshtml的底部是对脚本的调用：

<script type="text/javascript" charset="utf8">
    $(document).ready( function () {
        $('#products').DataTable();
    } );
</script>

我怀疑BundleConfig.cs位是多余的，但它正在工作，所以我不想愚弄现在尝试优化它。

干杯。

JD

Answer 4

这里有几个问题......

当您将脚本放入src标记

script

数据表使用元素tbody和thead对内容进行正确分组和样式化。所以需要在table元素
与th的数量相比，您有td的不同数量。这些需要匹配，因此所有表数据都有一个与
将页面底部的所有脚本分组以加快明显的页面加载时间

这应该有用......

<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="products">
    <thead>
        <tr>
            <th> @Html.DisplayName("Code")</th>
            <th>@Html.DisplayNameFor(model => model.Name)</th>
            <th>@Html.DisplayNameFor(model => model.Category)</th>
            <th>@Html.DisplayName("Active")</th>
            <th>@Html.DisplayName("Published")</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model) 
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.ProductCode)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
                <td>@Html.DisplayFor(modelItem => item.Category)</td>
                <td>@Html.DisplayFor(modelItem => item.Active.Value)</td>
                <td>@Html.DisplayFor(modelItem => item.Published.Value)</td>
                <td>@Html.ActionLink("Details", "Details", new { id=item.ID })</td>
           </tr>
        }
     </tbody>
</table>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>

<script type="text/javascript" charset="utf8">
    $(document).ready( function () {
        $('#products').DataTable();
    } );
</script>

适用于初学者的ASP.NET MVC5和DataTables：什么在哪里？

4 个答案:

它正在工作!!