Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello ,
i am trying to implement jquery datatable to my gridview but it dosen't seems to work.

<head id="Head1"  runat="server">
    <title></title>
    <link href="js/datatable/css/jquery.dataTables_themeroller.css" rel="stylesheet"
        type="text/css" />
    <script src="js/datatable/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#GridView1').dataTable();
        });
    </script>
</head>
<body>
    <form id="form1"  runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="AccountNrId" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="AccountNrId" HeaderText="AccountNrId" 
                    InsertVisible="False" ReadOnly="True" SortExpression="AccountNrRecId" />
                <asp:BoundField DataField="ClientId" HeaderText="ClientId" 
                    SortExpression="ClientId" />
                <asp:BoundField DataField="AccountNr" HeaderText="AccountNr" 
                    SortExpression="AccountNr" />
                <asp:BoundField DataField="AccountNrDescription" 
                    HeaderText="AccountNrDescription" SortExpression="AccountNrDescription" />
                <asp:BoundField DataField="Date" HeaderText="Date" SortExpression="Date" />
               
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:TestingConnectionString %>" 
            SelectCommand="SELECT * FROM [AccountNrs]"></asp:SqlDataSource>
    </div>
    </form>
</body>    



what i get in result is a plain table. i have checked the reference of the scripts. they are all right. i am stuck
Posted
Comments
hypermellow 27-Oct-15 7:49am    
Assuming you have your GridView ID correct in your JavaScript, a couple of things to check. Does your GridView render thead and th elements correctly? ... and where is your reference to your jQuery library?
Riya-Pandey 27-Oct-15 7:58am    
Yes. Gridview Id is correct. And yes, it's rendering all the elements correctly.
hypermellow 27-Oct-15 8:08am    
Ok good, where is the reference to the jQuery library? ... I only see the dataTables.js file included, you also need the jQuery library.
Riya-Pandey 27-Oct-15 8:57am    
ok. I didn't add that but it's not working even after adding the reference.
hypermellow 27-Oct-15 9:53am    
... make sure you add the jQuery library before you add the dataTables.js.
What error is it throwing?

I thing it's not render due to missing
<thead>
element . So you can try this code

Java
$(function () {
   $("#GridView1").prepend( $("<thead></thead>").append($("#GridView1").find("tbody tr:first") ) ).dataTable();
});
 
Share this answer
 
v3
Comments
Riya-Pandey 27-Oct-15 9:18am    
not working. problem with syntax somewhere i think
Anil Sharma1983 28-Oct-15 0:49am    
please use this code for any gridview.its working fine.otherwise check browser console javascript error

$("#GridView1").prepend( $("<thead></thead>").append($("#GridView1").find("tbody tr:first") ) ).dataTable();
When you open developer console in your browser do you get any error?
I don't see any reference to jquery library in your code, could that be a problem?
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900