Introduction

In this article, I am going to explain how to use and integrate the jQuery datatable with AngularJS. DataTable is a prebuild functionality and a plug-in for the jQuery JavaScript library. It is a highly flexible tool based upon the foundations of progressive enhancement. It adds advanced interaction controls to any HTML table.

Overview of the process

Step1

Create a web page with a Table view to display the data which we get from the script code.

Angular

HTML

Here is the HTML code for the look and feel of the above webpage. We must need the table view to integrate the jQuery datatable.

  1. <table width="100%" cellspacing="0" border="1">
  2. <thead id="TblHead">
  3. <tr>
  4. <td>View</td>
  5. <td>Req No.</td>
  6. <td>Vendor</td>
  7. <td>Date Required </td>
  8. <td>Requisition Date</td>
  9. <td>Approval Status</td>
  10. <td>Order Status</td>
  11. <td>Notify</td>
  12. </tr>
  13. </thead>
  14. <tbody>
  15. <tr ng-repeat="MyOrder in MyOrders">
  16. <td><a title='Click to view' href="#" target='_blank' class='btn btn-info btn-md'><span class='glyphicon glyphicon-user'></span> View</a></td>
  17. <td> {{MyOrder.OrderFrom}}</td>
  18. <td>{{MyOrder.Vendor}}</td>
  19. <td>{{MyOrder.DateRequired | date}}</td>
  20. <td>{{MyOrder.RequisitionDate | date}}</td>
  21. <td>{{MyOrder.WorkStatus}}</td>
  22. <td>{{MyOrder.OrderStatus}}</td>
  23. <td>Notify</td>
  24. </tr>
  25. </tbody>
  26. </table>

Where all the <tr> tags will repeat as per the data in the list using the ng-repeat directive of AngularJS.

Step 2

Get all the data from the SharePoint list on page load. This is the script code for retrieving the data from a SharePoint list using Angular with REST call.

  1. $http({
  2. method: 'GET',
  3. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('RequisitionOrders')/Items",
  4. headers: {
  5. "Accept": "application/json;odata=verbose"
  6. }
  7. }).success(function(data, status, headers, config) {
  8. Console.log(data.d.results);
  9. }).error(function(data, status, headers, config) {});
Step 3

Integrate the jQuery Datatable with AngularJS as below.

In HTML file

Type the below line in your HTML file. The ID in HTML will help to bind the datatable functionalities to the entire table.

  1. <table width="100%" cellspacing="0" id="user_table" class="users list dtable" border="1">
In Script

Store the retrieved data to a scope.

  1. $scope.MyOrders = data.d.results;

Then, the defined scope variable named $scope.MyOrders will be used as settings for the data tables.

Integrate the Datatable to the AngularJS by adding the following code in success.

  1. angular.element(document).ready(function() {
  2. dTable = $('#user_table')
  3. dTable.DataTable();
  4. });

References

Please add the following JS & CSS files to your code in the following order.

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  2. <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  3. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  4. <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  5. <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
  6. <script src="https://code.angularjs.org/1.3.0/angular.js"></script>

Let’s see the result on screen as below.

Angular

Hence, we have integrated the jQuery datatable to an Angular application successfully. Now, all the functionalities will work with the AngularJS application just same as they work in a jQuery application.

Conclusion

In modern web applications, most of us are likely to develop single page applications. To do so, we use AngularJS. Usually, table manipulation in AngularJS is easier than in normal jQuery. But still, search and server-side pagination are not straight forward in AngularJS. Hence, we can use datatable in AngularJS too.