[RESOLVED]Using jQuery DataTables with Web Forms pages, TypedDataSet?

HI,

I’m working on a ASP.NET web app that was built 6 years ago, using Web Forms, Data Access Layer, TypedDataSet.

Now, we got a new UI design, and my task is to apply the new UI to the existing application, keep all the same logic working without change.

The new Ui on some pages requires me to use jQuery datatables – for which I know how to write data from ViewModels to the Razor view; but I don’t know how to:

1) Take an existing .aspx file, and add jQuery dataTables to it? e.g. right now we use a lot of <asp:GridView> – how do I convert this into jQuery dataTable?

2) In the code behind, there are code like below to retrieve data from the DB – do I need to make any change to it so that a Jquery datatable can be fed this data?

OrderDataSet.aCustomerRow customer = OrderDB.GetCustomer(OrderDB.SessionCustomer.CustomerID);

If anyone can point me to a post with sample code, pr provide some sample code on how to make the above work, I’d appreciate it very much.

Ideally I hope that I do not need to make any change to the DataAccessLayer; just need to somehow put the data from being displayed in <asp:GridView> to be displayed in jQuery dataTable…..is it doable?

Any advice is appreciated!

Claudia

you can actually apply the DataTable to the gridview.  You will need to set the Table Section for the gridview first like such:

gridview.HeaderRow.TableSection = TableRowSection.TableHeader
gridview.FooterRow.TableSection = TableRowSection.TableFooter

Then you can just call in docReady:

$(".gridviewstyle").DataTables();

Hi clauida888,

 Let me tell you that, if you are using jQuery Datatable Client side, you need to do nothing. Just you have to refer your your HTML table with jQuery Datatable as follows . I have shown you the example on how to create Datatable in one of your post. 

 $(document).ready(function () {
        $('#myTable').DataTable({
             //optional parameters to suit you needs like table size, title, paging style, language options for internationalization etc
            });
    });

Hi Claudia,

Thanks for your post.

claudia888

1) Take an existing .aspx file, and add jQuery dataTables to it? e.g. right now we use a lot of <asp:GridView> – how do I convert this into jQuery dataTable?

You could refer to this article which will show you how to use jQuery DataTables plug-in.

 

claudia888

2) In the code behind, there are code like below to retrieve data from the DB – do I need to make any change to it so that a Jquery datatable can be fed this data?

If you use an array of objects, the file on the server side should be a JSON file. For more information, you could check “AJAX data source” in the above article. Besides, if you’d like to enable Server-side processing, you could refer to the following link.

Hope it will be helpful to you.

Best Regards,

Fei Han

Thanks Han Fei!

I’m preparing for a task and will apply this in 2 weeks. I think you have provided the info I need; so I will mark this as answer now.

I’m really looking for some sample code of how to turn a <asp:GridView> into using jQuery DataTable – can you provide such example?

If so, that’d be great!

Thanks,

Claudia

Leave a Reply