How to Use DataTable.js in SharePoint webpart

Hi All,

In a following post we will see how to add sorting/search/pagination to GridView Control with DataTables.js

DataTables is the Plugin for the Jquery .It is a highly flexible tool and  free :-)
Just we need to add the reference of js to our webpart.

JS File Download Link:

https://sites.google.com/site/sharepointkitchenblog/jquery.dataTables.js

//adding js  reference file

<script src="/_catalogs/masterpage/JS/jquery.dataTables.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $('#<%=MyRequestGrid.ClientID%>').dataTable({

            "bJQueryUI": true,

            "sPaginationType": "full_numbers",

            "aaSorting": [[0, "desc"]]

        });

    });

</script>

Our Gridview is defined is as follows,

<asp:GridView runat="server" ID="MyRequestGrid" AutoGenerateColumns="false" CssClass="AdminView MyRequestGrid" OnRowDataBound="MyRequestGrid_RowDataBound" EmptyDataText="No Requests are Existed">

    <Columns>

                <asp:TemplateField HeaderText="Modified">

                    <ItemTemplate>

                        <asp:Label ID="lblModifiedDate" runat="server" Text='<%#Eval("Modified","{0:dd/MM/yyyy}") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField HeaderText="Order No">

                    <ItemTemplate>

                        <asp:Label runat="server" ID="lblID" Text='<%#Eval("colName") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:BoundField HeaderText="Username" DataField="User_x0020_Name" />

                <asp:TemplateField HeaderText="Submit Date">

                    <ItemTemplate>

                        <asp:Label ID="lblDate" runat="server" Text='<%#Eval("SubmitDate","{0:dd/MM/yyyy}") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

               

            </Columns>

            

</asp:GridView>

When we are using DataTables.js , table structure need to be perfect like,
<table>
   <thead>
      ---
   </thead>
   
   <tbody>
     ----
   </tbody>
</table>

Generally ,when we are using GridView we will not get the above structure. So after binding data to gridview we need to enable header Section . For that use the below.

MyRequestGrid.UseAccessibleHeader = true;

MyRequestGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

You Can find More Interesting Examples from below link.
http://www.datatables.net/examples/index

Thanks .

Related Post