Okay this deals with javascript and css so didn't know which to put it into but it looks like more people post/reply in here so this is what I went with. I had a data table with the same styling template file. However I wanted to implement a tablesorter and pagination plugin of jquery and did so successfully. I have a working version of both however I'm trying to figure out if I need to edit the contentpages.php page or the tablesorter_pager.js file.

My page (click on Content Pages under the Site Admin Heading on the left and view the data table in the content div on the right)
http://defiantwrestling.net/efedmanager/index

Template file
http://defiantwrestling.net/efedmanager/titanium.html


contentpages.php
PHP Code:
<?php
    
// Include the database page
    
include ('../inc/dbconfig.php');
    
    
$query "SELECT CONCAT_WS(' ', firstname, lastname) AS name, DATE_FORMAT(contentpages.datecreated, '%M %d, %Y') AS datecreated, contentpages.id, contentpagename, contentpageshortname FROM contentpages, handlers WHERE handlers.id = contentpages.creator_id";
    
$result mysqli_query $dbc$query ); // Run The Query
    
$rows mysqli_num_rows($result);
    
    
$itemsPerPage 10;
    
$pages ceil$rows $itemsPerPage );
?>

<script>
   $(document).ready(function() {
        $('a', $('div#addform')).click(function() {
            $('#innerContent').load('forms/' + $(this).attr('id') + '.php');
        });
        
        
        // Add the table sorter and table paginator plugins
        $('#contentPageList')
            .tablesorter() 
            .tablesorterPager( {
                container: $( '#contentPageList .paginate' ),
                cssPageLinks: 'a.pageLink'
            } ); 
        
    });
</script>

<!-- Title -->
<div id="title" class="b2">
    <h2>Content Pages</h2>
    <!-- TitleActions -->
    <div id="titleActions">
        <!-- ListSearch -->
        <div class="listSearch actionBlock">
            <div class="search">
                <label for="search">Content Pages</label>
                <input type="text" name="search" id="search" class="text" />
            </div>
            <div class="submit">
                <button type="submit" id="search-button" class="button"><strong><img src="img/icons/search_48.png" alt="search" class="icon "/></strong></button>
            </div>
        </div>
        <!-- /ListSearch -->
        <!-- newPost -->
            <div id="addform" class="addNew actionBlock">
                <a href="#" id="contentpage" class="button"><strong>Add New Content Page<img src="img/icons/add_48.png" alt="add new" class="icon "/></strong></a>
            </div>
        <!-- /newPost -->
    </div>
    <!-- /TitleActions -->
</div>
<!-- Title -->

<!-- Inner Content -->
<div id="innerContent">

    <!-- ListHeader -->
    <div id="listHeader">
        <p class="listInfos">
            You have <?php echo $rows?> content pages.
        </p>
        <div class="listActions">
            <form action="" method="post">
                <label for="actionSelect">With selected items: </label>
                <select class="select" name="actionSelect" id="actionSelect">
                    <option>Edit</option>
                    <option>Delete</option>
                </select>
                <button class="button small-button"><strong>Apply</strong></button>
            </form>
        </div>
    </div>
    <!-- /ListHeader -->
    
    
    <!-- ListTable -->
    <?php if ($rows 0) { ?>
        <table cellspacing="0" class="listTable" id="contentPageList">
            <!-- Thead -->
            <thead>
                <tr>
                    <th class="first"><div></div></th>
                    <th><a href="#" title="Page Name">Page Name</a></th>
                    <th><a href="#" title="Page Short Name">Page Short Name</a></th>
                    <th><a href="#" title="Creator">Creator</a></th>
                    <th class="last"><a href="#" title="Date Created">Date Created</a></th>
                </tr>
            </thead>
            <!-- /Thead -->
            
            <!-- Tfoot -->
            <tfoot>
                <tr>
                    <td colspan="5">
                        <div class="inner">
                            <div class="paginate">
                                <?php
                                    
if( $pages ) {
                                        for( 
$i 1$i <= $pages$i++ ) {
                                            echo 
'<span style="padding-left: 5px; padding-right: 5px;"><a class="pageLink" href="#">' $i '</a></span>';
                                        }
                                    }
                                
?>
                            </div>
                        </div>
                    </td>
                </tr>
            </tfoot>
            <!-- /Tfoot -->
            
            <!-- Tbody -->
            <tbody>
                <?php 
                    
while ( $row mysqli_fetch_array $resultMYSQL_ASSOC ) ) {
                      echo 
'
                      <tr>
                      <td><input type=checkbox class=checkbox value="' 
$row['id'] . '" /></td>
                      <td><a href=# title="' 
$row['contentpagename'] . '">' $row['contentpagename'] . '</a></td>
                      <td>' 
$row['contentpageshortname'] . '</td>
                      <td>' 
$row['name'] . '</td>
                      <td class=last>' 
$row['datecreated'] . '</td>
                      </tr>'
;
                    }
                
?>
            </tbody>
            <!-- /Tbody -->
        </table>
    <?php ?>
    <!-- /ListTable -->

