Using jQuery DataTable In SharePoint 2013

0
478
views

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

Please follow and like us:
0

LEAVE A REPLY

Please enter your comment!
Please enter your name here