I'm trying to use jsTableSorter plug-in with Blue theme. Unfortunately following code doesn't apply the style. Would you please help me to locate the issue.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://i56.servimg.com/u/f56/18/49/06/85/pcicon10.png" />
<title>
PokéClub! Ranking
</title>
<link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/5sckq157asnl68z/pcranking.css" />
<link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/799k8f76ukikxa8/style.css" />
<script type="text/javascript" src="http://dl.dropboxusercontent.com/s/5c8cuzcww0bjua4/jquery-latest.js"></script>
<script type="text/javascript" src="http://dl.dropboxusercontent.com/s/2gbxvhkskdsch5p/jquery.tablesorter.js"></script>
<script type="text/javascript">
var jsonData = JSON.stringify([{
trainer: "CLBGM",
win: 9,
loss: 13
}, {
trainer: "Galakthor",
win: 26,
loss: 18
}, {
trainer: "JOOY",
win: 20,
loss: 21
}, {
trainer: "Matiaz98",
win: 18,
loss: 12
}, {
trainer: "PokeCraftMariano",
win: 16,
loss: 14
}, {
trainer: "Rockemc",
win: 23,
loss: 17
}]);
var ScoreTable = (function () {
function scoreTable(trainer, win, loss) {
this.position = '';
this.trainer = trainer;
this.win = win;
this.loss = loss;
this.battles = this.win + this.loss;
this.winrate = this.win / this.battles;
this.rating = this.win * 7 - this.loss * 3;
}
return scoreTable;
})();
function getColumn(value) {
return $('<td>' + value + '</td>');
}
function addRow(item) {
var row = $("<tr />");
$("tbody").append(row);
row.append(getColumn(item.position));
row.append(getColumn(item.trainer));
row.append(getColumn(item.battles));
row.append(getColumn(item.win));
row.append(getColumn(item.loss));
row.append(getColumn((item.winrate * 100).toFixed(0) + '%'));
row.append(getColumn(item.rating));
}
function populate(data) {
for (var i = 0; i < data.length; i++) {
var item = new ScoreTable(data[i].trainer, data[i].win, data[i].loss);
addRow(item);
}
}
$(document).ready(function () {
method1Parse();
//method2Ajax();
sort();
});
function method1Parse() {
var parsedData = $.parseJSON(jsonData);
populate(parsedData);
}
function method2Ajax() {
// jsFiddle handles AJAX requests differently (returns the value that you sent) you may find more details in http://doc.jsfiddle.net/use/echo.html
$.ajax({
url: '/echo/json/',
type: "post",
dataType: "json",
data: {
json: jsonData,
delay: 1
},
success: function (data) {
populate(data);
}
});
}
$.tablesorter.addWidget({
id: "numbering",
format: function(table) {
var c = table.config;
$("tr:visible", table.tBodies[0]).each(function(i) {
$(this).find('td').eq(0).text(i + 1);
});
}
});
function sort() {
$('table').tablesorter({
// *** APPEARANCE ***
// Add a theme - try 'blackice', 'blue', 'dark', 'default'
// 'dropbox', 'green', 'grey' or 'ice'
// to use 'bootstrap' or 'jui', you'll need to add the "uitheme"
// widget and also set it to the same name
// this option only adds a table class name "tablesorter-{theme}"
theme: 'default',
// fix the column widths
widthFixed: false,
// Show an indeterminate timer icon in the header when the table
// is sorted or filtered
showProcessing: false,
// header layout template (HTML ok); {content} = innerHTML,
// {icon} = <i/> (class from cssIcon)
headerTemplate: '{content}',
// return the modified template string
onRenderTemplate: null, // function(index, template){ return template; },
// called after each header cell is rendered, use index to target the column
// customize header HTML
onRenderHeader: function (index) {
// the span wrapper is added by default
$(this).find('div.tablesorter-header-inner').addClass('roundedCorners');
},
// *** FUNCTIONALITY ***
// prevent text selection in header
cancelSelection: true,
// other options: "ddmmyyyy" & "yyyymmdd"
dateFormat: "mmddyyyy",
// The key used to select more than one column for multi-column
// sorting.
sortMultiSortKey: "shiftKey",
// key used to remove sorting on a column
sortResetKey: 'ctrlKey',
// false for German "1.234.567,89" or French "1 234 567,89"
usNumberFormat: true,
// If true, parsing of all table cell data will be delayed
// until the user initializes a sort
delayInit: false,
// if true, server-side sorting should be performed because
// client-side sorting will be disabled, but the ui and events
// will still be used.
serverSideSorting: false,
// *** SORT OPTIONS ***
// These are detected by default,
// but you can change or disable them
// these can also be set using data-attributes or class names
headers: {
// set "sorter : false" (no quotes) to disable the column
0: {
sorter: false
},
1: {
sorter: "text"
},
2: {
sorter: "digit"
},
3: {
sorter: "digit"
},
4: {
sorter: "digit"
},
5: {
sorter: "digit"
},
6: {
sorter: "digit"
}
},
// ignore case while sorting
ignoreCase: true,
// forces the user to have this/these column(s) sorted first
sortForce: null,
// initial sort order of the columns, example sortList: [[0,0],[1,0]],
// [[columnIndex, sortDirection], ... ]
sortList: [
[6, 1],
],
// default sort that is added to the end of the users sort
// selection.
sortAppend: null,
// starting sort direction "asc" or "desc"
sortInitialOrder: "asc",
// Replace equivalent character (accented characters) to allow
// for alphanumeric sorting
sortLocaleCompare: false,
// third click on the header will reset column to default - unsorted
sortReset: false,
// restart sort to "sortInitialOrder" when clicking on previously
// unsorted columns
sortRestart: true,
// sort empty cell to bottom, top, none, zero
emptyTo: "bottom",
// sort strings in numerical column as max, min, top, bottom, zero
stringTo: "max",
// extract text from the table - this is how is
// it done by default
textExtraction: {
1: function (node) {
return $(node).text();
}
},
// use custom text sorter
// function(a,b){ return a.sort(b); } // basic sort
textSorter: null,
// *** WIDGETS ***
// apply widgets on tablesorter initialization
initWidgets: true,
// include zebra and any other widgets, options:
// 'columns', 'filter', 'stickyHeaders' & 'resizable'
// 'uitheme' is another widget, but requires loading
// a different skin and a jQuery UI theme.
widgets: ['numbering', 'zebra', 'columns'],
widgetOptions: {
// zebra widget: adding zebra striping, using content and
// default styles - the ui css removes the background
// from default even and odd class names included for this
// demo to allow switching themes
// [ "even", "odd" ]
zebra: [
"ui-widget-content even",
"ui-state-default odd"],
// uitheme widget: * Updated! in tablesorter v2.4 **
// Instead of the array of icon class names, this option now
// contains the name of the theme. Currently jQuery UI ("jui")
// and Bootstrap ("bootstrap") themes are supported. To modify
// the class names used, extend from the themes variable
// look for the "$.extend($.tablesorter.themes.jui" code below
uitheme: 'jui',
// columns widget: change the default column class names
// primary is the 1st column sorted, secondary is the 2nd, etc
columns: [
"primary",
"secondary",
"tertiary"],
// columns widget: If true, the class names from the columns
// option will also be added to the table tfoot.
columns_tfoot: true,
// columns widget: If true, the class names from the columns
// option will also be added to the table thead.
columns_thead: true,
// filter widget: If there are child rows in the table (rows with
// class name from "cssChildRow" option) and this option is true
// and a match is found anywhere in the child row, then it will make
// that row visible; default is false
filter_childRows: false,
// filter widget: If true, a filter will be added to the top of
// each table column.
filter_columnFilters: true,
// filter widget: css class applied to the table row containing the
// filters & the inputs within that row
filter_cssFilter: "tablesorter-filter",
// filter widget: Customize the filter widget by adding a select
// dropdown with content, custom options or custom filter functions
// see http://goo.gl/HQQLW for more details
filter_functions: null,
// filter widget: Set this option to true to hide the filter row
// initially. The rows is revealed by hovering over the filter
// row or giving any filter input/select focus.
filter_hideFilters: false,
// filter widget: Set this option to false to keep the searches
// case sensitive
filter_ignoreCase: true,
// filter widget: jQuery selector string of an element used to
// reset the filters.
filter_reset: null,
// Delay in milliseconds before the filter widget starts searching;
// This option prevents searching for every character while typing
// and should make searching large tables faster.
filter_searchDelay: 300,
// Set this option to true if filtering is performed on the server-side.
filter_serversideFiltering: false,
// filter widget: Set this option to true to use the filter to find
// text from the start of the column. So typing in "a" will find
// "albert" but not "frank", both have a's; default is false
filter_startsWith: false,
// filter widget: If true, ALL filter searches will only use parsed
// data. To only use parsed data in specific columns, set this option
// to false and add class name "filter-parsed" to the header
filter_useParsedData: false,
// Resizable widget: If this option is set to false, resized column
// widths will not be saved. Previous saved values will be restored
// on page reload
resizable: true,
// saveSort widget: If this option is set to false, new sorts will
// not be saved. Any previous saved sort will be restored on page
// reload.
saveSort: true,
// stickyHeaders widget: css class name applied to the sticky header
stickyHeaders: "tablesorter-stickyHeader"
},
// *** CALLBACKS ***
// function called after tablesorter has completed initialization
initialized: function (table) {},
// *** CSS CLASS NAMES ***
tableClass: 'tablesorter',
cssAsc: "tablesorter-headerSortUp",
cssDesc: "tablesorter-headerSortDown",
cssHeader: "tablesorter-header",
cssHeaderRow: "tablesorter-headerRow",
cssIcon: "tablesorter-icon",
cssChildRow: "tablesorter-childRow",
cssInfoBlock: "tablesorter-infoOnly",
cssProcessing: "tablesorter-processing",
// *** SELECTORS ***
// jQuery selectors used to find the header cells.
selectorHeaders: '> thead th, > thead td',
// jQuery selector of content within selectorHeaders
// that is clickable to trigger a sort.
selectorSort: "th, td",
// rows with this class name will be removed automatically
// before updating the table cache - used by "update",
// "addRows" and "appendCache"
selectorRemove: "tr.remove-me",
// *** DEBUGING ***
// send messages to console
debug: true
});
// Extend the themes to change any of the default class names ** NEW **
$.extend($.tablesorter.themes.jui, {
// change default jQuery uitheme icons - find the full list of icons
// here: http://jqueryui.com/themeroller/ (hover over them for their name)
table: 'ui-widget ui-widget-content ui-corner-all', // table classes
header: 'ui-widget-header ui-corner-all ui-state-default', // header classes
icons: 'ui-icon', // icon class added to the <i> in the header
sortNone: 'ui-icon-carat-2-n-s',
sortAsc: 'ui-icon-carat-1-n',
sortDesc: 'ui-icon-carat-1-s',
active: 'ui-state-active', // applied when column is sorted
hover: 'ui-state-hover', // hover class
filterRow: '',
even: 'ui-widget-content', // even row zebra striping
odd: 'ui-state-default' // odd row zebra striping
});
}
</script>
</head>
<body>
<div id="wrap">
<table id="dataTable" class="tablesorter">
<thead>
<tr>
<th>Position</th>
<th>Trainer</th>
<th>Battles</th>
<th>Wins</th>
<th>Losses</th>
<th>Win Rate</th>
<th>Rating</th>
</tr>
</thead>
<tbody id="dataTableBody"></tbody>
</table>
</div>
<a id="regresar" href="http://www.pokeclub.net/forum">Regresar al Foro</a>
<noscript>Parece que tu navegador no soporta JavaScript! Actívalo para poder visualizar está página ;)</noscript>
</body>
</html>
.......................................................................................
Your jQuery is v1.4.2 and your tableSorter version is 2.05b and your CSS has many missing parts. Here is the solution if you do not really need to work with those versions.
replace following lines
<link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/799k8f76ukikxa8/style.css" />
<script type="text/javascript" src="http://dl.dropboxusercontent.com/s/5c8cuzcww0bjua4/jquery-latest.js"></script>
<script type="text/javascript" src="http://dl.dropboxusercontent.com/s/2gbxvhkskdsch5p/jquery.tablesorter.js"></script>
with
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.1/css/theme.blue.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.1/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.1/jquery.tablesorter.widgets.min.js"></script>
and this one
theme: 'default',
with
theme: 'blue',
just pointed the latest versions from a CDN and changed the theme name as it points out in comment.