Theming Tables Using jQuery UI

Theming tables with jQuery UI

by markallgood

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css "></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/redmond/jquery-ui.css">
<table id="myTable" border="1">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 0 Column 0</td>
        <td >Row 0 Column 1</td>
        <td >Row 0 Column 2</td>
    </tr>
    <tr >
        <td>Row 1 Column 0</td>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr >
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
   ...

JavaScript

$(document).ready(function () {
    var tableRowCount = 150;
    var tableColumnCount = 5;
    var $tablebody = $("table#myTable tbody").empty();
    var $tableheader = $("table#myTable thead tr").empty();
    var $tablefooter = $("table#myTable tfoot tr").empty();
    
    for (i = 1; i <= tableColumnCount; i++) {
        $("<th>Column " + i + "</th>").appendTo($tableheader);
        $("<th>Total " + i + "</th>").appendTo($tablefooter);
    }
    for (i = 1; i <= tableRowCount; i++) {
         var $row = $("<tr />").appendTo($tablebody);
         for (j = 1; j <= tableColumnCount; j++) {
             $("<td>Row " + i + " Column " + j + "</td>").appendTo($row);
         }
    }
    $("table#myTable").dataTable({
        "bJQueryUI": true, 
        "sPaginationType": "full_numbers"
    });
});