[英]jQuery Datatables buttons showing as links.. not buttons
使用jQuery DataTables 1.10.15 ,我正在嘗試使用文件導出選項。
這是我的腳本在頁面上的加載方式:
<script src="/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="/Scripts/DataTables/dataTables.bootstrap.js"></script>
<script src="/Scripts/DataTables/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
這是我的數據表設置:
var table = $('#NewTable').DataTable({
dom: 'Bfrtip',
buttons: [ 'excel', 'pdf' ],
'aoColumnDefs': [
{ "bSortable": false, "aTargets": [2, 7] },
{ "bSearchable": false, "aTargets": [7] }
]
});
它們的外觀如下:
如何使它們顯示為按鈕而不是鏈接?
您很可能會丟失正確的CSS文件。
嘗試將此CSS鏈接(來自CDN)添加到標題中。
https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css
工作示例:
var table = $('#NewTable').DataTable({ dom: 'Bfrtip', buttons: [ 'excel', 'pdf' ], 'aoColumnDefs': [ { "bSortable": false, "aTargets": [2, 7] }, { "bSearchable": false, "aTargets": [7] } ] });
<link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script> <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script> <script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script> <table id="NewTable"></table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.