jQuery Data Tables Web Part for SharePoint 2013 is an implementation of the popular datatables jQuery plugin in a SharePoint web part with List data. In this post we will be creating a web part which contains a repeater control that binds data from a SharePoint list and renders the necessary table structure required for datatables.
jQuery Data Tables
If you are totally new to jQuery data tables, to have a better idea on what I am talking about, checkout the documentation available at the project site datatables.net . The below are some of the key features of datatables.
On the fly filtering
Flexible Pagination
Multi column sorting
Automatic column width management
Multiple plugin support for editing and formatting etc…
Design and Coding
Before starting the design and coding part, download jQuery and datatables from their respective sites. To have some sample data to work on, lets create a new custom list in SharePoint to store some State and City names. Create a new list named as "Indian Cities" and add a new column named "City" with data type single line of text, in addition to the the default title column. I have renamed the title column to "State". The below is the screen shot of list settings.
Add some sample data to the newly created list so that we would be able to try out filter , sorting options etc..
Now open the visual studio 2012 and create a new SharePoint 2013 project. Add reference to jQuery, datatable scripts and css and make necessary changes in the module to deploy the assets into style library. The scripts and CSS are not mandatorily to be provisioned to style library, it can also be provisioned to 15 hive as well. The below is the structure of my project after adding the scripts and CSS.
Add a new visual web part and paste the below code to create a repeater control. Add reference to jQuery, datatables and style sheet. To learn more on referring scripts and css in a SharePoint 2013 Visual Web part check out this article.
<SharePoint:ScriptLink ID="ScriptLink1" Name="~SiteCollection/Style Library/Scripts/jquery.js" runat="server" />
<SharePoint:ScriptLink ID="ScriptLink2" Name="~SiteCollection/Style Library/Scripts/jquery.dataTables.min.js" runat="server" />
<script>
$(document).ready(function () {
$('#cityList').dataTable({
/* Disable initial sort */
"aaSorting": []
});
});
</script>
<table id="cityList" class="display" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>States
</th>
<th>Cities</th>
</tr>
</thead>
<tbody>
<asp:Repeater runat="server" ID="rep1">
<ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "Title") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "City") %>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
Edit the .cs file and paste the below code. CSS registration and data binding are performed in the code behind file.
public IndianCities()
{
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
InitializeControl();
}
protected void Page_Load(object sender, EventArgs e)
{
BindData();
}
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
base.Render(writer);
writer.Write(RenderStyles());
}
private string RenderStyles()
{ // Change the below code to SPContext.Current.Site.Web.Url if you want to refer from the current web
string href = SPContext.Current.Site.RootWeb.Url + "/Style Library/Styles/datatable.css";
StringBuilder sb = new StringBuilder();
sb.AppendLine(@"<link rel=""stylesheet"" href=""" + href + @""" type=""text/css"" />");
return sb.ToString();
}
private void BindData()
{
SPList list = SPContext.Current.Web.Lists["Indian Cities"];
rep1.DataSource = list.Items.GetDataTable();
rep1.DataBind();
}
Build and deploy the solution.Now you are good to go.The below are some of the screen shots of final Out Put
1. Default View
2. Sorted By State
3. Sorted by City
4. Search
Leave a comment