The Orbit Notebook Software Architecture, Development and Design Thoughts

12Nov/1032

ASP.NET and jQuery DataTables – The Basics, Part II

Okay, we left off having coded our data object, which will store our Oscar nominees. Now, here's where it gets fun. Let's add some markup to the .aspx page and get this thing running. First, add our link to the default stylesheet and our jquery javascript files into the section of the XHTML:


So, our links are in place, now let's add the Repeater. Keep in mind, the magic of jQuery DataTables lies in the fact that they will operate on any HTML tables. In fact, their website states that DataTables, "add advanced interaction controls to any HTML table". So, we're going to embed a table into our Repeater. I'm guessing most of you (if you've read this far) have worked with Repeaters and tables before, so I'm going to post the code, and you'll see the table structure embedded right into the Repeater. You'll want to place this code inside of the

and specifically, inside of a

.

Movie Lead Actor Lead Actress Director
     

As you can see, our column names are within   tags, and our databound elements are within   tags. The DataTables library will take care of being the brains of this operation. Speaking of the DataTables, now would be a good time to add the actual jQuery code to the section of this document. In fact, place the following code directly underneath our This code launches the DataTable functionality against our "tblOscarNominees" table, and even sets a few properties. In case you were wondering, the "oLanguage and sSearch" properties allow us specify our search bar text. The "iDisplayLength" property sets the default number of rows displayed, and the "aaSorting" property allows us to set the default sort column. If you check the DataTables website, there are tons of configurable properties for this plug-in. Okay, last but not least, we need to databind our Repeater. Pop back over to the Default.aspx.cs codebehind class. Directly below the code where we added "Milk" to our list of nominees, we need to set the datasource and databind the repeater:

  rptOscarNominees.DataSource = nominees; rptOscarNominees.DataBind();  

Build the website and run it. Your page should pop, and it should look just like this:

Go ahead, enter something in the search field. No postback! Sort the columns. Quick and easy. Paginating with no custom code. This plug-in would have saved me countless hours a few years ago. I love it.

Now, keep in mind, this is a very simple example, just to help you get your hands around the technology. But using this example, you can tweak the stylesheet to pretty up the table, and use the concept in your own day-to-day development. Hopefully, with this amazing plug-in, you can be a hero for your clients, too. Cheers!

Comments (32) Trackbacks (1)
  1. Everything dynamic and very positively! :)
    Edwas

  2. Awesome little tutorial! Exactly what I was looking for thanks!!!

  3. Very Hepful… :)

  4. Thanks a lot! I converted the code to VB.Net but this was fast and straight to the point! Worked perfectly. Appreciated.

  5. Nice tutorial….I am looking for a tutorial on editing the data and Updating it on Server. Did not find any end-to-end tutorial on that..Could you please help me with some link.. ??..Thanks.

  6. Hi,

    It seems that we have to bind the data to the repeater at server side only.
    Again for paging and sorting as you said no postback happens but then how it will bind the data.
    It has to go to the server side to fetch the data and sort it then get the data as pagesize and bind it to the repeater.
    How exactly it works? like in jtemplate i saw the binding happens in client side only.

  7. This tutorial helps out a ton. Thanks!!

  8. working and faster

  9. Nice tutorial i have a GridView with autoGenerateColumns property set to true, i want to be able to align the date and numeric columns to the right, do u have an idea of how can i achieve this?

  10. Superb post! Just what I was looking for. No need to make it more complicated then this! Thanks a lot!

  11. A great simple into to using DataTables in an ASP.NET app. I think I’m sold on using DataTables!

  12. What I have understood, all data are fetched from database(Server side), then Datatables(jq) allow us to manipulate data. However, I am not sure that it is a good method in case that there is a lot of datarows.

    This example is just approptiate to show a less amount of data. In order to fetch the thousands rows, what could be used ?

  13. I am really very happy to see this tutorial on your website. I have done paging, searching and sorting in gridview using jquery it was really good. But I am little bit confuse because I don’t see here a link button which leads us to the next page. Please send me the code to add the next page button.

  14. awesome tutorial, thanks man.

  15. Thank You, Thank You, Thank You… I downloaded the scripts hours ago and was unable to get it to work, since the creater demo’d in PHP. And no one until I found you’re blog had a simple ASP.Net version. You may call me lazy but I love simple and short coding. Got what I needed with my listView with three simple lines…

    List _customers = DataModel.LoadCustomerData();
    ListView1.DataSource = _customers;
    ListView1.DataBind();

  16. Excellent post, does it work with gridview?? i have tried and i have some problems with the plugin, has anyone tried it??

  17. Thanks, wonderful post. This is what i needed to start with. Let me get some hands on this!!!!!

  18. This tutorial is very good for me.

  19. Hey man! thank you very much! I’ve been stuck for 1 day just to look up for possible solutions to my problem.. and then I came up with this, and finally my problem is solved! Thanks!

  20. Very lame. You are just creating an html table with ASP.NET, and letting the script work as it was intended to do. No added value.

  21. Thank you so much. Very helpful for me.

  22. Wow! great with data tables. Thanks on this article.

  23. thank you!!! :)

  24. Hi All
    I’ve been trying to get DataTables to work using ASP.NET4 using VS2010 and I do not get what you guys get. I’m a nuby at JavaScript and I might be doing something stupid, but here goes.

    I put the Scripts and Links in My Master Page as well and everything in “Part I” of this tutorial in a new page that inherits from master page. I get the data declared in my new page, but Nothing about Sorting or searching. I do however see that my cursor is changing when I hover over the over the column name, but nothing happens when I clicking. am I missing something here?

  25. Love Datatables. Nice Example

  26. actually great…..but i have a simple question…,,,,, could i bind the datasource through the javascript code intead of doing it from the behind code or server script.

  27. very useful………

  28. nice tutorial

  29. Good tutorial,

    Is it possible to post some more features of the datatables or is there any link available in the internet

    Thanks a lot

  30. Thanks for the great tutorial!


Leave a comment