</div>
<!-- /Inner Content -->
tablesorter.pages.js
Code:
(function($) {
   $.extend({
      tablesorterPager: new function() {
         
         function updatePageDisplay(c) {
            var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);   
         }
         
         function setPageSize(table,size) {
            var c = table.config;
            c.size = size;
            c.totalPages = Math.ceil(c.totalRows / c.size);
            c.pagerPositionSet = false;
            moveToPage(table);
            fixPosition(table);
         }
         
         function fixPosition(table) {
            var c = table.config;
            if(!c.pagerPositionSet && c.positionFixed) {
               var c = table.config, o = $(table);
               if(o.offset) {
                  c.container.css({
                     top: o.offset().top + o.height() + 'px',
                     position: 'absolute'
                  });
               }
               c.pagerPositionSet = true;
            }
         }
         
         function moveToFirstPage(table) {
            var c = table.config;
            c.page = 0;
            moveToPage(table);
         }
         
         function moveToLastPage(table) {
            var c = table.config;
            c.page = (c.totalPages-1);
            moveToPage(table);
         }
         
         function moveToNextPage(table) {
            var c = table.config;
            c.page++;
            if(c.page >= (c.totalPages-1)) {
               c.page = (c.totalPages-1);
            }
            moveToPage(table);
         }
         
         function moveToPrevPage(table) {
            var c = table.config;
            c.page--;
            if(c.page <= 0) {
               c.page = 0;
            }
            moveToPage(table);
         }
                  
         
         function moveToPage(table) {
            var c = table.config;
            if(c.page < 0 || c.page > (c.totalPages-1)) {
               c.page = 0;
            }
            
            renderTable(table, c.rowsCopy);
         }
         
         function renderTable(table,rows) {
            var c = table.config;
            var l = rows.length;
            var s = (c.page * c.size);
            var e = (s + c.size);
            if(e > rows.length ) {
               e = rows.length;
            }
            
            var tableBody = $(table.tBodies[0]);
            
            // clear the table body
            $.tablesorter.clearTableBody(table);
            
            for(var i = s; i < e; i++) {
               //tableBody.append(rows[i]);
               
               var o = rows[i];
               var l = o.length;
               for(var j=0; j < l; j++) {
                  tableBody[0].appendChild(o[j]);
               }
            }
            
            fixPosition(table,tableBody);
            $(table).trigger("applyWidgets");
            if( c.page >= c.totalPages ) {
                 moveToLastPage(table);
            }
            updatePageDisplay(c);
         }
         
         this.appender = function(table,rows) {
            var c = table.config;
            
            c.rowsCopy = rows;
            c.totalRows = rows.length;
            c.totalPages = Math.ceil(c.totalRows / c.size);
            
            renderTable(table,rows);
         };
         
         this.defaults = {
            size: 10,
            offset: 0,
            page: 0,
            totalRows: 0,
            totalPages: 0,
            container: null,
            cssNext: '.next',
            cssPrev: '.prev',
            cssFirst: '.first',
            cssLast: '.last',
            cssPageDisplay: '.pagedisplay',
            cssPageSize: '.pagesize',
            cssPageLinks: 'a.pageLink',  // extension setting
            seperator: "/",
            positionFixed: false,  // defaulting this to false.  original value is true.
            appender: this.appender
         };
         
         this.construct = function(settings) {
            return this.each(function() {
               config = $.extend(this.config, $.tablesorterPager.defaults, settings);
               
               var table = this,
                   pager = config.container;
            
               $(this).trigger("appendCache");
               
               var $pageSizeEl = $( ".pagesize", pager );
               if( $pageSizeEl.length > 0 )
                  config.size = parseInt( $pageSizeEl.val() );
               
               $(config.cssFirst,pager).click(function() {
                  moveToFirstPage(table);
                  return false;
               });
               $(config.cssNext,pager).click(function() {
                  moveToNextPage(table);
                  return false;
               });
               $(config.cssPrev,pager).click(function() {
                  moveToPrevPage(table);
                  return false;
               });
               $(config.cssLast,pager).click(function() {
                  moveToLastPage(table);
                  return false;
               });
               $(config.cssPageSize,pager).change(function() {
                  setPageSize(table,parseInt($(this).val()));
                  return false;
               });
               
               // Extension code
               $( config.cssPageLinks, pager ).first().parent().addClass( 'current' ); // add the "currently selected" class to the first link
               
               $( config.cssPageLinks, pager ).click( function() {
                  var $el = $(this);
                  
                  // Remove the "current" (selected) class from all links,
                  // and then add it to the one that was just clicked.
                  $( config.cssPageLinks, pager ).parent().removeClass( 'current' );
                  $el.parent().addClass( 'current' );
                  
                  table.config.page = parseInt( $el.html() ) - 1;
                  moveToPage( table );
                  
                  return false;
               } );
            });
         };
         
      }
   });
   
   // extend plugin scope
   $.fn.extend({
        tablesorterPager: $.tablesorterPager.construct
   });
   
})(jQuery);