Bind SharePoint list data using jQuery datatable using content search web part CSWP in SharePoint server 2013

Bind sharepoint list using jquery

I will explain how to create a bootstrap navigation menu bar using content search web part in SharePoint 2013. In the first step, let’s create the authoring and publishing site collection.


Authoring Site collection allows authors to manage their website content while the Publishing Site collection reviews the content from the authoring site collection.

Open the Authoring site collection. Create a list named “menu” that contains title and pageURL. The list columns will look like below:

In this article, I have explained how to create a jQuery datatable using content search web part (CSWP) to Bind data in SharePoint server 2013. In the first step, let’s create the Authoring and Publishing Site Collections. Authoring Site collection allows authors to manage their website content while the Publishing Site collection reviews the content from the authoring site collection.

Open the Authoring Site Collection. In that site collection create a list named “Employee Details” that contains Employee name, Employee designation, Employee ID, Employee designation, Blood group, Email, and Mobile.



content search web part tutorial
content search web part tutorial

Let’s go and create a control and a template to display the items.
– Control Template
It provides the overall structure (layout) of the HTML elements along with start and end tags.

– Item Template
It renders the items from the list, and contains text and pictures.

Now, let’s create two display templates for displaying a bootstrap carousel menu control and a menu item.
Code – Datatable Control Template

Upload the script and CSS into style library.


content search webpart sharepoint 2013 jquery
content search webpart sharepoint 2013 jquery

Add the scripts and CSS into Control template.
<script>

$includeScript(this.url, “~sitecollection/Style%20Library/datatable/jquery.dataTables.min.css”);

$includeCSS(this.url, “~sitecollection/Style%20Library/datatable/jquery.dataTables.min.js”);

</script>

Now, let’s define the HTML layout to the Control Template

<table id=”datatable” class=”display”>

<thead>

<tr>

<th>Employee ID</th>

<th>Employee Name</th>

<th>Designation</th>

<th>Blood Group</th>

<th>Email</th>

<th>Mobile</th>

</tr>

</thead>

<tbody>

_#= ctx.RenderItems(ctx) =#_

</tbody>

</table>

The full code looks like the following.

<html xmlns:mso=”urn:schemas-microsoft-com:office:office” xmlns:msdt=”uuid:C2F41010-65B3-11d1-A29F-

00AA00C14882″>

<head>

<title>Datatable Control</title>

<!–[if gte mso 9]><xml>

<mso:CustomDocumentProperties>

<mso:TemplateHidden msdt:dt=”string”>0</mso:TemplateHidden>

<mso:MasterPageDescription msdt:dt=”string”>Display a Accordion

Control</mso:MasterPageDescription>

<mso:ContentTypeId

msdt:dt=”string”>0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>

<mso:TargetControlType msdt:dt=”string”>;#SearchResults;#Content Web

Parts;#</mso:TargetControlType>

<mso:HtmlDesignAssociated msdt:dt=”string”>1</mso:HtmlDesignAssociated>

<mso:HtmlDesignConversionSucceeded

msdt:dt=”string”>True</mso:HtmlDesignConversionSucceeded>

<mso:CrawlerXSLFile msdt:dt=”string”></mso:CrawlerXSLFile>

<mso:HtmlDesignPreviewUrl msdt:dt=”string”></mso:HtmlDesignPreviewUrl>

<mso:HtmlDesignStatusAndPreview

msdt:dt=”string”>http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web

Parts/banner/bannercontrol.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>

</mso:CustomDocumentProperties>

</xml><![endif]–>

</head>

<body>

<script>

$includeCSS(this.url, “~sitecollection/Style%20Library/datatable/jquery.dataTables.min.css”);

$includeScript(this.url, “~sitecollection/Style

%20Library/datatable/jquery.dataTables.min.js”);

$includeScript(this.url, “~sitecollection/Style%20Library/datatable/jquery-1.8.2.min.js”);

</script>

<div>

<!–#_if (!$isNull(ctx.ClientControl) && !$isNull

(ctx.ClientControl.shouldRenderControl) && !ctx.ClientControl.shouldRenderControl()){return “”;}

ctx.ListDataJSONGroupsKey = “ResultTables”;

ctx[“CurrentItems”] = ctx.ListData.ResultTables[0].ResultRows;

var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();

