After flipping to the Roll Your Own tab, you'll see that there are settings for fonts, colors, corners, headers, and so on. Make whatever adjustments you'd like to get the theme looking just the way you'd like. Feel free to play and experiment. If you go too far and get to something you don't like, it's easy to flip back to the Gallery tab and select the prebuilt theme again, stripped of any of your customizations, then start again.

Keep in mind that any of your customizations will be lost if you re-select a prebuilt theme. Once you get something you like, be sure to move on to step 3 to save it.

Since we're only here for a theme, we can go ahead and click on the Deselect all components link near the top of the page.

You can read up on styling the DataTables plugin in the documentation Allan Jardine has made available at http://datatables.net/styling/.

Back inside the DataTables plugin files, look inside the css folder inside the media folder to find the demo_table_jui.css file. Copy that to your own styles folder and update your <link> tag to link to this version of the demo_table.css instead as follows:

<link rel="stylesheet" href="styles/cupertino/jquery-ui-1.8.16.custom.css"/>
<link rel="stylesheet" href="styles/demo_table_jui.css"/>

$(document).ready(function(){
$('#book-grid').dataTable({
'bJQueryUI': true
});
});

If you refresh the page in the browser now, you'll see that the data grid is now using a style that's consistent with the widgets we saw on the jQuery UI Themeroller page:

tr.odd {
background-color: #f1f7fb;
}
tr.even {
background-color: white;
}

I'm going with a pale blue for odd rows and white for even rows to match the Cupertino style I selected earlier. Feel free to choose colors that match your own chosen theme.

tr.even td.sorting_1 {
background-color: #e4eff8;
}

You can select your own colors that coordinate with your own chosen theme.

Now, if you refresh the page in the browser, you'll see that the zebra-striping pattern of the table fits with our Themeroller theme.

$(document).ready(function(){
$('#book-grid').dataTable({
'sPaginationType': 'full_numbers',
'bJQueryUI': true,
'bFilter': false
});
});

Refresh the page in the browser and you'll see that the search box is gone.

$(document).ready(function(){
$('#book-grid').dataTable({
'sPaginationType': 'full_numbers',
'bJQueryUI': true,
'bFilter': false,
'aaSorting': [[4, 'desc']]
});
});

The key we're using is called 'aaSorting', and the value is the column number and sort direction inside two sets of square brackets. Don't forget that JavaScript starts counting at 0, not 1. So the fifth column in our table is actually column 4. Then, we want the highest number at the top, so we pass 'desc' for descending order.

Refresh the page in the browser and you'll see that the books are now in order from highest sales to lowest sales. Note also that this default sort order doesn't affect your site visitor's ability to sort the table by any of the other columns in any order they'd like. The site visitor can still interact with your table. We're just re-defining the default view in a way that makes the most sense for the data we're presenting.