How to Use DataTable.js in SharePoint webpart

Kaarthikeya 10/31/2014 04:33:00 am Leave a Comment
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

SharePoint 2010
SharePoint

0 comments:

Post a Comment