AddPostRenderCallback(ctx, function() {

$.getScript(siteURL + “”);

$(‘#datatable’).dataTable();

});

_#–>

<table id=”datatable” class=”display”>

<thead>

<tr>

<th>Employee ID</th>

<th>Employee Name</th>

<th>Designation</th>

<th>Blood Group</th>

<th>Email</th>

<th>Mobile</th>

</tr>

</thead>

<tbody>

_#= ctx.RenderItems(ctx) =#_

</tbody>

</table>

</div>

</body>

</html>

Datatable Item Template:

Let’s go to Item template and declare the managed properties and necessary variables.

<!–#_

var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();

var itemIdx = ctx.CurrentItemIdx+1;

var title = $getItemValue(ctx, “Title”);

var empid = $getItemValue(ctx, “Employee ID”);

var empname = $getItemValue(ctx, “Employee Name”);

var designation = $getItemValue(ctx, “Employee Designation”);

var blood = $getItemValue(ctx, “Blood Group”);

var email = $getItemValue(ctx, “Email);

var mobile = $getItemValue(ctx, “Mobile);

var esActive =””;

_#–>

Render the HTML structure with the list item information.

<!— HTML Goes Here –>

<tr>

<td>_#= empid =#_</td>

<td>_#= title =#_</td>

<td>_#= designation =#_</td>

<td>_#= blood =#_</td>

<td>_#= email =#_</td>

<td>_#= mobile =#_</td>

</tr>

Overall Item template code looks like the following.

<html xmlns:mso=”urn:schemas-microsoft-com:office:office” xmlns:msdt=”uuid:C2F41010-65B3-11d1-A29F-

00AA00C14882″>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>Datatable Item</title>

<!–[if gte mso 9]><xml>

<mso:CustomDocumentProperties>

<mso:TemplateHidden msdt:dt=”string”>0</mso:TemplateHidden>

<mso:MasterPageDescription msdt:dt=”string”>Displays an Datatable

Item.</mso:MasterPageDescription>

<mso:ContentTypeId

msdt:dt=”string”>0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>

<mso:TargetControlType msdt:dt=”string”>;#SearchResults;#Content Web

Parts;#</mso:TargetControlType>

<mso:HtmlDesignAssociated msdt:dt=”string”>1</mso:HtmlDesignAssociated>

<mso:ManagedPropertyMapping msdt:dt=”string”>’Title’:’Title’,’Employee ID’:’Employee

ID’,’Employee Name’:’Employee Name’,’Employee Designation’:’Employee Designation’,’Blood Group’:’Blood

Group’,’Email’:’Email’,’Mobile’:’Mobile'</mso:ManagedPropertyMapping>

<mso:CrawlerXSLFile msdt:dt=”string”></mso:CrawlerXSLFile>

<mso:HtmlDesignPreviewUrl msdt:dt=”string”></mso:HtmlDesignPreviewUrl>

<mso:HtmlDesignConversionSucceeded

msdt:dt=”string”>True</mso:HtmlDesignConversionSucceeded>

<mso:HtmlDesignStatusAndPreview

msdt:dt=”string”>http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web

Parts/banner/BannerItem.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>

</mso:CustomDocumentProperties>

</xml><![endif]–>

</head>

<body>

<div>

<!–#_

var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();

var itemIdx = ctx.CurrentItemIdx+1;

var title = $getItemValue(ctx, “Title”);

var empid = $getItemValue(ctx, “Employee ID”);

var empname = $getItemValue(ctx, “Employee Name”);

var designation = $getItemValue(ctx, “Employee Designation”);

var blood = $getItemValue(ctx, “Blood Group”);

var email = $getItemValue(ctx, “Email”);

var mobile = $getItemValue(ctx, “Mobile”);

var esActive =””;

_#–>

<!— HTML Goes Here –>

<tr>

<td>_#= empid =#_</td>

<td>_#= title =#_</td>

<td>_#= designation =#_</td>

<td>_#= blood =#_</td>

<td>_#= email =#_</td>

<td>_#= mobile =#_</td>

</tr>

</div>

</body>

</html>

Upload the display template under Site Settings – > Master page and page layouts -> Display Templates -> Content Web Parts.


bind list data jquery content search web part
bind list data jquery content search web part

Now going to insert some data into Employee details list from authoring site collection.

bind list data jquery content search web part sharepoint 2013
bind list data jquery content search web part sharepoint 2013

Run the search service application Crawl now.

Now, let’s go to SharePoint page.

Add a Content Search Web Part into this page.

how to bind list data jquery content search web part sharepoint 2016
how to bind list data jquery content search web part sharepoint 2016

Map a search query to get the result from the authoring site collection.

Click Edit Web Part -> change query.
URL: http://technologygeeks/sites/authoring/Lists/Employee%20details

content search webpart sharepoint 2016
content search webpart sharepoint 2016

Provide number of items to display.

content search webpart sharepoint 2013 jquery
content search webpart sharepoint 2013 jquery

Choose the display templates.

content search webpart sharepoint 2013 jquery bind table
content search webpart sharepoint 2013 jquery bind table

Click OK. Under property mapping section, map the managed properties of the Employee name, Employee designation, Employee ID, Employee designation, Blood group, Email, and Mobile.

bind data table jquery sharepoint 2013
bind data table jquery sharepoint 2013

Click OK to complete the setup.

The following is the final result.

bind data table jquery sharepoint 2016 cswp
bind data table jquery sharepoint 2016 cswp

Provide Employee name for search

bind data table jquery sharepoint online cswp
bind data table jquery sharepoint online cswp

Read some Microsoft Azure tutorials



Note:
The result has been displayed using Search Service. You need to run the Search Service application. After adding the content into the SharePoint list, the result will be successfully displayed into the page.
Datatable Reference: https://datatables.net/

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials: