# tablesorter

## View Widget (beta)

### Flexible client-side table sorting

Back to documentation

### 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
--- | --- | ---
view_toolbar | '#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.
view_container | '#ts-view' | Element to insert the view into. This option allows you to select which element the view will be injected into.
view_caption | '#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.
view_switcher_class | '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.
view_layout | 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_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
--- | --- | --- | --- | ---
| 001-10001 | Widget 1 | This is Widget 1, it's nice soft and unique. | 19.99
| 001-10002 | Widget 2 | This is Widget 2, it's nice fluffy and unique. | 1.99
| 001-10003 | Widget 3 | This is Widget 3, it's nice soft and unique. | 89.99
| 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
| 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
| 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
| 001-10007 | Widget 7 | This is Widget 7, it's nice soft and unique. | 4.99
| 001-10008 | Widget 8 | This is Widget 8, it's nice soft and unique. | 17.89
| 001-10009 | Widget 9 | This is Widget 9, it's nice soft and unique. | 17.49
| 001-10010 | Widget 10 | This is Widget 10, it's nice soft and unique. | 119.99
| 001-10011 | Widget 11 | This is Widget 11, it's nice soft and unique. | 18.88
| 001-10012 | Widget 12 | This is Widget 12, it's nice soft and unique. | 19.97
| 001-10013 | Widget 13 | This is Widget 13, it's nice soft and unique. | 9.98
| 001-10014 | Widget 14 | This is Widget 14, it's nice soft and unique. | 29.99
| 001-10015 | Widget 15 | This is Widget 15, it's nice soft and unique. | 44.95
| 001-10016 | Widget 16 | This is Widget 16, it's nice soft and unique. | 8.69
| 001-10017 | Widget 17 | This is Widget 17, it's nice soft and unique. | 17.99
| 001-10018 | Widget 18 | This is Widget 18, it's nice soft and unique. | 219.99
| 001-10019 | Widget 19 | This is Widget 19, it's nice soft and unique. | 1.98
| 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