How do you implement jquery tablesorter.pager for datatable in salesforce?

New Edit: This issue is now resolved. There was a misspelling of tablesorterPager (cannot be spelled tableSorterPager!).

I have gotten the pagesorter to work, but I cannot get the pagesorter.pager to work after hours of researching and several approaches. The sorting works fine. But if I add the TableSorterPager script, the pagination does not work (always displays all rows) and on a rerender of that section of the page, the columns are no longer formatted (collapse to one right after the other) and the sorting capability is gone. Am I missing a file, or what detail is wrong? Thanks.

The key elements of the code are:

in the head:

    > <apex:includeScript 
    > value="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" /> 
    > <apex:includeScript 
    > value="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.18.4/js/jquery.tablesorter.min.js"
    > /> <apex:includeScript 
    > value="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.18.4/js/parsers/parser-input-select.js"
    > />    <apex:includeScript 
    >      value="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.18.4/addons/pager/jquery.tablesorter.pager.min.js"
    > />
<apex:includeScript
        value="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.18.4/addons/pager/jquery.tablesorter.pager.css" />

     <apex:stylesheet 
    > value="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.18.4/css/theme.blue.css"
    > />

the pageblock that contains the table (block is rerendered):

<apex:pageBlock id="block" >

        <script type="text/javascript">
            $j = jQuery.noConflict();  
            $j(document).ready(function()
            {
                $j("[id$='attendees']").tablesorter({
                    widthFixed: true,
                    widgets: ['zebra'],
                    theme: 'blue', 
                    headers: {
                        2: { sorter: 'select' }},
                    sortList: [[0,0],[1,0]]
                })
               .tableSorterPager({container: $j("#pager")});
            });
        </script>

other stuff in the block, then the dataTable:

<apex:dataTable value="{!displayedAttendances}" var="att" styleClass="tablesorter" id="attendees" >
                     <apex:column headerValue="Last Name">
                        <apex:outputField value="{!att.attendance.last_name__c}" />
                    </apex:column>
                    <apex:column headerValue="First Name">
                        <apex:outputField value="{!att.attendance.first_name__c}" />
                    </apex:column>
                    <apex:column headerValue="Status">
                        <apex:inputField value="{!att.attendance.status__c}" >
                            <apex:actionSupport event="onchange" action="{!att.changeStatus}" 
                                rerender="errs1, errs2, newSes, block" />
                        </apex:inputField>
                    </apex:column>
            </apex:dataTable>

the pager div:

<!-- Start controls for tablesorter Pager plugin -->
        <div id="pager" class="pager">
        <form>
         <img src="http://ift.tt/1CnhD1O" class="first"/> 
         <img src="http://ift.tt/1CnhD1Q" class="prev"/> 
         <input type="text" class="pagedisplay"/>
         <img src="http://ift.tt/168lTEf" class="next"/> 
         <img src="http://ift.tt/1CnhBHe" class="last"/> 
         Display
         <select class="pagesize">
            <option selected="selected"  value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
         </select>
         records per page
         </form>
        </div>
        <!-- end controls for tablesorter Pager plugin -->