The Orbit Notebook Software Architecture, Development and Design Thoughts


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"

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

        BestPictureNominee milk = new BestPictureNominee()
            MovieTitle = "Milk",
            LeadingActor = "Sean Penn",
            LeadingActress = "Alison Pill",
            Director = "Gus Van Sant"

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.