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>
  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>
  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;
  6. $(document).ready(function() {
  7. ViewGrid();
  8. });
  10. function ViewGrid() {
  11. ko.applyBindings(new TestListViewModel());
  12. }
  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