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

Harsh D
Jun 29, 2016
3k
0
1
Blog

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.

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" src=”/_catalogs/masterpage/POC/Scripts/POC.js"></script>
</head>
<body>
<table id="POCtable">
<thead>
<tr>
<th>Title</th>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody data-bind="foreach: assignments">
<tr>
<td><span data-bind="text: Title"></span></td>
<td><span data-bind="text: Column1"></span></td>
<td><span data-bind="text: Column2"></span></td>
</tr>
</tbody>
</body>
</table></html>

Now we will create a POC.js file which will have the knockout binding,

'use strict';
var listTitle = "POC";
var appWebContext;
var hostweburl;
$(document).ready(function () {
ViewGrid();
});
function ViewGrid() {
ko.applyBindings(new TestListViewModel());
}
function TestListViewModel() {
var self = this;
appWebContext = new SP.ClientContext.get_current();
self.assignments = ko.observableArray();
self._loadList = function () {
var clientContext = SP.ClientContext.get_current();
var list = appWebContext.get_web().get_lists().getByTitle('POC');
var query = new SP.CamlQuery();
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>");
self._pendingItems = list.getItems(query);
clientContext.load(self._pendingItems);
clientContext.executeQueryAsync(Function.createDelegate(self, self._onLoadListSucceeded), Function.createDelegate(self, self._onLoadListFailed));
}
self._onLoadListSucceeded = function (sender, args) {
var listEnumerator = self._pendingItems.getEnumerator();
while (listEnumerator.moveNext()) {
var item = listEnumerator.get_current().get_fieldValues();
self.assignments.push(
{
Title: item.Title.toString(),
Column1: item.mj8o.toString(), //column1 name
Column2: item.p4zw.toString(), //column2 name
});
}
$("#POCtable").DataTable(); //bind jquery datatable by using .DataTable method
}
self._onLoadListFailed = function (sender, args) {
alert('Unable to load file list: ' + args.get_message() + '\n' + args.get_stackTrace());
}
self._loadList();
}

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