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
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!