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

  1. <script src="../_layouts/15/jquery-1.11.3.min.js" type="text/javascript"></script>
  2. <script src="../_layouts/15/jquery.dataTables.min.js" type="text/javascript"></script>
  3. <link rel="stylesheet" href="../_layout/15/jquery.dataTables.min.css" type="text/css" />
  4. <script type="text/javascript">
  5. $(document).ready(function () {
  6. $('#mydata').dataTable({
  7. });
  8. });
  9. </script>
  10. <table id="mydata" class="display" cellspacing="0" width="100%">
  11. <thead>
  12. <tr>
  13. <th>
  14. Employee Designation
  15. </th>
  16. <th>
  17. Employee Name
  18. </th>
  19. </tr>
  20. </thead>
  21. <tbody>
  22. <asp:Repeater ID="rptdatatable" runat="server">
  23. <ItemTemplate>
  24. <tr>
  25. <td>
  26. <%# DataBinder.Eval(Container.DataItem, "Title") %>
  27. </td>
  28. <td>
  29. <%# DataBinder.Eval(Container.DataItem, "EmployeeName") %>
  30. </td>
  31. </tr>
  32. </ItemTemplate>
  33. </asp:Repeater>
  34. </tbody>
  35. </table>

Now bind the data into repeater control

DataTable.ascx.cs (full code)

  1. using Microsoft.SharePoint;
  2. using System;
  3. using System.ComponentModel;
  4. using System.Web.UI.WebControls.WebParts;
  5. namespace Jquery_datatable.DataTable
  6. {
  7. [ToolboxItemAttribute(false)]
  8. public partial class DataTable : WebPart
  9. {
  10. public DataTable()
  11. {
  12. }
  13. protected override void OnInit(EventArgs e)
  14. {
  15. base.OnInit(e);
  16. InitializeControl();
  17. }
  18. protected void Page_Load(object sender, EventArgs e)
  19. {
  20. SPWeb web = SPContext.Current.Web;
  21. SPList list = web.Lists["Employee"];
  22. SPListItemCollection items = list.Items;
  23. rptdatatable.DataSource = items.GetDataTable();
  24. rptdatatable.DataBind();
  25. }
  26. }
  27. }

Now going to deploy the project

Final result

Just search the record