How To Use jQuery Datatable In Angular

This is what exactly i am looking for. I have similar code in my project but some column has dropdown, input boxes. User will select and enter data in the columns and submit. data sh get updated in db. can you help.

Can I join 2 lists (with same structure) and show in single datatable?

How to reload or refresh datatable with above solution

Im tryed send you a email but it was not delivered because the recipient's email provider rejected it.

Hello bro, I am trying to make an example like yours but it does not work and the loading of the DTable interfaces but the buttons of the page does not work and does not respect the maximum of lines that should show.<script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.JInfo = [ { nombre: '1', apellido: 'Doe' }, { nombre: '2', apellido: 'Doe' }, { nombre: '3', apellido: 'Doe' }, { nombre: '4', apellido: 'Doe' }, { nombre: '5', apellido: 'Doe' }, ] angular.element(document).ready(function () { $.extend($.fn.dataTable.defaults, { searching: false, ordering: false }); dTable = $('#user_table') dTable.DataTable(); }); }); </script> </head> <body ng-app="myApp"> <div class="container" ng-controller="myCtrl"> <table class="table" id="user_table" hibb> <thead> <tr> <th>Nombre</th> <th>Apellido</th> </tr> </thead> <tbody ng-repeat="item in JInfo"> <tr> <td>{{item.nombre}}</td> <td>{{item.apellido}}</td> </tr> </tbody> </table> </div> </body>

It is not working.i download the zip file but no found ../CSS/YourCSSFile.css.

It is not working

Like it.......

That's simple and easy, Thanks!!

Helo reddy , I am using angularjs to populate the grid with below codefunction getAllContacts() { contactService.getAllContacts().then(function (result) { if (result.data && result.data.contacts && result.data.contacts.length > 0) { $scope.contacts = result.data.contacts; angular.element(document).ready(function () { dTable = $('#tblAllContacts'); dTable.DataTable(); }); } }); } My Html : <table class="table table-striped dataTable no-footer" id="tblAllContacts"> <thead> <tr> <th></th> <th>Name</th> <th>Email ID</th> <th>Phone #</th> <th>Position</th> <th>Rank</th> </tr> </thead> <tbody ng-repeat="contact in contacts"> <tr> <td class="text-center"> <div class="squaredFour"> <input type="checkbox" value="None" id="{{contact.contact_id}}" name="check" /> <label for="{{contact.contact_id}}"></label> </div> </td> <td> <a href="#edit-contact" data-toggle="modal">{{contact.first_name}}</a> </td> <td> <i class="fa fa-facebook-f"></i>{{contact.email}} </td> <td>{{contact.phone}}</td> <td> {{contact.position}}</td> <td> <i class="fa fa-star text-warning"></i> <i class="fa fa-star text-warning"></i> <i class="fa fa-star text-warning"></i> <i class="fa fa-star-half-empty text-warning"></i> </td> <!-- <td><a href="#"><i class="fa fa-edit"></i></a></td> --> </tr> </tbody> </table> My issue is pagination is not working . It says no data available also in below of the grid.Any idea?

Thank u so much Mahipal Reddy

Thanks you are my hero!

Search is not working

Angular 1.6.6. I am getting error that "TypeError: Cannot read property 'childNodes' of undefined at compositeLinkFn (angular.js:7518)". How to avoid this

Great.!Thanks for Sharing. Is it possible to server side sorting and pagination ?

Stunning Article , thanks for your efforts.