Click here to Skip to main content
12,350,451 members (24,838 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: ASP.NET jQuery
Hello Code Project guys,

I am banging my head integrating this jquery datatables to my asp.net gridview. it looks like it is not possible. But before i surrender i just want to ask people here if this stuff is possible.

Link for Jquery Datatables

http://www.datatables.net/usage/[^]

My greatest roadblock is this
<script type="text/javascript" charset="utf-8">
       $(document).ready(function() {
           $('.myclass').dataTable();   --> i have tried the id of the gridview and also tried the client id $('#<%= GridView2.ClientID %>').dataTable(); but that doesn't solve the issue.
       });
    </script>
I have tried it work on html tables but not on asp.net controls. it works in asp.net repeater because html table is present. but not with the gridview.

any thoughts guys?

Thanks
Posted 9-Oct-11 6:17am
Edited 9-Oct-11 9:11am
DaveAuld187K
v4
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

Hello

Thanks for the answer. But grid view automatically becomes a table tag full of tr and td   once rendered on a HTML page.

once rendered this jquery tag should work $('#ID of the grid.ClientID').dataTable();

do you have any thoughts for that?

thanks
  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 3

Hi
From last couple of days, I had been thinking of the solution for the same problem. And I came up with an helper plugin idea that made gridview to work with dataTable plugin. Please visit below link
GridviewFix jQuery plugin[^]

Hope it will help you.

Thanks
Rupesh Kumar Tiwari
  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 4

Is simple,
in the code behind put this code:

Protected Sub gvReport_PreRender(sender As Object, e As System.EventArgs) Handles gvReport.PreRender
    If gvReport.Rows.Count > 0 Then
        gvReport.UseAccessibleHeader = True
        gvReport.HeaderRow.TableSection = TableRowSection.TableHeader
    End If
End Sub

And before, in the client side code put this:
$(document).ready(function(){
    $('.dataTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "iDisplayLength": 25,
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "Todo"]]
    });
});
  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 5

u should mixed it up using Repeater control.

e.g:
<table id="datatable">
<thead>
 <table><tbody><tr><th>head1 </th> .... </tr></tbody></table>
</thead>
<tbody>
<asp:repeater id="rp1" runat="server" xmlns:asp="#unknown">
<itemtemplate>
<table><tbody><tr><td>item 1</td> ... </tr></tbody></table>
...
<table><tbody><tr><td>item n</td> ... </tr></tbody></table>
</itemtemplate>
</asp:repeater>
<table><tbody>
</tbody></table></tbody></table>
then call it like this
$(function(){
$('#datatable).dataTable({});
});

should be working out
  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

Hi,

In my View it is not possible I guess.

reason is already you said in your post.grid has no table tag .

without table tag how it performs javascript actions in grid.

you 've to try another way for your requirement.

All the Best
  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 6

Here is the solution.. that can help some one...
Out Put :

http://i49.tinypic.com/f9il41.jpg

Coding :
http://www.reddyinfosoft.blogspot.in/2012/12/aspnet-gridview-pagination-client-side.html[^]
  Permalink  
v4

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.160621.1 | Last Updated 11 Dec 2012
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100