How to use jQuery data table with Custom WCF in SharePoint Script Part


Data-Table-Demo-1

In SharePoint 2013 there is a Out of the box web part called “Script Part”, which can be used to run JavaScript in your app. You don’t need to use a Content Edit Web Part. If you have a SharePoint web site installed in a machine which is internet facing, then you can load latest JavaScript libraries directly from their host site, no need to host those separately in Site Asset gallery. Since this web part will run only client side code, it will start the execution when opened in a browser.

So, I had a Custom Stand Alone RESTful WCF, which I use for most of my demos and it uses the list of US Presidents for the data. I have taken the sample from this site.

This WCF service is deployed in my local IIS and if you call specific methods from the Browser it is capable of showing JSON output in TEXT/HTML format.

Data-Table-Demo-2

Now, we are almost ready.

First you need to select a page where you would like this “Script-Part” to be displayed. Once the page is selected, open it in Edit mode and go to the options to add a new Web Part.

Then select the “Script Editor Web Part” from the list of web parts and insert it to the page. At this step you will see a “Edit” link at the middle of the web part. Click on it.

It will display a Modal dialog box with a Text box in it. Put the entire code to that text box and save the page.

First Load the scripts and CSS Files for jQuery data table from CDN or your site assets folder:
https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css

Then load the following scripts from CDN or your site asset folder

http://code.jquery.com/jquery-1.12.0.min.js and
https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js
Then define your table skeleton:

<table width=”100%” class=”display” id=”example” cellspacing=”0″>

<thead>

<tr>

<th>Id</th>

<th>FirstName</th>

<th>LastName</th>

<th>EmailAddress</th>

</tr>

</thead>

<tfoot>

<tr>

<th>Id</th>

<th>FirstName</th>

<th>LastName</th>

<th>EmailAddress</th>

</tr>

</tfoot>

</table>

After that create the following functions to call the Web Service to load data and instantiate the Data Table:

$(document).ready(function () {
getPresidentsData();
});

function getPresidentsData() {
var serviceUri = “http://yourlocalhost:1004/PresidentsService.svc/GetAllPresidents&#8221;;
$.ajax({
type: “GET”,
contentType: “application/json”,
url: serviceUri,
dataType: “json”,
success:
function (response) {
showPresidentsList(response);
$(‘#message’).html(“” + serviceUri + ““);
},
error:
function (err) {
alert(err);
}
});
}

function showPresidentsList(presidentsData) {
$(‘#example’).DataTable( {

data: presidentsData,
“aoColumns”: [
{ “mData”: “Id” },
{ “mData”: “FirstName” },
{ “mData”: “LastName” },
{ “mData”: “EmailAddress” }

]

} );
}

The function showPresidentsList is the one responsible for formatting and displaying the data to the browser. It uses the mData property from jQuery Data Table to find out the exact property from the JSON array and build the table columns.

Hopefully it will help someone in need!!

There might be issues if you just copy and paste the code, since the editor through which I have added the code might have substituted some part of it to some weird HTML. So, please download it from this link if you want to save time to make changes after copy: jQuery-Data-Table-Script-Part.doc

 

 

Advertisements