Using jQuery DataTable In SharePoint 2013

Vinodh Narayanan

17 Comments

Join the conversation! Your thoughts help the community grow.

Rinu8y ago
Is it possible to add, Update and delete operation in to it?
- Vinodh Narayanan8y ago
  Yes, you can implement Edit/Delete operations
- Nawaidur Rahman8y ago
  Can you show sir urgent
Raja Sekar9y ago
Thanks for Sharing...
- Vinodh Narayanan9y ago
  Thanks Raja Sekar follow me for more
- Vinodh Narayanan9y ago
  Once again thanks for your valuable comment
Vinodh Narayanan11y ago
Deepak Solanki Ya it's possible to apply grouping in jquery datatables
Vinodh Narayanan11y ago
Deepak Solanki Thanks a lot
Deepak Solanki11y ago
very nice, can we apply grouping here?
Vinodh Narayanan11y ago
Prasham Sabadra Thanks a lot ssir
Prasham Sabadra11y ago
Nice article. Thanks for sharing!!!
Vinodh Narayanan11y ago
Harshad Pansuriya Thanks
Harshad Pansuriya11y ago
Nice one
Vinodh Narayanan11y ago
Thank you Vignesh Mani
Vignesh Mani11y ago
Nice
Vinodh Narayanan11y ago
Thanks a lot Nilesh Jadav
Nilesh Jadav11y ago
Good One

In this article I have explained using jQuery DataTable in SharePoint 2013

jQuery DataTable is easy to add search, Paging, sorting on HTML table

Open a SharePoint 2013 team site

Create a list and add some data into it

Open Visual Studio -> SharePoint 2013 empty project and Add a visual webpart

Download the jQuery references & CSS

Now download these references and add into the SharePoint Layouts Folder

Datatable.ascx

<script src="../_layouts/15/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="../_layouts/15/jquery.dataTables.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../_layout/15/jquery.dataTables.min.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('#mydata').dataTable({
});
});
</script>
<table id="mydata" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>
Employee Designation
</th>
<th>
Employee Name
</th>
</tr>
</thead>
<tbody>
<asp:Repeater ID="rptdatatable" runat="server">
<ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "Title") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "EmployeeName") %>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>

Now bind the data into repeater control

DataTable.ascx.cs (full code)

Now going to deploy the project

Final result

Just search the record