jquery datatable with Angularjs - individual column searching

I have made a jsFiddle example :

https://jsfiddle.net/hoogw/a48Le2ws/18/


codepen example:

https://codepen.io/hoogw/pen/vJrzGB

Step 1 (HTML file):

Type the below line in your html file. Please note that in this file you can see ui-jq=“datatable” which tells AngularJS that this is the data table and ‘ui-options’ tells AngularJS to use the settings from scope variable named options.

Step 2 (Controller):

a. In your Angular app, you need to inject ‘ui.utils’ as follows.

angular.module(‘myApp.datatable’, [‘ngRoute’,’ui.utils’])

b. After that declare a local variable called dataSet, which is used as row data in data tables, in which I have just placed some static values of a person like name, position, office, extend, start date, salary as an array. You can use object based dataSets also like JSON, in this case you need to define data variable in column definition (like columns : [{title: “Name”, “data”, “name”}])

var dataSet = [

[ “Tiger Nixon”, “System Architect”, “Edinburgh”, “5421”, “2011/04/25”, “$320,800” ],

[ “Garrett Winters”, “Accountant”, “Tokyo”, “8422”, “2011/07/25”, “$170,750” ]

];

c. Then define scope variable na1med options which will be used as settings for the data tables. In this, we are just declaring data as dataSet and columns by title.

>$scope.options = {

data: dataSet,

columns: [

{ title: “Name” },

{ title: “Position” },

{ title: “Office” },

{ title: “Extn.” },

{ title: “Start date” },

{ title: “Salary” }

]

};

}]);