tablesorter column issue
Column displays correctly in jsFiddle, but not from nodeJS
by JC Wren
HTML
<link rel="stylesheet" href="http://mottie.github.io/tablesorter/css/theme.jui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<table id="stageTable">
<thead>
<tr>
<th>Stage #</th>
<th>Stage Name</th>
<th>Scoring</th>
<th>Strings</th>
<th>Classifier</th>
<th>No-Shoots</th>
<th>Steel</th>
<th>Paper</th>
<th>Type</th>
<th>NPMs</th>
<th>Hits</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Boxy Edge</td>
<td>Comstock</td>
<td>1</td>
<td>--</td>
<td>Yes</td>
<td>20</td>
<td>2</td>
<td>Metric</td>
<td>0</td>
<td>26</td>
<td>130</td>
</tr>
<tr>
<td>2</td>
<td>Ace Of Clubs</td>
<td>Comstock</td>
<td>1</td>
<td>--</td>
<td>Yes</td>
<td>8</td>
<td>0</td>
<td>Steel</td>
<td>0</td>
<td>8</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>Paper Poppers</td>
<td>Comstock</td>
<td>1</td>
<td>03-05</td>
<td>No</td>
<td>6</td>
<td>2</td>
<td>Metric</td>
<td>0</td>
<td>10</td>
<td>50</td>
</tr>
<tr>
<td>4</td>
<td>Steel It</td>
<td>Comstock</td>
...
CSS
body {
font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
}
table.mlinks {
font-family: Arial, Sans-Serif;
text-align: center;
width: auto;
margin: 0 auto;
border-collapse: separate;
border: none;
}
table.mlinks td {
border: none;
padding-left: 20px;
padding-right: 20px;
}
#popup {
background-color: #fff;
border-radius: 15px;
color: #000;
display: none;
padding: 20px;
}
#popup-content {
display: inline-block;
text-align: center;
}
#popup-content-stagename {
}
#popup-content-stageextra {
}
.no-close .ui-dialog-titlebar-close {
display: none;
}
#stageMessage {
text-align: center;
}
.tablesorter {
font-size: 1.0em !important;
text-align: center;
width: auto !important;
margin: 0 auto !important;
white-space: nowrap;
}
.tablesorter .tablesorter-header {
white-space: nowrap;
}
.tablesorter .tablesorter-filter {
width: 50px;
}
JavaScript
$.extend($.tablesorter.themes.jui, {
table: 'ui-widget ui-widget-content ui-corner-all',
caption: 'ui-widget-content ui-corner-all',
header: 'ui-widget-header ui-corner-all ui-state-default',
footerRow: '',
footerCells: '',
icons: 'ui-icon',
sortNone: 'ui-icon-carat-2-n-s',
sortAsc: 'ui-icon-carat-1-n',
sortDesc: 'ui-icon-carat-1-s',
active: 'ui-state-active',
hover: 'ui-state-hover',
filterRow: '',
even: 'ui-widget-content',
odd: 'ui-state-default'
});
$('#stageTable th').attr('data-placeholder', '[All]');
$('#stageTable').tablesorter({
theme: 'jui',
widthFixed: false,
headerTemplate: '{content} {icon}',
sortList: [
[0, 0]
],
emptyTo: 'none',
widgets: ['saveSort', 'filter', 'uitheme', 'zebra'],
widgetOptions: {
saveSort: true,
zebra: ['even', 'odd'],
filter_hideFilters: true,
filter_functions: {
2: true, // Scoring
5: true, // No shoots
8: true // Type
}
}
});