2015-10-26 15:06:56 +00:00
<!DOCTYPE html>
< html >
< head >
2016-01-10 22:24:57 +00:00
< meta charset = "utf-8" >
< title > jQuery tablesorter 2.0 - View Widget< / title >
2015-10-26 15:06:56 +00:00
<!-- jQuery -->
< script src = "js/jquery-latest.min.js" > < / script >
< script src = "js/jquery-ui.min.js" > < / script >
<!-- Demo stuff -->
2015-10-26 17:16:52 +00:00
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" >
2015-10-26 15:06:56 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "css/jquery-ui.min.css" >
< link rel = "stylesheet" href = "css/jq.css" >
< link rel = "stylesheet" href = "css/prettify.css" >
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<!-- <script src="js/bootstrap.min.js"></script> -->
<!-- Tablesorter: required -->
< link rel = "stylesheet" href = "../css/theme.blue.css" >
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
< script src = "../js/widgets/widget-pager.js" > < / script >
< script src = "../js/widgets/widget-filter.js" > < / script >
< script src = "../js/widgets/widget-view.js" > < / script >
< style >
h1 { font-size: 28px; }
/* override jQuery UI overriding Bootstrap */
.accordion .ui-widget-content a {
color: #337ab7;
}
/* .spacer in docs css is set to height:800px for stickyHeader demo */
#pager .spacer { height: auto; }
.wrapper { padding: 5px; }
2015-10-26 17:16:52 +00:00
/* override doc style; not sure why form > font-size: 10pt?! */
#pager form { font-size: 16px; }
.thumb { width: 135px; }
.part-number { width: 10%; }
.part-name { width: 10%; }
.part-price { width: 10%; }
2015-10-26 15:06:56 +00:00
< / style >
2015-10-26 17:16:52 +00:00
< style id = "css" > # d e m o {
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
color: #333;
2015-10-26 15:06:56 +00:00
}
#demo img {
2015-10-26 17:16:52 +00:00
border: 0;
2015-10-26 15:06:56 +00:00
}
#demo h1,
#demo h3 {
2015-10-26 17:16:52 +00:00
font-weight: normal;
line-height: 1em;
color: #545454;
letter-spacing: -0.04em;
padding: 0;
margin: 0;
text-decoration: none;
border: none !important;
white-space: nowrap;
2015-10-26 15:06:56 +00:00
}
#demo h1 {
2015-10-26 17:16:52 +00:00
font-size: 3em;
position: relative;
top: 8px;
2015-10-26 15:06:56 +00:00
}
#demo .filtered {
2015-10-26 17:16:52 +00:00
display: none !important;
2015-10-26 15:06:56 +00:00
}
#viewHeader {
2015-10-26 17:16:52 +00:00
position: relative;
height: 35px;
2015-10-26 15:06:56 +00:00
}
#viewHeader section.left {
2015-10-26 17:16:52 +00:00
display: block;
float: left;
width: 200px;
position: relative;
padding-left: 20px;
2015-10-26 15:06:56 +00:00
}
#viewHeader section.right {
2015-10-26 17:16:52 +00:00
display: block;
float: right;
margin-right: 10px;
width: 400px;
text-align: right;
2015-10-26 15:06:56 +00:00
}
.hasPrice:before {
2015-10-26 17:16:52 +00:00
content: attr(data-currencysym) " ";
2015-10-26 15:06:56 +00:00
}
.hasPrice:after {
2015-10-26 17:16:52 +00:00
content: " " attr(data-currencycode);
2015-10-26 15:06:56 +00:00
}
#pager {
2015-10-26 17:16:52 +00:00
width: 100%;
text-align: center;
font-size: 1.35em;
2015-10-26 15:06:56 +00:00
}
#tablesearch {
2015-10-26 17:16:52 +00:00
font-size: 1.5em;
2015-10-26 15:06:56 +00:00
}
#ts-view {
2015-10-26 17:16:52 +00:00
width 100%;
display: block;
2015-10-26 15:06:56 +00:00
}
#ts-view-toolbar {
2015-10-26 17:16:52 +00:00
display: inline-block;
2015-10-26 15:06:56 +00:00
}
.ts-view-switcher {
2015-10-26 17:16:52 +00:00
font-size: 24px;
color: #fff;
padding-left: 5px;
2015-10-26 15:06:56 +00:00
}
.ts-view-switcher:last-child {
2015-10-26 17:16:52 +00:00
padding-right: 15px;
2015-10-26 15:06:56 +00:00
}
.ts-view-switcher i,
.mybutton {
2015-10-26 17:16:52 +00:00
padding: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px #777;
box-shadow: 0 1px 2px 0 #777;
color: #fff;
text-transform: uppercase;
border: 0;
background: rgb(70, 74, 88);
background: -webkit-linear-gradient(top, rgba(70, 74, 88, 1) 0%, rgba(43, 47, 58, 1) 100%);
background: linear-gradient(to bottom, rgba(70, 74, 88, 1) 0%, rgba(43, 47, 58, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#464a58', endColorstr='#2b2f3a', GradientType=0);
2015-10-26 15:06:56 +00:00
}
.ts-view-switcher:hover i,
.mybutton:not(.nohover):hover {
2015-10-26 17:16:52 +00:00
background: rgb(252, 172, 94);
background: -webkit-linear-gradient(top, rgba(252, 172, 94, 1) 0%, rgba(221, 135, 49, 1) 100%);
background: linear-gradient(to bottom, rgba(252, 172, 94, 1) 0%, rgba(221, 135, 49, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fcac5e', endColorstr='#dd8731', GradientType=0);
2015-10-26 15:06:56 +00:00
}
.ts-view-switcher.active i,
.mybutton.active {
2015-10-26 17:16:52 +00:00
background: rgb(235, 181, 111);
background: -webkit-linear-gradient(top, rgba(235, 181, 111, 1) 0%, rgba(203, 145, 68, 1) 100%);
background: linear-gradient(to bottom, rgba(235, 181, 111, 1) 0%, rgba(203, 145, 68, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ebb56f', endColorstr='#cb9144', GradientType=0);
2015-10-26 15:06:56 +00:00
}
.mybutton {
2015-10-26 17:16:52 +00:00
margin-left: 8px;
padding: 8px;
width: 100px;
cursor: pointer;
2015-10-26 15:06:56 +00:00
}
2015-10-26 17:16:52 +00:00
/** list view **/
2015-10-26 15:06:56 +00:00
ul.list {
2015-10-26 17:16:52 +00:00
list-style: none;
width: 100%;
padding: 0;
padding-bottom: 10px;
2015-10-26 15:06:56 +00:00
}
ul.list li {
2015-10-26 17:16:52 +00:00
display: block;
background: #c9d0d1;
padding: 10px 15px;
2015-10-26 15:06:56 +00:00
}
ul.list li.odd {
2015-10-26 17:16:52 +00:00
background: #d7dfe0;
2015-10-26 15:06:56 +00:00
}
ul.list li section.left {
2015-10-26 17:16:52 +00:00
display: block;
float: left;
width: 70%;
position: relative;
padding-left: 20px;
2015-10-26 15:06:56 +00:00
}
ul.list li section.right {
2015-10-26 17:16:52 +00:00
display: block;
float: right;
margin-right: 10px;
width: 250px;
text-align: right;
2015-10-26 15:06:56 +00:00
}
ul.list li section.left img.thumb {
2015-10-26 17:16:52 +00:00
float: left;
margin-right: 10px;
width: 80px;
2015-10-26 15:06:56 +00:00
}
ul.list li section.left img.featured-banner {
2015-10-26 17:16:52 +00:00
position: absolute;
left: -18px;
top: -3px;
width: 100px;
2015-10-26 15:06:56 +00:00
}
ul.list li section.left h3 {
2015-10-26 17:16:52 +00:00
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
color: #707375;
font-size: 1.4em;
line-height: 1.6em;
2015-10-26 15:06:56 +00:00
}
ul.list li section.left span.meta {
2015-10-26 17:16:52 +00:00
color: #93989b;
font-weight: normal;
font-size: 1.1em;
2015-10-26 15:06:56 +00:00
}
ul.list li section.right span.price {
2015-10-26 17:16:52 +00:00
font-weight: bold;
display: block;
margin-bottom: 15px;
color: #ad3939;
font-size: 1.6em;
text-align: right;
2015-10-26 15:06:56 +00:00
}
ul.list li section.right a.firstbtn {
2015-10-26 17:16:52 +00:00
margin-right: 7px;
2015-10-26 15:06:56 +00:00
}
2015-10-26 17:16:52 +00:00
/** grid view **/
2015-10-26 15:06:56 +00:00
ul.grid {
2015-10-26 17:16:52 +00:00
list-style: none;
margin: 0 auto;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
display: block;
width: 680px;
2015-10-26 15:06:56 +00:00
}
ul.grid li {
2015-10-26 17:16:52 +00:00
position: relative;
display: inline-table;
width: 220px;
height: 200px;
border-right: 1px solid #b6bdbe;
padding: 5px 22px;
margin-bottom: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
2015-10-26 15:06:56 +00:00
}
ul.grid li:nth-child(3n+3) {
2015-10-26 17:16:52 +00:00
border: 0;
2015-10-26 15:06:56 +00:00
}
ul.grid li section.left {
2015-10-26 17:16:52 +00:00
position: relative;
2015-10-26 15:06:56 +00:00
}
ul.grid li section.right {
2015-10-26 17:16:52 +00:00
/* nothing */
2015-10-26 15:06:56 +00:00
}
ul.grid li section.left img.thumb {
2015-10-26 17:16:52 +00:00
margin: 0 18px;
width: 140px;
2015-10-26 15:06:56 +00:00
}
ul.grid li section.left img.featured-banner {
2015-10-26 17:16:52 +00:00
position: absolute;
top: -3px;
left: 16px;
2015-10-26 15:06:56 +00:00
}
ul.grid li section.left h3 {
2015-10-26 17:16:52 +00:00
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
color: #707375;
font-size: 1.4em;
line-height: 1.5em;
2015-10-26 15:06:56 +00:00
}
ul.grid li section.left span.meta {
2015-10-26 17:16:52 +00:00
display: block;
color: #93989b;
font-weight: normal;
font-size: 1.1em;
margin-bottom: 7px;
2015-10-26 15:06:56 +00:00
}
ul.grid li section.right span.price {
2015-10-26 17:16:52 +00:00
font-weight: bold;
display: block;
margin-bottom: 5px;
color: #ad3939;
font-size: 1.75em;
2015-10-26 15:06:56 +00:00
}
ul.grid li section.right span.darkview {
2015-10-26 17:16:52 +00:00
opacity: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 100%;
margin: 0 15px;
border-radius: 6px;
background: rgba(40, 45, 55, 0.75);
overflow: hidden;
text-align: center;
padding-top: 35px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
2015-10-26 15:06:56 +00:00
}
ul.grid li:hover section.right span.darkview {
2015-10-26 17:16:52 +00:00
opacity: 1;
2015-10-26 15:06:56 +00:00
}
ul.grid li section.right span.darkview a.firstbtn {
2015-10-26 17:16:52 +00:00
display: block;
margin-bottom: 10px;
2015-10-26 15:06:56 +00:00
}
2015-10-26 17:16:52 +00:00
/** clearfix **/
2015-10-26 15:06:56 +00:00
.clearfix:after {
2015-10-26 17:16:52 +00:00
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
2015-10-26 15:06:56 +00:00
}
.clearfix {
2015-10-26 17:16:52 +00:00
display: inline-block;
2015-10-26 15:06:56 +00:00
}
html[xmlns] .clearfix {
2015-10-26 17:16:52 +00:00
display: block;
2015-10-26 15:06:56 +00:00
}
* html .clearfix {
2015-10-26 17:16:52 +00:00
height: 1%;
2015-10-26 15:06:56 +00:00
}
2015-10-26 17:16:52 +00:00
< / style >
2015-10-26 15:06:56 +00:00
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > View Widget (beta)< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p > < / p >
< br >
< div id = "root" class = "accordion" >
< h3 id = "notes" > < a href = "#" > Notes< / a > < / h3 >
< div >
< ul >
2015-10-31 16:06:09 +00:00
< li > This widget will < strong > only work< / strong > in tablesorter version 2.24.0+ and jQuery version 1.7+.< / li >
2015-10-26 15:06:56 +00:00
< li > When it's done building the view 'viewComplete' will be tiggered< / li >
< / ul >
< / div >
< h3 id = "options" > < a href = "#" > Options< / a > < / h3 >
< div >
< div >
< span class = "label label-info" > TIP!< / span > Click on the link in the function column to reveal full details (or < a href = "#" class = "toggleAll" > toggle< / a > |< a href = "#" class = "showAll" > show< / a > |< a href = "#" class = "hideAll" > hide< / a > all) or double click to update the browser location.
< / div >
< table class = "options tablesorter-blue" >
< thead >
2015-10-26 17:16:52 +00:00
< tr >
< th class = "option" > Option< / th >
< th class = "defaults" > Default< / th >
< th class = "sorter-false" > Description< / th >
< / tr >
2015-10-26 15:06:56 +00:00
< / thead >
< tbody >
< tr id = "view-toolbar" >
< td > < a href = "#" class = "permalink" > view_toolbar< / a > < / td >
2016-01-10 22:24:57 +00:00
< td > '#ts-view-toolbar'< / td >
2015-10-26 15:06:56 +00:00
< td > Element to insert toolbar (view buttons) into.
< div class = "collapsible" >
< p > < / p >
This option allows you to select which element the view buttons will be injected into.
< / div >
< / td >
< / tr >
< tr id = "view-container" >
< td > < a href = "#" class = "permalink" > view_container< / a > < / td >
< td > '#ts-view'< / td >
< td > Element to insert the view into.
< div class = "collapsible" >
< p > < / p >
This option allows you to select which element the view will be injected into.
< / div >
< / td >
< / tr >
< tr id = "view-caption" >
< td > < a href = "#" class = "permalink" > view_caption< / a > < / td >
< td > '#ts-view-caption'< / td >
< td > Element to copy the tabel caption into curing views.
< div class = "collapsible" >
< p > < / p >
This option allows you to select which element to copy thre caption into during views.
< / div >
< / td >
< / tr >
< tr id = "view-switcher-class" >
< td > < a href = "#" class = "permalink" > view_switcher_class< / a > < / td >
< td > 'ts-view-switcher'< / td >
< td > Class name to be added to all view buttons.
< div class = "collapsible" >
< p > < / p >
Name of the class to be added to all view buttons.
< p > < / p >
< span class = "label warning" > * Note *< / span > Just put in the name of the class do NOT put a . in front of it.
< / div >
< / td >
< / tr >
< tr id = "view-layout" >
< td > < a href = "#" class = "permalink" > view_layout< / a > < / td >
< td > false< / td >
< td > Default view to display on startup.
< div class = "collapsible" >
< p > < / p >
Default view to display on startup, false means none. The value must be an object in < a href = "#view-layouts" > view_layouts< / a > .
< / div >
< / td >
< / tr >
< tr id = "view-layouts" >
< td > < a href = "#" class = "permalink" > view_layouts< / a > < / td >
< td > { 'view': { < options> } }< / td >
< td > List of available layouts and it's options.
< div class = "collapsible" >
2015-10-26 17:16:52 +00:00
< p > < / p >
In this object you setup each view.
< ul >
< li > < code > icon< / code > - This is the class for the view button< / li >
< li > < code > title< / code > - Title of this view< / li >
< li > < code > container< / code > - Wrapper node for this view< / li >
< li > < code > tpml< / code > - HTML layout for this view, {col< i > n< / i > } will be replaced with the value in that col < i > n< / i > < / li >
< li > < code > raw< / code > - This is in case you want the raw table data, < code > container< / code > and < code > tpml< / code > are ignored when raw is < code > true< / code > .< / li >
< / ul >
2015-10-26 15:06:56 +00:00
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< p > < / p >
< h1 > View Demo< / h1 >
< p > < / p >
2015-10-26 17:16:52 +00:00
< div id = "demo" > <!-- View Widget -->
< div >
< div id = "viewHeader" >
< section class = "left" >
< h1 id = "ts-view-caption" > < / h1 >
< / section >
< section class = "right" >
< input type = "search" id = "tablesearch" placeholder = "Search..." data-column = "1,2,3" / >
< div id = "ts-view-toolbar" > < / div >
< / section >
< / div >
< div id = "ts-view" > < / div >
< / div >
2015-10-26 15:06:56 +00:00
2015-10-26 17:16:52 +00:00
<!-- Table -->
2015-10-26 15:06:56 +00:00
< table id = "table" class = "tablesorter" >
2015-10-26 17:16:52 +00:00
< caption > Our Products< / caption >
< thead >
< tr >
< th class = "thumb" > < / th >
< th class = "part-number" > PN< / th >
< th class = "part-name" > Name< / th >
< th class = "part-descript" > Description< / th >
< th class = "part-price" > Price< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10001< / td >
< td > Widget 1< / td >
< td > This is Widget 1, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 19.99< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10002< / td >
< td > Widget 2< / td >
< td > This is Widget 2, it's nice fluffy and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 1.99< / td >
< / tr >
< tr >
< td >
< img src = "img/sale-banner.png" alt = "on sale" class = "featured-banner" >
< img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / >
< / td >
< td > 001-10003< / td >
< td > Widget 3< / td >
< td > This is Widget 3, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 89.99< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10004< / td >
< td > Widget 4< / td >
< td > This is Widget 4, it's nice soft and unique. I'ts also a little fluffy but not nice and fluffy.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 49.99< / td >
< / tr >
< tr >
< td >
< img src = "img/new-product-banner.png" alt = "on sale" class = "featured-banner" >
< img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / >
< / td >
< td > 001-10005< / td >
< td > Widget 5< / td >
< td > This is Widget 5, it's nice soft and unique. This one also have a unique smell and texture. Not for human consumption.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 18.49< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10006< / td >
< td > Widget 6< / td >
< td > 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!< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 69.98< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10007< / td >
< td > Widget 7< / td >
< td > This is Widget 7, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 4.99< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10008< / td >
< td > Widget 8< / td >
< td > This is Widget 8, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 17.89< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10009< / td >
< td > Widget 9< / td >
< td > This is Widget 9, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 17.49< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10010< / td >
< td > Widget 10< / td >
< td > This is Widget 10, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 119.99< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10011< / td >
< td > Widget 11< / td >
< td > This is Widget 11, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 18.88< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10012< / td >
< td > Widget 12< / td >
< td > This is Widget 12, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 19.97< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10013< / td >
< td > Widget 13< / td >
< td > This is Widget 13, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 9.98< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10014< / td >
< td > Widget 14< / td >
< td > This is Widget 14, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 29.99< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10015< / td >
< td > Widget 15< / td >
< td > This is Widget 15, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 44.95< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10016< / td >
< td > Widget 16< / td >
< td > This is Widget 16, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 8.69< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10017< / td >
< td > Widget 17< / td >
< td > This is Widget 17, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 17.99< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10018< / td >
< td > Widget 18< / td >
< td > This is Widget 18, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 219.99< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10019< / td >
< td > Widget 19< / td >
< td > This is Widget 19, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 1.98< / td >
< / tr >
< tr >
< td > < img src = "img/grid-default-thumb.png" alt = "default thumb" class = "thumb" / > < / td >
< td > 001-10020< / td >
< td > Widget 20< / td >
< td > This is Widget 20, it's nice soft and unique.< / td >
< td class = "hasPrice" data-currencysym = "$" data-currencycode = "CAD" > 9.97< / td >
< / tr >
< / tbody >
2015-10-26 15:06:56 +00:00
< / table >
2015-10-26 17:16:52 +00:00
<!-- Pager -->
< div id = "pager" class = "pager" >
< form >
< i class = "fa fa-step-backward first clickable" title = "First page" > < / i >
< i class = "fa fa-backward prev clickable" title = "Previous page" > < / i >
< span class = "pagedisplay" > < / span >
< i class = "fa fa-forward next clickable" title = "Next page" > < / i >
< i class = "fa fa-step-forward last clickable" title = "Last page" > < / i >
< select class = "pagesize" >
< option value = "6" > 6< / option >
< option value = "9" > 9< / option >
< option value = "12" > 12< / option >
< / select >
< / form >
< / div >
< / div >
2015-10-26 15:06:56 +00:00
< h1 > Page Header< / h1 >
< div >
< pre class = "prettyprint lang-html" >
< !-- 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> < / pre >
< / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
< h1 > CSS< / h1 >
< div id = "css" >
< pre class = "prettyprint lang-css" > < / pre >
< / div >
< h1 > HTML< / h1 >
< div id = "html" >
< pre class = "prettyprint lang-html" > < / pre >
< / div >
< / div >
2015-10-26 17:16:52 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
2015-10-26 15:06:56 +00:00
/* Initial settings */
2015-10-26 17:16:52 +00:00
var template = '< li class = "clearfix" > ' +
'< section class = "left" > {col0}' +
'< h3 > {col2}< / h3 > ' +
'< span class = "meta" > Product ID: {col1}< / span > ' +
'< p > {col3}< / p > ' +
'< / section > ' +
'< section class = "right" > ' +
'< span class = "price" > {col4}< / span > ' +
'< span class = "darkview" > ' +
'< button class = "mybutton nohover" title = "Read More..." > More< / button > ' +
'< button class = "mybutton nohover active" title = "Add to Cart" > Add To Cart< / button > ' +
'< / span > ' +
'< / section > ' +
'< / li > ',
views = {
grid: {
2015-10-26 15:06:56 +00:00
icon: 'fa fa-th',
title: 'GridView',
container: '< ul > ',
2015-10-26 17:16:52 +00:00
tmpl: template
2015-10-26 15:06:56 +00:00
},
list: {
icon: 'fa fa-th-list',
title: 'ListView',
container: '< ul > ',
2015-10-26 17:16:52 +00:00
tmpl: template
2015-10-26 15:06:56 +00:00
},
table: {
icon: 'fa fa-table',
title: 'Orignal TableSorter View',
raw: true
}
};
2015-10-26 17:16:52 +00:00
$('#table').tablesorter({
theme: 'blue',
widthFixed: true,
sortList: [[1, 0]],
widgets: ['pager', 'zebra', 'filter', 'view'],
widgetOptions: {
filter_external: '#tablesearch',
filter_columnFilters: false,
pager_selectors: { container: '#pager' },
pager_output: 'Showing {startRow} to {endRow} of {filteredRows} results',
pager_size: 6,
view_layout: 'list',
view_layouts: views
}
});
2015-10-26 15:06:56 +00:00
});< / script >
< script >
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
< / script >
< / body >
< / html >
