Question

我有一个简单的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.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

发布以帮助节省其他人的时间...我不得不归功于DataTables.net，他们提供了很好的支持，但是文档可能很棘手。

在进行一些进一步的挖掘之后，并以DataTables.Net论坛为指导。这是我想出的。我最终使用DataTables.Net下载器将所有CSS和Js文件生成具有我要添加的所有功能的2个捆绑文件。因此，与其单独进行DL分发，不如捆绑包中的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>

DataTables.Net按钮未显示

1 个答案: