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：属性。当我将它用于＆＃39; B＆＃39;在字符串中的任何地方，表格都会崩溃，没有数据显示。

当我检查HTML时，我无法在任何地方找到任何按钮，除了最后的提交，以及属于共享布局的那些按钮。所有.css和.js文件都显示在源文件中。

我还没准备好对按钮做任何事情，因为我无法让它们出现。

任何见解都将受到赞赏。谢谢，

Answer 1

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

node-inspector有许多可用的表格控制元素，它们放在DataTables（即订单）中的位置由DOM参数定义。

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

所以你的dom应该

dom

Answer 2

实际上有一些事情我最终改变了之所以＆＃34; B＆＃34;没有工作是因为我需要向BundleConfig添加更多东西：dataTables.bootstrap.js，buttons.bootstrap.js和buttons.flash.js用于JavaScript和buttons.bootstrap.css用于CSS。我不确定其中哪些有效，但我从Buttons and pagination in datatables is showing incorrectly

得到了这个想法

另一个尝试添加按钮的原因之一（table.buttons（）。container（）。appendTo（＆＃39;＃buttonHolder＆＃39;）;）没有工作是因为我忘了放回去在将表变量赋值给DataTable中。使用Internet Explorer进行测试让我想到了这一点。 Chrome和Firefox只是忽略了这一说法。我仍然没有那种工作，但我现在不需要它，因为＆＃34; B＆＃34;正在努力。

我怀疑表崩溃可能是浏览器缓存的一个问题，但我无法确切知道，因为我现在无法解决这个问题。也许明天它会为我打破;）

非常感谢所有尝试过的人。祝我好运，因为我开始尝试让这个可编辑。

DataTables按钮未显示

2 个答案: