With the DataTables Light Column Filter

The angular-datatables also provides an API in order to make the plugin Light Column Filter work with datatables.

You need to add the file angular-datatables.light-columnfilter.min.js to your HTML file.

The Light Column Filter only works with serverside processing!

You also need to add the dependency datatables.light-columnfilter to your Angular app.

See the API for the complete list of methods of the helper.

ID First Name Last Name
ID First Name Last Name
angular.module('showcase.withLightColumnFilter', ['datatables', 'datatables.light-columnfilter']) .controller('WithLightColumnFilterCtrl', WithLightColumnFilterCtrl); function WithColumnFilterCtrl(DTOptionsBuilder, DTColumnBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withPaginationType('full_numbers') .withLightColumnFilter({ '0' : { type : 'text' }, '1' : { type : 'text' }, '2' : { type : 'select', values: [{ value: 'Yoda', label: 'Yoda foobar' }, { value: 'Titi', label: 'Titi foobar' }, { value: 'Kyle', label: 'Kyle foobar' }, { value: 'Bar', label: 'Bar foobar' }, { value: 'Whateveryournameis', label: 'Whateveryournameis foobar' }] } }); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name'), DTColumnBuilder.newColumn('lastName').withTitle('Last name') ]; }