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

• https://code.jquery.com/jquery-1.11.3.min.js
• https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js
• https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.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)

using Microsoft.SharePoint;
using System;
using System.ComponentModel;
using System.Web.UI.WebControls.WebParts;
namespace Jquery_datatable.DataTable
{
    [ToolboxItemAttribute(false)]
    public partial class DataTable : WebPart
    {
        public DataTable()
        {
        }
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            InitializeControl();
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            SPWeb web = SPContext.Current.Web;
            SPList list = web.Lists["Employee"];
            SPListItemCollection items = list.Items;
            rptdatatable.DataSource = items.GetDataTable();
            rptdatatable.DataBind();
        }
    }
}

Now going to deploy the project

Final result

Just search the record