Page numbers not displaying - php

Question

Anyone have any idea why my page numbers are not listing inside of the pagination div? I'm using the tablesorter.pager plugin.
<?php
session_start();
require("../inc/dbconfig.php");
require("../inc/global_functions.php");
// find out how many rows are in the table
$query = "SELECT CONCAT_WS(' ',firstName,lastName) AS name, username, emailAddress, userID FROM manager_users WHERE statusID != 4";
$result = mysqli_query($dbc,$query);
$fileName = basename($_SERVER['PHP_SELF']);
$pageName = "User Accounts";
$userData = $_SESSION['user_data'];
$userID = $userData['userID'];
?>
<script type="text/javascript">
$(document).ready(function() {
$('a.bt_green').click(function(e) {
e.preventDefault();
$('div.right_content').load('forms/addnew/' + $(this).attr('id'));
});
$('#usersPageList').tablesorter().tablesorterPager({container:$('#pagination'),cssPageLinks:'a.pageLink', positionFixed: false});
$('table tr').click(function() {
checkBox = $(this).children('td').children('input[type=checkbox]');
if(checkBox.attr('checked'))
checkBox.removeAttr('checked');
else
checkBox.attr('checked', 'checked');
});
$('.ask').jConfirmAction();
$('.ask2').jConfirmAction();
});
</script>
<h2>User Accounts</h2>
<table id="usersPageList" class="rounded-corner">
<thead>
<tr>
<th scope="col" class="rounded-first"></th>
<th scope="col" class="rounded">Name</th>
<th scope="col" class="rounded">Email Address</th>
<th scope="col" class="rounded">Username</th>
<th scope="col" class="rounded">Edit</th>
<th scope="col" class="rounded-last">Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" class="rounded-foot-left"><em>Displays all of the registered and verified users!</em></td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
<tbody>
<?php
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
echo "<tr>";
echo "<td><input type=\"checkbox\" name=\"users[]\" value=\"".$row['userID']."\"/></td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['emailAddress']."</td>";
echo "<td>".$row['username']."</td>";
echo "<td><img src=\"images/user_edit.png\" alt=\"\" title=\"\" border=\"0\" /></td>";
echo "<td>";
if (($row['userID'] !== '10000') && ($row['userID'] !== $userID)){
echo "<img src=\"images/trash.png\" class=\"delete\" alt=\"\" title=\"\" border=\"0\" id=\"".$row['userID']."\" />";
}
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<div id="pagination"></div>
<?php
addRemove($fileName,$pageName);
?>
<input type="hidden" name="myhiddenPageToken" id="myhiddenPageToken" value="useraccounts" />
EDIT POST:
<script type="text/javascript">
$(document).ready(function() {
$('a.bt_green').click(function(e) {
e.preventDefault();
$('div.right_content').load('forms/addnew/' + $(this).attr('id'));
});
$('#usersPageList').tablesorter().tablesorterPager({container:$('#pagination'),cssPageLinks:'a.pageLink', positionFixed: false});
$('table tr').click(function() {
checkBox = $(this).children('td').children('input[type=checkbox]');
if(checkBox.attr('checked'))
checkBox.removeAttr('checked');
else
checkBox.attr('checked', 'checked');
});
$('.ask').jConfirmAction();
$('.ask2').jConfirmAction();
});
</script>
<h2>User Accounts</h2>
<table id="usersPageList" class="rounded-corner">
<thead>
<tr>
<th scope="col" class="rounded-first"></th>
<th scope="col" class="rounded">Name</th>
<th scope="col" class="rounded">Email Address</th>
<th scope="col" class="rounded">Username</th>
<th scope="col" class="rounded">Edit</th>
<th scope="col" class="rounded-last">Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" class="rounded-foot-left"><em>Displays all of the registered and verified users!</em></td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
<tbody>
<tr><td><input type="checkbox" name="users[]" value="10000"/></td><td>KOW Management</td><td>kowmanagement#kansasoutlawwrestling.com</td><td>Administrator</td><td><img src="images/user_edit.png" alt="" title="" border="0" /></td><td></td></tr><tr><td><input type="checkbox" name="users[]" value="10001"/></td><td>Jeff Davidson</td><td>xtremer360#yahoo.com</td><td>xtremer360</td><td><img src="images/user_edit.png" alt="" title="" border="0" /></td><td></td></tr>
</tbody>
</table>
<div id="pagination"></div>
<span class="bt_green_lft"></span><strong>Add New User Accounts</strong><span class="bt_green_r"></span><span class="bt_blue_lft"></span><strong>View all User Accounts</strong><span class="bt_blue_r"></span><span class="bt_red_lft"></span><strong>Delete User Accounts</strong><span class="bt_red_r"></span><input type="hidden" name="myhiddenPageToken" id="myhiddenPageToken" value="useraccounts" />

Answer 1

For the tablesorterPager plugin to work in your code I had to add a pagination form myself. I changed the pagination div to this, copied from the documentation:
<div id="pagination">
<form>
<img src="../addons/pager/icons/first.png" class="first"/>
<img src="../addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="../addons/pager/icons/next.png" class="next"/>
<img src="../addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
The tablesorterPager now works, and also fixes the tablesorter which breaks if tablesorterPager can't find the form.
I can't see any reference in jquery.tablesorter.pager.js to generate the form itself, so I guess you'll have to create it server-side based on the number of results in the table, and the number of results you'd like per page.
Hope that helps