我有一个简单的 MVC 项目，使用 BootStrap4 和 dataTables.Net。链接到 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' }
]
});
});
发帖是为了帮助其他人节省一些时间......我必须感谢 DataTables.net 他们有很好的支持，但文档可能很棘手。
在进行了更多的挖掘和 DataTables.Net 论坛的指导之后。这是我想出的。我最终使用 DataTables.Net Downloader 将所有 CSS 和 Js 文件生成为 2 个捆绑文件，其中包含我尝试添加的所有功能。因此，而不是单独 DLing 它们只是捆绑中的 2 个文件。这是下载器链接然后捆绑包就这样结束了。
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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句