Asp.net Gridvew integration with Jquery Datatables

Question

0.00/5 (No votes)

See more:

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

HTML

<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

Mico Perez

Updated 9-Oct-11 9:11am

DaveAuld

v4

Add a Solution

6 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Mico Perez · Answer 1 · 2011-10-10T23:42:00

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

Posted 10-Oct-11 23:42pm

Mico Perez

Rupesh Kumar Tiwari · Answer 2 · 2011-10-11T09:40:00

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

Posted 11-Oct-11 9:40am

Rupesh Kumar Tiwari

jherax · Answer 3 · 2012-04-26T12:05:00

Is simple,
in the code behind put this code:

VB

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:

JavaScript

$(document).ready(function(){
    $('.dataTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "iDisplayLength": 25,
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "Todo"]]
    });
});

gadasadox · Answer 4 · 2012-07-18T18:29:00

u should mixed it up using Repeater control.

e.g:

ASP.NET

<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

JavaScript

$(function(){
$('#datatable).dataTable({});
});

should be working out

Muralikrishna8811 · Answer 5 · 2011-10-10T23:32:00

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

Posted 10-Oct-11 23:32pm

Muralikrishna8811

varaprasadreddy.bh · Answer 6 · 2012-12-10T08:36:00

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[^]

Posted 10-Dec-12 8:36am

varaprasadreddy.bh

Updated 11-Dec-12 4:41am

v4