SharePoint  

Using jQuery DataTable In SharePoint 2013

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


Membership not found