The Orbit Notebook Software Architecture, Development and Design Thoughts

12Feb/1014

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

Okay, here's the story. About three months ago, I started designing and developing a website for a client which allows Real Estate Agents to (among other things), purchase home warranties for their clients.  A chief business requirement for this site was the ability for an agent to have a central "sandbox" from which they can view, drill-down, convert, sort, and search their warranties. This "sandbox" was best represented as a grid - but how would I make an ASP.NET
GridView/Repeater/DataGrid perform all of these functions without handwriting a metric ton of custom code?

That's where the jQuery DataTables plug-in came to the rescue.  And this thing is sweet.  I've demo'd the functionality several times for my clients, and they go crazy over the quick and seamless searching, sorting and ordering. No postbacks!  I look like a hero.  Little do they know.

When I was starting out with DataTables, I found their documentation sparse and hard to follow. Then I tried some googling for a tutorial of DataTables with ASP.NET and found little to nothing. So, I decided to throw a very quick and simple tutorial together.

Okay, to get started with DataTables, you'll need to navigate to the DataTables website, and download the latest version.  This files come wrapped in a .zip file, containing the jQuery script libraries, the DataTables script libraries, some default stylesheets and some sample code. Note: I'm working with the DataTables version 1.6.1 in this tutorial, so these examples may become outdated with future versions.

Unzip the file to an easy-to-remember location and open up Visual Studio 2008.  Let's fire up a brand new website, by selecting File > New > Web Site.  We'll make this a "File System" website, so choose a location and click "OK".

New Web Site

You'll see that this default website has a default page, a web.config file, and that's about it.  And that's close to all we're going to need, for this tutorial.

Let's go ahead and pull our DataTables files that we downloaded into the project.  In the Solution Explorer, right-click on the project name and select "New Folder".  Name the new folder "DataTables".  Now, go unzip the DataTables .zip file that we downloaded, drill-down to the "media" directory and copy the contents of this directory into the new folder we created.  You should be copying a "css" folder, an "images" folder, and a "js" folder into our new "DataTables" folder.  Skip the "unit_testing" folder, as I won't be covering that in this tutorial.  Your Solution Explorer should look like the following:

Still with me?  Good!  My plan is for us to use an ASP.NET repeater as the data structure, and we'll lay the DataTables on top of the repeater.  So, let's click through to our code-behind and build a quick-and-dirty data structure that we can bind to our Repeater.  In the Solution Explorer, right-click on Default.aspx and choose "View Code".

Since I'm a big movie buff, I figured we'd build a list of a few of the 2009 Oscar Best Picture nominated movies, and some minor details about each.

In the codebehind (outside of the _Default class), create a new class or struct and call it "BestPictureNominee". Here's what the code for this class will look like:



public class BestPictureNominee
{
    public string MovieTitle { get; set; }
    public string LeadingActor { get; set; }
    public string LeadingActress { get; set; }
    public string Director { get; set; }
}


Okay, back to our Page_Load event. Instantiate the new class and set it's properties. We'll use a generic List<> as our collection class, since it's simple to use and databind. So, here's my Page_Load event, so far:



protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        List nominees = new List();

        BestPictureNominee slumdog = new BestPictureNominee()
        {
            MovieTitle = "Slumdog Millionaire",
            LeadingActor = "Dev Patel",
            LeadingActress = "Freida Pinto",
            Director = "Danny Boyle"
        };
        nominees.Add(slumdog);

        BestPictureNominee benjamin = new BestPictureNominee()
        {
            MovieTitle = "The Curious Case of Benjamin Button",
            LeadingActor = "Brad Pitt",
            LeadingActress = "Cate Blanchett",
            Director = "David Fincher"
        };
        nominees.Add(benjamin);

        BestPictureNominee milk = new BestPictureNominee()
        {
            MovieTitle = "Milk",
            LeadingActor = "Sean Penn",
            LeadingActress = "Alison Pill",
            Director = "Gus Van Sant"
        };
        nominees.Add(milk);
    }
}


So we've got a web project, our DataTables files, and a bindable list of our data, all ready for our UI. In Part II, we'll create the XHTML markup in our .aspx page, add the jQuery DataTable function, and finally, bind the data in our codebehind. Stay tuned - I should have it posted in the next day or so!

Update: Here's the link to Part II.

Comments (14) Trackbacks (0)
  1. Dev Patel gave a great performance in the movie Slumdog Millionaire.~*:

  2. thax a lot…can u tell me the above with database connectivity

  3. I am very thankful to this topic because it really gives useful information ~”

  4. Hello, I like your article very much, I translated it to Chinese and post it into my blog. the url is http://www.girlcoding.com/2011/02/asp-dot-net-datatables-one/, if you don’t like it ,please tell me ,I will delete it. thanks very much!

  5. Excellent Superb Awesome post.. The example you have given is so good for beginners that even a blind can understnd very well.

    Thanks.

    Happy Programming :)

  6. Nice post we were looking forit I noticed that you will be an expert at the field! I am launching a web site soon & your details will be very helpful for me Thanks for your help & wish all of you the success inside your business.

  7. Outstanding, its a breath of fresh air reading logical posts, many thanks and keep up the good work !!

  8. It’s really useful for me which i’ve ever seen.Its presented well and also nicely written which clear and understandable.Thanks to you for your info.

  9. This blog post is an inspiration personally to discover out much more concerning this topic. I must admit your clarity widened my sentiments as well as I’ll right now grab your rss feed to stay updated on any new articles you might possibly produce. You are worthy of many thanks regarding a job perfectly done!

  10. hey..I tried this in mvc3 it is not working..plz help

  11. Great blog keep up the good work!

  12. I see it asked a couple times but I see no definitive answer. How would you go about sorting when you have columns that are are mixed between int and string? Converting with .ToString() doesn’t sort properly.

  13. good article easy to learn for a beginner..thank u

  14. It will be easy if we use jQuery DataTables plug-in for fully functional tables with pagination, sorting, filtering. It perform 3 tier structure of Model-View-Controller.


Leave a comment

(required)

No trackbacks yet.