DataTables.Net 按钮未显示答案

【问题标题】：DataTables.Net Buttons Not showingDataTables.Net 按钮未显示
【发布时间】：2018-11-01 12:47:52
【问题描述】：

我有一个简单的 MVC 项目，使用 BootStrap4 和 dataTables.Net。 Link to DataTables.net 它在页面加载后进行 Ajax 调用以检索表的数据。但根据我经历过的文档。我无法让按钮显示在页面上。没有错误，只有在没有按钮的情况下才能按预期加载。

它似乎在资源管理器中正常工作，但不是 Chrome。我相信这与检索数据的 ajax 调用有关，但还没有弄清楚。

在布局页面调用初始化 CSS 和 JS：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/schit")

这是 BundleConfig.cs 中的 Bundles

bundles.Add(new ScriptBundle("~/bundles/schit").Include(
             "~/Scripts/DataTables/media/js/jquery.dataTables.min.js"
            ,"~/Scripts/DataTables/extensions/Buttons/js/dataTables.buttons.js"
            , "~/Scripts/DataTables/extensions/Buttons/js/dataTables.html5.js"
            , "~/Scripts/DataTables/extensions/Buttons/js/buttons.print.js"
             , "~/Scripts/DataTables/extensions/Buttons/js/buttons.colVis.js"
             , "~/Scripts/DataTables/extensions/Buttons/js/buttons.flash.js"
       ));


        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"
                  , "~/Content/DataTables/media/css/jquery.dataTables.min.css"
                  , "~/Content/DataTables/extensions/Buttons/css/buttons.dataTables.css"
            ));



<table id="ListTable">
<thead>
    <tr>
        <th>
            Center
        </th>
        <th>
            Account
        </th>
        <th>
            Ledger
        </th>
    </tr>
</thead>
<tbody>
<tr>
    <td></td>
</tr>
</tbody>

<script type="text/javascript">
$(function () {
    $('#ListTable').DataTable({

        ajax: '/Home/GetStuff',
        dataSrc: 'data',
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'copy',
                text: 'copy'
            },

            'excel',
            'csv',
            'pdf'
        ],
        columns: [
            { data: 'Center' },
            { data: 'Account' },
            { data: 'Ledger' }
        ]
    });
});

【问题讨论】：

标签： javascript ajax model-view-controller datatables

【解决方案1】：

发帖以帮助其他人节省一些时间...我必须感谢 DataTables.net，他们有很好的支持，但文档可能很棘手。

在 DataTables.Net 论坛的指导下进行了更多挖掘之后。这是我想出的。我最终使用 DataTables.Net 下载器将所有 CSS 和 Js 文件生成为 2 个捆绑文件，其中包含我试图添加的所有功能。因此，不是单独对它们进行 DLing，而是捆绑包中只有 2 个文件。 Heres the Downloader Link 然后捆绑包就这样结束了。

    bundles.Add(new ScriptBundle("~/bundles/DataTables").Include(
          "~/DataTables/dataTables.min.js"

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

然后在表格将要存在的布局页面或 HTML 页面上。包括脚本和内容将内容放在头部。

@Styles.Render("~/Content/DataTables")

将脚本放在结束标记之前

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

在页面上我的 HTML 几乎没有改变。我确实为表格添加了 BootStrap CSS 类。

<table id="MyTable" class="table table-striped table-bordered table-hover table-condensed" style="width:100%">
<thead>
<tr>
    <th>
        Center
    </th>
    <th>
        Account
    </th>
    <th>
        Ledger
    </th>
  </tr>
</thead>
<tbody>

在该页面的脚本部分。这里有几件事......文档有点分散，但是有几种不同的方法可以设置它。例如，“可能”有一个 Ajax 部分，按钮可以直接声明，也可以使用 New 构造函数单独实例化。

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

      var table =  $('#MyTable').DataTable({
            ajax: {
                url: 'Ajax Call for data',
                dataSrc: 'data'
            },
            columns: [
        { data: 'Center' },
        { data: 'Account' },
        { data: 'Ledger' }
    ]
        });


        new $.fn.dataTable.Buttons( table, {
            buttons: [
                'copy', 'excel', 'pdf'
            ]
        });

        table.buttons( 0, null ).container().prependTo(
            table.table().container()
        );
    });
</script>

【讨论】：