数据表按钮未显示

Question

我什么都试过了。我已经阅读了我能找到的每一篇文章、手册和帖子。我已经尝试下载并运行示例，但它甚至无法编译。 我正在使用 Visual Studio 2013，使用 C# 编写 MVC 应用程序。

这里是BundleConfig.cs中的相关代码：

        bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
                    "~/Scripts/DataTables/jquery.dataTables.js",
                    "~/Scripts/DataTables/dataTables.colReorder.js",
                    "~/Scripts/DataTables/dataTables.select.js",
                    "~/Scripts/DataTables/dataTables.fixHeader.js",
                    "~/Scripts/DataTables/dataTables.buttons.js"));

        bundles.Add(new StyleBundle("~/Content/datatables").Include(
                  "~/Content/DataTables/css/jquery.dataTables.css",
                  "~/Content/DataTables/css/colReorder.dataTables.css",
                  "~/Content/DataTables/css/select.dataTables.css",
                  "~/Content/DataTables/css/fixedHeader.dataTables.css",
                  "~/Content/DataTables/css/buttons.dataTables.css"));

这是 .cshtml 中的脚本：

<script type="text/javascript">
$(function () {

    $('#budget-data-table').DataTable({
        //dom: 'lft<B>ipr',
        serverSide: true,
        processing: true,
        ajax: '/ConstructionBudget/Get',
        columns: [
           { data: 'ID', visible: false },
           { data: 'BudgetID', visible: false },
           { title: 'Code', data: 'Code' },
           { title: 'Description', data: 'Description' },
           { title: 'Contract Value', data: 'ContractValue' }
        ],
        select: true,
        buttons: ['copy', 'edit', 'delete']
    });

    table.buttons().container().appendTo('#buttonHolder');

});

这是 HTML：

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary list-panel" id="list-panel">
            <div class="panel-heading list-panel-heading">
                <h1 class="panel-title list-panel-title">Construction Budget Line Items</h1>
            </div>
            <div class="panel-body">
                <table id="budget-data-table" class="table table-striped table-bordered" style="width:100%;">

                </table>
                <div class="col-md-12" id="buttonHolder">This is where the buttons might go.</div>
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Save" class="btn btn-default" />
    </div>
</div>

你可以看到我已经尝试过 dom: 属性。当我将它与字符串中的任何位置的“B”一起使用时，表格会折叠并且没有数据显示。

当我检查 HTML 时，我在任何地方都找不到任何按钮，除了最后的提交和共享布局的一部分。所有 .css 和 .js 文件都显示在源文件中。

我还没准备好对按钮做任何事情，因为我还不能让它们显示出来。

任何见解将不胜感激。谢谢，

Answer 1

实际上我最终改变了一些事情。
“B”不起作用的原因是因为我需要向 BundleConfig 添加更多内容：dataTables.bootstrap.js、buttons.bootstrap.js 以及用于 JavaScript 和buttons.bootstrap 的buttons.flash.js。 CSS 为 CSS。我不确定其中哪一个有效，但我从Buttons and pagination in datatables is showing incorrectly得到了这个想法

其他尝试添加按钮 (table.buttons().container().appendTo('#buttonHolder');) 不起作用的一个原因是因为我忘记重新分配 table 变量到数据表。使用 Internet Explorer 进行测试使我想到了这个。 Chrome 和 Firefox 只是忽略了该声明。我仍然没有那个工作，但我现在不需要它，因为“B”正在工作。

我怀疑表格折叠可能是浏览器缓存的问题，但我无法确定，因为现在它正在工作，我无法让它崩溃。也许明天它会为我打破；）

无论如何，感谢所有尝试过的人。祝我好运，因为我开始尝试使其可编辑。

Answer 2

根据https://datatables.net/extensions/buttons

DataTables 有许多可用的表格控制元素，它们在DOM 中的放置位置（即顺序）由dom 参数定义。

对于按钮，B 字符是要使用的字母

所以你的dom应该是

"dom": 'Bfrtip'