[英]how to add copy,pdf , excel buttons in angular js datatable in mvc application
我想在角度js中添加excel,copy,pdf,print按鈕。 但是在數據表中顯示按鈕時出現錯誤。 數據表工作正常,但當我添加按鈕代碼時,數據表不工作錯誤
未捕獲的錯誤:[$ injector:modulerr]
樣式和js參考
<script src="~/angularjs/jquery.js"></script>
<script src="~/angularjs/jquery.dataTables.js"></script>
<script src="~/angularjs/angular.min.js"></script>
<script src="~/angularjs/angular-datatables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
html
<div ng-app="MyApp" class="container">
<div ng-controller="homeCtrl">
<table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover"></table>
</div>
</div>
碼
var app = angular.module('MyApp', ['datatables']);
app.controller('homeCtrl', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtColumns = [
DTColumnBuilder.newColumn("timestamp", "Time"),
DTColumnBuilder.newColumn("dataFrame", "data Frame"),
DTColumnBuilder.newColumn("fcnt", "fcnt"),
DTColumnBuilder.newColumn("freq", "freq"),
DTColumnBuilder.newColumn("rssi", "rssi")
]
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
url: "/Manhole/GetManholeReadings",
type: "POST"
})
.withButtons([
'copy',
'pdf',
'excel'
])
.withPaginationType('full_numbers')
.withDisplayLength(10);
}])
您還需要包括datatables.buttons
,即
var app = angular.module('MyApp', ['datatables', 'datatables.buttons']);
並在dom
包含B
標志,即
$scope.dtOptions = DTOptionsBuilder.newOptions()
...
.withOption('dom', 'Blfrtip') //for a full featured datatable including buttons
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.