test
HTML
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" type="text/css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.jss"></script>
</head>
<body>
<table id="business_plan_data" cellspacing="0" width="100%">
</table>
</body>
</html>
JavaScript
$scope.businessPlanList =[{
"farmName": "Lily",
"farmSubtype": "Flowers",
"tenure": 13,
"count": 2
}, {
"farmName": "Rose",
"farmSubtype": "Flowers",
"tenure": 12,
"count": 2
}]
$('#business_plan_data').DataTable( {
data: $scope.businessPlanList,
columns: [
{ "data": "farmName" ,title:"Farm Name "},
{ "data": "farmSubtype" ,title:"Farm Sub-Type"},
{ "data": "count" ,title:"Count"},
{ "data": "tenure" ,title:"Tenure"}
],
dom: 'Bfrtip',
destroy: true,
"pageLength": 20,
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );