Example for this pull request: DataTables/DataTablesSrc#152

takieszti91 · Nov 19, 2019 · b5117ba · b5117ba
commit b5117ba
Show file tree

Hide file tree

Showing 4 changed files with 616 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,14 @@
+var app = angular.module('app', ['datatables', 'datatables.buttons', 'datatables.light-columnfilter']);
+
+app.controller('myController', ['$scope', 'DTOptionsBuilder', function($scope, DTOptionsBuilder) {
+	$scope.rows = [['ASD', 'qwe', '12', '20', '2019-11-11', '123'], ['2ASD', '2qwe', '212', '220', '2019-11-12', '2123']];
+	$scope.columnfilter_object = {};
+	for (var i = 0; i < 6; i++) {
+		$scope.columnfilter_object[String(i)] = {html: 'input', type: 'text'};
+	}
+	$scope.dtOptions = DTOptionsBuilder.newOptions()
+						.withButtons(['colvis'])
+						.withOption('scrollX', true)
+
+						.withLightColumnFilter($scope.columnfilter_object);
+}]);
diff --git a/document.js b/document.js
@@ -0,0 +1,51 @@
+$( document ).ready(function() {
+	var myDataTable = $('#myTable').DataTable( {
+		"scrollX": true,
+		dom: 'Bfrtip',
+		"buttons": [
+		  {
+			"extend": 'colvis',
+			'text': '<button class="btn btn-default" id="btnColvis" style="margin-right:0px !important;background-color:inherit;">Columns<span class= "fa fa-caret-down" aria-hidden="true" style="margin-bottom:3px;"></span></button>',
+			"columns": ':not(.noVis)',
+		  },
+		]
+	} );
+
+	new $.fn.dataTable.ColumnFilter(myDataTable, {
+	  0: {
+		html: 'input',
+		type: 'text',
+		regexp : true
+	  },
+	  1: {
+		html: 'input',
+		type: 'text',
+		regexp : true
+	  },
+	  2: {
+		html: 'input',
+		type: 'text',
+		regexp : true
+	  },
+	  3: {
+		html: 'input',
+		type: 'text',
+		regexp : true
+	  },
+	  4: {
+		html: 'input',
+		type: 'text',
+		regexp : true
+	  },
+	  5: {
+		html: 'input',
+		type: 'text',
+		regexp : true
+	  },
+	  6: {
+		html: 'input',
+		type: 'text',
+		regexp : true
+	  }
+	});
+});
diff --git a/index_angular.html b/index_angular.html
@@ -0,0 +1,51 @@
+<html ng-app="app">
+<head>
+<script
+  src="https://code.jquery.com/jquery-3.4.1.min.js"
+  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+  crossorigin="anonymous"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"></link>
+<script
+  src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
+<script
+  src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
+<script
+  src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.colVis.js"></script>
+<script
+  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dataTables.lightColumnFilter.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.2/angular-datatables.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.2/plugins/buttons/angular-datatables.buttons.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.2/plugins/light-columnfilter/angular-datatables.light-columnfilter.min.js"></script>
+<script src="app.js"></script>
+</head>
+<body ng-controller="myController">
+<table id="myTable" class="display" style="width:100%" datatable="ng" dt-options="dtOptions">
+<thead>
+            <tr>
+                <th>Name</th>
+                <th>Position</th>
+                <th>Office</th>
+                <th>Age</th>
+                <th>Start date</th>
+                <th>Salary</th>
+            </tr>
+        </thead>
+        <tbody>
+			<tr ng-repeat="row in rows">
+				<td ng-repeat="value in row">{{value}}</td>
+			</tr>
+        </tbody>
+        <tfoot>
+            <tr>
+                <th>Name</th>
+                <th>Position</th>
+                <th>Office</th>
+                <th>Age</th>
+                <th>Start date</th>
+                <th>Salary</th>
+            </tr>
+        </tfoot>
+</table>
+</body>
+</html>