Post
Ask Question

Read Data Using Client Side JavaScript Object Model and Apply Search Using jQuery DataTable

Create a List called POC containing the following columns (Technology and Customer),
 
columns
 
Once the list is created, enter some data into the list.
 
Now we will create an HTML File called POC.html which will contain the design view of our project.
  1. <html>  
  2.   
  3.      <head>  
  4.           <!--incude knockout files-->  
  5.           <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>  
  6.           <!--knockout script ends here-->  
  7.           <!--include sharepoint javascript api-->  
  8.           <script src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"></script>  
  9.           <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>  
  10.           <script type="text/javascript" src="/_layouts/15/sp.js"></script>  
  11.           <!--sharepoint api ends here-->  
  12.           <!--jquery dataTables api starts here-->  
  13.           <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>  
  14.           <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>  
  15.           <!--jquery datatable ends here-->  
  16.           <!--Jquery datatable css-->  
  17.           <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">  
  18.           <script type="text/javascript" src="/_catalogs/masterpage/POC/Scripts/POC.js"> </script>  
  19.      </head>  
  20.   
  21.      <body>  
  22.           <table id="POCtable">  
  23.                <thead>  
  24.                     <tr>  
  25.                          <th>Title</th>  
  26.                          <th>Column1</th>  
  27.                          <th>Column2</th>  
  28.                     </tr>  
  29.                </thead>  
  30.                <tbody data-bind="foreach: assignments">  
  31.                     <tr>  
  32.                          <td><span data-bind="text: Title"></span></td>  
  33.                          <td><span data-bind="text: Column1"></span></td>  
  34.                          <td><span data-bind="text: Column2"></span></td>  
  35.                     </tr>  
  36.                </tbody>  
  37.      </body>  
  38.      </table>
  39. </html>
Now we will create a POC.js file which will have the knockout binding,
  1. 'use strict';  
  2. var listTitle = "POC";  
  3. var appWebContext;  
  4. var hostweburl;  
  5.   
  6. $(document).ready(function() {  
  7.      ViewGrid();  
  8. });  
  9.   
  10. function ViewGrid() {  
  11.      ko.applyBindings(new TestListViewModel());  
  12. }  
  13.   
  14. function TestListViewModel() {  
  15.      var self = this;  
  16.      appWebContext = new SP.ClientContext.get_current();  
  17.      self.assignments = ko.observableArray();  
  18.      self._loadList = function() {  
  19.           var clientContext = SP.ClientContext.get_current();  
  20.           var list = appWebContext.get_web().get_lists().getByTitle('POC');  
  21.           var query = new SP.CamlQuery();  
  22.           query.set_viewXml("<View>" + " <Query>" + " <OrderBy>" + "<FieldRef Name='Modified' Ascending='True' />" + " </OrderBy>" + " </Query>" + " <ViewFields>" + "<FieldRef Name='Title' /><FieldRef Name='mj8o' /><FieldRef Name='p4zw' />" + " </ViewFields>" + "</View>");  
  23.           self._pendingItems = list.getItems(query);  
  24.           clientContext.load(self._pendingItems);  
  25.           clientContext.executeQueryAsync(Function.createDelegate(self, self._onLoadListSucceeded), Function.createDelegate(self, self._onLoadListFailed));  
  26.      }  
  27.      self._onLoadListSucceeded = function(sender, args) {  
  28.           var listEnumerator = self._pendingItems.getEnumerator();  
  29.           while (listEnumerator.moveNext()) {  
  30.                var item = listEnumerator.get_current().get_fieldValues();  
  31.                self.assignments.push({  
  32.                     Title: item.Title.toString(),  
  33.                     Column1: item.mj8o.toString(), //column1 name    
  34.                     Column2: item.p4zw.toString(), //column2 name    
  35.                });  
  36.           }  
  37.           $("#POCtable").DataTable(); //bind jquery datatable by using .DataTable method          
  38.      }  
  39.      self._onLoadListFailed = function(sender, args) {  
  40.           alert('Unable to load file list: ' + args.get_message() + '\n' + args.get_stackTrace());  
  41.      }  
  42.      self._loadList();  
  43. } 
     
Now upload these files in the following location “_catalogs/masterpage/” by creating a folder called POC.
 
In this folder create two subfolders, HTML and Scripts, and add the files respectively,
 
folder
 
Now create a page, add a content editor Web part, add the URL, and see the magic:
 
page
 
You can search, do paging, and select the number of entries.
 
page