DataTables.Net按钮未显示

Question

I have a simple MVC proj, using BootStrap4 and dataTables.Net. 我有一个简单的MVC项目，使用BootStrap4和dataTables.Net。 Link to DataTables.net It makes an Ajax call after page loads to retrieve data for a table. 链接到DataTables.net它在页面加载后进行Ajax调用以检索表的数据。 But as per the Docs I have gone through. 但是根据文档，我已经看过了。 I can not get the buttons to display on the page. 我无法将按钮显示在页面上。 There are no errors and everything loads as expected only without the Buttons. 没有错误，没有按钮，一切都按预期加载。

It appears to work correcty in Explorer, but not Chrome. 它似乎可以在资源管理器中正常工作，但不能在Chrome中工作。 I believe it has to do with the ajax call to retrieve the data but haven't figured it out yet. 我相信它与ajax调用有关，以检索数据，但尚未弄清楚。

The Call on the Layout page to Initialize CSS and JS: 在布局页面上调用以初始化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")

Heres the Bundles in the BundleConfig.cs 这是BundleConfig.cs中的捆绑包

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' }
        ]
    });
});

Answer 1

Posting to help save someone else some time... I have to give credit to DataTables.net they have pretty good support but the documentation can be tricky. 发布以帮助节省其他人的时间...我不得不归功于DataTables.net，他们有很好的支持，但文档可能会很棘手。

After doing some more digging and with the guidence of the DataTables.Net Forum. 经过更多的挖掘并在DataTables.Net论坛的指导下进行。 Heres what I came up with. 这是我想出的。 I ended up using the DataTables.Net Downloader to Generate all the CSS and Js Files into 2 bundles files with all the features that I was trying to add. 我最终使用DataTables.Net下载器将所有CSS和Js文件生成具有我要添加的所有功能的2个捆绑文件。 So instead of DLing them individually It was just 2 files in the bundles. 因此，与其单独进行DL分发，不如捆绑包中的2个文件。 Heres the Downloader Link Then the Bundles ended up like this. 这是Downloader链接，然后捆绑软件就这样结束了。

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

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

Then on the Layout page or your HTML page where the tables are going to live. 然后在要放置表格的布局页面或HTML页面上。 include the scripts and content Place Content in the Head. 将脚本和内容包括在标题中。

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

Place the Script before the closing tag 将脚本放在结束标记之前

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

On the page my HTML was pretty much Unchanged. 在页面上，我的HTML几乎保持不变。 I did add the BootStrap CSS Classes for tables. 我确实为表添加了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>

In the Script Section for that page. 在该页面的“脚本”部分中。 Couple things here... the Documentation is kinda scattered but , there are a few different ways to set this up. 这里的几件事...文档有点分散，但是有几种不同的方法可以进行设置。 For example there 'May' be a Ajax section, and the buttons can either be declared directly or instantiated separately with the New constructor. 例如，“可能”有一个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>

DataTables.Net按钮未显示

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-11-05 13:44:36

DataTables.Net按钮未显示

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-11-05 13:44:36

解决方案1
0 已采纳 2018-11-05 13:44:36