Notes

  • This widget will only work in tablesorter version 2.24.0+ and jQuery version 1.7+.
  • When it's done building the view 'viewComplete' will be tiggered
  • {coln} will be replaced with the row/coln value wrapped by a span that has the classes/attributes of the original unless :raw is use, then the text value of row/coln will be used. ie: {col0:raw}

Options

TIP! Click on the link in the function column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
Option Default Description
'#ts-view-toolbar' Element to insert toolbar (view buttons) into.

This option allows you to select which element the view buttons will be injected into.
'#ts-view' Element to insert the view into.

This option allows you to select which element the view will be injected into.
'#ts-view-caption' Element to copy the tabel caption into curing views.

This option allows you to select which element to copy thre caption into during views.
'ts-view-switcher' Class name to be added to all view buttons.

Name of the class to be added to all view buttons.

* Note * Just put in the name of the class do NOT put a . in front of it.
false Default view to display on startup.

Default view to display on startup, false means none. The value must be an object in view_layouts.
{ 'view': { <options> } } List of available layouts and it's options.

In this object you setup each view.
  • icon - This is the class for the view button
  • title - Title of this view
  • container - Wrapper node for this view
  • tpml - HTML layout for this view, {coln} will be replaced with the value in that col n
  • raw - This is in case you want the raw table data, container and tpml are ignored when raw is true.

View Demo

Our Products
PN Name Description Price
default thumb 001-10001 Widget 1 This is Widget 1, it's nice soft and unique. 19.99
default thumb 001-10002 Widget 2 This is Widget 2, it's nice fluffy and unique. 1.99
on sale default thumb 001-10003 Widget 3 This is Widget 3, it's nice soft and unique. 89.99
default thumb 001-10004 Widget 4 This is Widget 4, it's nice soft and unique. I'ts also a little fluffy but not nice and fluffy. 49.99
on sale default thumb 001-10005 Widget 5 This is Widget 5, it's nice soft and unique. This one also have a unique smell and texture. Not for human consumption. 18.49
default thumb 001-10006 Widget 6 This is Widget 6, it's nice soft and unique. Nothing special here but I do want a longer description so I can see how things line up, or in this case don't line up. Oh but this is the only Widget we have in purple! 69.98
default thumb 001-10007 Widget 7 This is Widget 7, it's nice soft and unique. 4.99
default thumb 001-10008 Widget 8 This is Widget 8, it's nice soft and unique. 17.89
default thumb 001-10009 Widget 9 This is Widget 9, it's nice soft and unique. 17.49
default thumb 001-10010 Widget 10 This is Widget 10, it's nice soft and unique. 119.99
default thumb 001-10011 Widget 11 This is Widget 11, it's nice soft and unique. 18.88
default thumb 001-10012 Widget 12 This is Widget 12, it's nice soft and unique. 19.97
default thumb 001-10013 Widget 13 This is Widget 13, it's nice soft and unique. 9.98
default thumb 001-10014 Widget 14 This is Widget 14, it's nice soft and unique. 29.99
default thumb 001-10015 Widget 15 This is Widget 15, it's nice soft and unique. 44.95
default thumb 001-10016 Widget 16 This is Widget 16, it's nice soft and unique. 8.69
default thumb 001-10017 Widget 17 This is Widget 17, it's nice soft and unique. 17.99
default thumb 001-10018 Widget 18 This is Widget 18, it's nice soft and unique. 219.99
default thumb 001-10019 Widget 19 This is Widget 19, it's nice soft and unique. 1.98
default thumb 001-10020 Widget 20 This is Widget 20, it's nice soft and unique. 9.97

Page Header

<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>

<!-- Demo stuff -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/widgets/widget-view.js"></script>

<!-- Tablesorter: optional -->
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script src="../js/widgets/widget-filter.js"></script>
<script src="../js/widgets/widget-pager.js"></script>

Javascript


	


	
CSS

	

		

	


	
HTML