angularjs datatables Individual column searching

angularjs datatables Individual column searching

by hoogw

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<div class="container" ng-app="formvalid">
  <div class="panel" data-ng-controller="validationCtrl">
    <div class="panel-heading border">
      <h2>Data table using jquery datatable in Angularjs
    </h2>
    </div>
    <div class="panel-body">
    
      <!---     ui-jq = angularjs binding .dataTable() function,   ui-options= bind to .dataTable({datatable option})--->
      <table id="example" class="table table-bordered bordered table-striped table-condensed datatable" ui-jq="dataTable" ui-options="dataTableOpt">   
     
       
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start Date</th>
          </tr>
        </thead>
        
        
        <tfoot>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start Date</th>
          </tr>
        </tfoot>
        
        
        <tbody>
          <tr ng-repeat="n in data">
            <td>{{$index+1}}</td>
            <td>{{n[0]}}</td>
            <td>{{n[1]}}</td>
            <td>{{n[2]}}</td>
...

JavaScript

var app1=angular.module('formvalid', ['ui.bootstrap','ui.utils']);
app1.controller('validationCtrl',function($scope){
										  
						
						
						
					angular.element(document).ready(function () {
											 // Setup - add a text input to each footer cell
											 
											 
														$('#example tfoot th').each( function () {
															var title = $(this).text();
															$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
														} );
													 
													 
													 
													console.log('  document ready function, add search by column feature ');
													
													 
													
														/*
													        earlier angularjs initialize datatable( must add "retrieve": true,) , but don't get a table handle, 
													    	
														  	later here, $('#id').DataTable(); will 1) if existing, will retrieve table handle.
					                                                                               2) if not exsiting, will create a new table. 
														
														
													 */	
													 
													    var table = $('#example').DataTable();
													 
													 
													 
														// Apply the search
														table.columns().every( function () {
															var that = this;
													 
															$( 'input', this.footer() ).on( 'keyup change', function () {
																if ( that.search() !== this.value ) {
																	that
																		.search( this.value )
																		.draw();
																}
															} );
														} );
														
														
													
														
										});// document ready				  
										  
										  
										  
										  
										  
										  
										  
										  
  $scope.data=[
        [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011\/04\/25",
         ...