mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
columns widget
This commit is contained in:
Rob Garrison
parent
1153c05171
commit
db0863f433
@ -28,6 +28,16 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs
|
||||
|
||||
View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt).
|
||||
|
||||
#### Version 2.0.17 (2011-09-11)
|
||||
|
||||
* Added a jquery.tablesorter.widget.js file:
|
||||
* It contains the "uitheme" widget, to add any jQuery UI theme, and the new "columns" widget, to style columns.
|
||||
* The blue and green themes have been updated with the added styles from the columns widget.
|
||||
* Added a Columns Widget demo and instructions.
|
||||
* Added a `widgetColumns` option which defines the css classes added by the columns widget.
|
||||
* Added notes to the pager plugin demo page to better specify when a change was added.
|
||||
* The green theme header images have been modified to better work with variable width tables.
|
||||
|
||||
#### Version 2.0.16 (2011-09-08)
|
||||
|
||||
* Added notes to demo pages to indicate if the original (version 2.0.5, at [tablesorter.com](http://tablesorter.com/docs/)) does have that option or method.
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
TableSorter Change Log
|
||||
|
||||
Version 2.0.17 (2011-09-11)
|
||||
============================
|
||||
|
||||
* Added a jquery.tablesorter.widget.js file:
|
||||
* It contains the "uitheme" widget, to add any jQuery UI theme, and the new "columns" widget, to style columns.
|
||||
* The blue and green themes have been updated with the added styles from the columns widget.
|
||||
* Added a Columns Widget demo and instructions.
|
||||
* Added a `widgetColumns` option which defines the css classes added by the columns widget.
|
||||
* Added notes to the pager plugin demo page to better specify when a change was added.
|
||||
* The green theme header images have been modified to better work with variable width tables.
|
||||
|
||||
Version 2.0.16 (2011-09-08)
|
||||
============================
|
||||
|
||||
|
||||
Binary file not shown.
@ -1,15 +1,15 @@
|
||||
/* Blue Theme */
|
||||
table.tablesorter {
|
||||
font-family: arial;
|
||||
background-color: #CDCDCD;
|
||||
background-color: #cdcdcd;
|
||||
margin: 10px 0pt 15px;
|
||||
font-size: 8pt;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
|
||||
background-color: #e6EEEE;
|
||||
border: 1px solid #FFF;
|
||||
background-color: #e6eeee;
|
||||
border: 1px solid #fff;
|
||||
border-collapse: collapse;
|
||||
font-size: 8pt;
|
||||
padding: 4px;
|
||||
@ -21,14 +21,11 @@ table.tablesorter thead tr .header {
|
||||
cursor: pointer;
|
||||
}
|
||||
table.tablesorter tbody td {
|
||||
color: #3D3D3D;
|
||||
color: #3d3d3d;
|
||||
padding: 4px;
|
||||
background-color: #FFF;
|
||||
background-color: #fff;
|
||||
vertical-align: top;
|
||||
}
|
||||
table.tablesorter tbody tr.odd td {
|
||||
background-color: #F0F0F6;
|
||||
}
|
||||
table.tablesorter thead tr .headerSortUp {
|
||||
background-image: url(black-asc.gif);
|
||||
}
|
||||
@ -37,4 +34,34 @@ table.tablesorter thead tr .headerSortDown {
|
||||
}
|
||||
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
|
||||
background-color: #8dbdd8;
|
||||
}
|
||||
}
|
||||
|
||||
/* Zebra Widget - row alternating colors */
|
||||
table.tablesorter tbody tr.odd td {
|
||||
background-color: #f0f0ff;
|
||||
}
|
||||
table.tablesorter tbody tr.even td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Column Widget - column sort colors */
|
||||
table.tablesorter tbody td.primary, table.tablesorter tbody tr.odd td.primary {
|
||||
background-color: #c0c0ff;
|
||||
}
|
||||
table.tablesorter tbody tr.even td.primary {
|
||||
background-color: #e8e8ff;
|
||||
}
|
||||
|
||||
table.tablesorter tbody td.secondary, table.tablesorter tbody tr.odd td.secondary {
|
||||
background-color: #d6d6ff;
|
||||
}
|
||||
table.tablesorter tbody tr.even td.secondary {
|
||||
background-color: #e8e8ff;
|
||||
}
|
||||
|
||||
table.tablesorter tbody td.tertiary, table.tablesorter tbody tr.odd td.tertiary {
|
||||
background-color: #e5e5ff;
|
||||
}
|
||||
table.tablesorter tbody tr.even td.tertiary {
|
||||
background-color: #f8f8ff;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 3.3 KiB |
BIN
css/green/bg.png
BIN
css/green/bg.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
BIN
css/green/bkgd.png
Normal file
BIN
css/green/bkgd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
BIN
css/green/none.png
Normal file
BIN
css/green/none.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
@ -1,39 +1,69 @@
|
||||
/* green theme */
|
||||
table.tablesorter {
|
||||
font-family: arial;
|
||||
background-color: #cdcdcd;
|
||||
margin: 10px 0pt 15px;
|
||||
font-size: 12px;
|
||||
background-color: #4D4D4D;
|
||||
width: 1024px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
table.tablesorter th {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
|
||||
background-color: #e6eeee;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
background-color: #6E6E6E;
|
||||
}
|
||||
table.tablesorter td {
|
||||
color: #FFF;
|
||||
color: #3d3d3d;
|
||||
padding: 5px;
|
||||
}
|
||||
table.tablesorter .even {
|
||||
background-color: #3D3D3D;
|
||||
}
|
||||
table.tablesorter .odd {
|
||||
background-color: #6E6E6E;
|
||||
table.tablesorter thead {
|
||||
background: url(bkgd.png) center center repeat-x;
|
||||
}
|
||||
table.tablesorter .header {
|
||||
background-image: url(bg.png);
|
||||
background-repeat: no-repeat;
|
||||
border-left: 1px solid #FFF;
|
||||
border-right: 1px solid #000;
|
||||
border-top: 1px solid #FFF;
|
||||
padding-left: 30px;
|
||||
padding-top: 8px;
|
||||
background: transparent;
|
||||
padding: 9px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.tablesorter .headerSortUp {
|
||||
background-image: url(asc.png);
|
||||
background-repeat: no-repeat;
|
||||
table.tablesorter .header span {
|
||||
background: url(none.png) no-repeat;
|
||||
padding: 2px 0 2px 25px;
|
||||
}
|
||||
table.tablesorter .headerSortDown {
|
||||
background-image: url(desc.png);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
table.tablesorter .headerSortUp span {
|
||||
background: url(asc.png) no-repeat;
|
||||
}
|
||||
table.tablesorter .headerSortDown span {
|
||||
background: url(desc.png) no-repeat;
|
||||
}
|
||||
|
||||
/* Zebra Widget - row alternating colors */
|
||||
table.tablesorter tr.odd td {
|
||||
background-color: #f0f6f0;
|
||||
}
|
||||
table.tablesorter tr.even td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Column Widget - column sort colors */
|
||||
table.tablesorter tbody td.primary, table.tablesorter tbody tr.odd td.primary {
|
||||
background-color: #c0ffc0;
|
||||
}
|
||||
table.tablesorter tbody tr.even td.primary {
|
||||
background-color: #e8ffe8;
|
||||
}
|
||||
|
||||
table.tablesorter tbody td.secondary, table.tablesorter tbody tr.odd td.secondary {
|
||||
background-color: #d6ffd6;
|
||||
}
|
||||
table.tablesorter tbody tr.even td.secondary {
|
||||
background-color: #e8ffe8;
|
||||
}
|
||||
|
||||
table.tablesorter tbody td.tertiary, table.tablesorter tbody tr.odd td.tertiary {
|
||||
background-color: #eaffea;
|
||||
}
|
||||
table.tablesorter tbody tr.even td.tertiary {
|
||||
background-color: #f8fff8;
|
||||
}
|
||||
|
||||
|
||||
@ -2,8 +2,8 @@ body,div,h1{font-family:'trebuchet ms', verdana, arial;margin:0;padding:0;}
|
||||
body{background-color:#fff;color:#333;margin:0;padding:0;}
|
||||
h1{font-size:large;font-weight:400;margin:0;}
|
||||
h2{color:#333;font-size:small;font-weight:400;margin:0;}
|
||||
.demo{width:600px;margin:0 auto;}
|
||||
.demo h1,.demo h1 a{font-size:120%;text-align:center;text-decoration:none;}
|
||||
.demo{width:600px;margin:20px auto;}
|
||||
.demo h1,.demo h1 a{font-size:120%;text-align:center;text-decoration:none;color:#000;}
|
||||
.demo p{text-align:center;}
|
||||
.demo table.tablesorter{font-size:14px;}
|
||||
table.info{border:#000 1px solid;border-collapse:collapse;margin:10px 0 0 10px;}
|
||||
@ -17,7 +17,7 @@ pre,#display,code.hilight{background-color:#eee;color:#333;font-size:small;list-
|
||||
a code.hilight {text-decoration:underline;}
|
||||
pre.normal{background-color:transparent;border:none;border-left-width:0;overflow-x:auto;}
|
||||
#logo{background:url(images/jq.png);display:block;float:right;height:31px;margin-right:10px;margin-top:10px;width:110px;}
|
||||
#main{margin:0 20px 20px;padding:0 15px 15px 0;}
|
||||
#main{margin:0 20px 20px;padding:0 15px 15px 0;clear:both;}
|
||||
#content{padding:20px;}
|
||||
#busy{background-color:#e95555;border:1px ridge #ccc;color:#eee;display:none;padding:3px;position:absolute;right:7px;top:7px;}
|
||||
#demo strong{color:#a00;}
|
||||
@ -25,12 +25,12 @@ hr{height:1px;}
|
||||
code{font-size:108%;font-style:normal;padding:0;}
|
||||
ul{color:#333;list-style:square;}
|
||||
#banner{margin:20px 20px 5px 20px;padding:0;text-align:left;}
|
||||
#banner *{color:#232121;font-family:Georgia, Palatino, Times New Roman;font-size:30px;font-style:normal;font-weight:400;margin:0;padding:0;}
|
||||
#banner *,.demo h1,.demo h1 em{color:#232121;font-family:Georgia, Palatino, Times New Roman;font-size:30px;font-style:normal;font-weight:400;margin:0;padding:0;}
|
||||
#banner h1{display:block;float:left;}
|
||||
#banner h1 em{color:#6cf;}
|
||||
#banner h1 em,.demo h1 em{color:#6cf;}
|
||||
#banner h2{float:right;font-size:26px;margin:10px 10px -10px -10px;}
|
||||
#banner h3{clear:both;display:block;font-size:12px;margin-top:-20px;}
|
||||
#banner a{border-top:1px solid #888;display:block;font-size:14px;margin:5px 0 0;padding:10px 0 0;text-align:right;width:auto;}
|
||||
#banner h3{clear:both;display:block;font-size:12px;margin-top:-20px;border-bottom:1px solid #888;}
|
||||
#banner a{display:block;font-size:14px;margin:5px 0 0;padding:10px 0 0;float:right;}
|
||||
a.external{background-image:url(../img/external.png);background-position:center right;background-repeat:no-repeat;padding-right:12px;}
|
||||
form{font-size:10pt;margin-bottom:20px;width:auto;}
|
||||
form fieldset{padding:10px;text-align:left;width:140px;}
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-zebra.html">Basic: Applying the zebra stripe widget ››</a>
|
||||
Next up: <a href="example-widget-zebra.html">Basic: Applying the zebra stripe widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -92,7 +92,15 @@
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Updated pager functions and added output string formatting (e.g. "1 to 10 (1022)") to version 2.0.9 (it is not part of the original plugin).
|
||||
<em>NOTE!</em> The following are not part of the original plugin:
|
||||
<ul>
|
||||
<li>Added "pagerChange" and "pagerComplete" events in version 2.0.7.</li>
|
||||
<li>Updated pager functions, removed "separator" option, and added output string formatting (e.g. "1 to 10 (50)") to version 2.0.9.</li>
|
||||
<li>Added "cssDisabled" and "pagerArrows" options which controls the look of the pager and arrows when the pager is on the first or last page. Added in version 2.0.9.</li>
|
||||
<li>Added a new "addRows" method to allow adding new rows while the pager is applied to a table. Using "update" would remove all non-visible rows. New in version 2.0.16.</li>
|
||||
<li>New "destroy.pager" method will reveal the entire table, remove the pager functionality, and hide the actual pager. Added in version 2.0.16.</li>
|
||||
<li>Reduced the number of rows in the demo from 1022 to 50, so you don't have to scroll forever (when the pager is destroyed) to see the code below the table (v2.0.16).</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h1>Triggered Events</h1>
|
||||
|
||||
137
docs/example-widget-columns.html
Normal file
137
docs/example-widget-columns.html
Normal file
@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Columns Style Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<script src="js/chili/jquery.chili-2.2.js"></script>
|
||||
<script src="js/chili/recipes.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/blue/style.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({
|
||||
sortList : [[1,0],[2,0],[3,0]],
|
||||
// initialize zebra striping and column styling of the table
|
||||
widgets: ["zebra", "columns"],
|
||||
// change the default column class names
|
||||
// primary is the first column sorted, secondary is the second, etc
|
||||
widgetColumns: { css: ["primary", "secondary", "tertiary" ] },
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Columns Style Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> This widget can be applied to the original plugin.
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="html"><!-- blue theme stylesheet with additional css styles added in v2.0.17 -->
|
||||
<link rel="stylesheet" href="../css/blue/style.css">
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="js"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-ui-theme.html">Basic: Applying a jQuery UI theme widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -20,46 +20,19 @@
|
||||
<link rel="stylesheet" href="../css/ui/style.css">
|
||||
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// add ui theme widget
|
||||
$.tablesorter.addWidget({
|
||||
id: "uitheme",
|
||||
format: function(table) {
|
||||
var c = table.config,
|
||||
// ["up/down arrow (cssHeaders, unsorted)", "down arrow (cssDesc, descending)", "up arrow (cssAsc, ascending)" ]
|
||||
icons = c.uitheme || ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"],
|
||||
klass, rmv = icons.join(' ');
|
||||
if (!$(c.headerList[0]).is('.ui-theme')) {
|
||||
$(table).addClass('ui-widget ui-widget-content ui-corner-all');
|
||||
$.each(c.headerList, function(){
|
||||
$(this)
|
||||
// using "ui-theme" class in case the user adds their own ui-icon using onRenderHeader
|
||||
.addClass('ui-widget-header ui-corner-all ui-theme')
|
||||
.append('<span class="ui-theme"/>');
|
||||
});
|
||||
}
|
||||
$.each(c.headerList, function(i){
|
||||
if (c.headers[i] && c.headers[i].sorter === false) {
|
||||
// no sort arrows for disabled columns!
|
||||
$(this).find('span.ui-theme').removeClass(rmv + ' ui-icon');
|
||||
} else {
|
||||
//
|
||||
klass = ($(this).is('.' + c.cssAsc)) ? icons[1] : ($(this).is('.' + c.cssDesc)) ? icons[2] : $(this).is('.' + c.cssHeader) ? icons[0] : '';
|
||||
$(this).find('span.ui-theme').removeClass(rmv).addClass(klass + ' ui-icon');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// call the tablesorter plugin and apply the ui theme widget
|
||||
$("table").tablesorter({
|
||||
// widget code now contained in the jquery.tablesorter.widgets.js file
|
||||
widgets : ['uitheme']
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
@ -143,6 +116,20 @@
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="html"><!-- ui theme stylesheet - contents shown below -->
|
||||
<link rel="stylesheet" href="../css/ui/style.css">
|
||||
<!-- jQuery UI theme (cupertino example here) -->
|
||||
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="js"></pre>
|
||||
@ -123,7 +123,7 @@ table.tablesorter tbody tr.alt-row td {
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-ui-theme.html">Basic: Applying a jQuery UI theme widget ››</a>
|
||||
Next up: <a href="example-widget-columns.html">Basic: Applying the columns widget ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -36,7 +36,7 @@
|
||||
</div>
|
||||
<p>
|
||||
<strong>Author:</strong> <a class="external" href="http://lovepeacenukes.com">Christian Bach</a><br>
|
||||
<strong>Version:</strong> 2.0.16 (forked from <a href="http://tablesorter.com/docs/">version 2.0.5</a>, <a href="../changelog.txt">changelog</a>)<br>
|
||||
<strong>Version:</strong> 2.0.17 (forked from <a href="http://tablesorter.com/docs/">version 2.0.5</a>, <a href="../changelog.txt">changelog</a>)<br>
|
||||
<strong>Licence:</strong>
|
||||
Dual licensed under <a class="external" href="http://www.opensource.org/licenses/mit-license.php">MIT</a>
|
||||
or <a class="external" href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses.
|
||||
@ -298,8 +298,9 @@
|
||||
<li><a href="example-options-headers-digits-strings.html">Dealing with text strings in numerical sorts</a> <span class="tip"><em>New! v2.0.10</em></span></li>
|
||||
<li><a href="example-option-sort-order.html">Direction of initial sort</a></li>
|
||||
<li><a href="example-apply-widget.html">Applying widgets</a></li>
|
||||
<li><a href="example-zebra.html">Applying the zebra stripe widget</a></li>
|
||||
<li><a href="example-ui-theme.html">Applying the jQuery UI theme widget</a> <span class="tip"><em>New! v2.0.9</em></span></li>
|
||||
<li><a href="example-widget-zebra.html">Applying the zebra stripe widget</a></li>
|
||||
<li><a href="example-widget-columns.html">Applying the columns widget</a> <span class="tip"><em>New! v2.0.17</em></span></li>
|
||||
<li><a href="example-widget-ui-theme.html">Applying the jQuery UI theme widget</a> <span class="tip"><em>New! v2.0.9</em></span></li>
|
||||
<li><a href="example-parsers-class-name.html">Disable or set the column parser using class names</a> <span class="tip"><em>New! v2.0.11</em></span></li>
|
||||
<li><a href="example-options-headers.html">Disable sort using headers options</a></li>
|
||||
<li><a href="example-options-headers-locked.html">Lock sort order using header options</a></li>
|
||||
@ -317,7 +318,7 @@
|
||||
<li><a href="example-triggers.html">Triggers sortEnd and sortStart (Displaying sorting progress)</a></li>
|
||||
<li><a href="example-empty-table.html">Initializing tablesorter on a empty table</a></li>
|
||||
<li><a href="example-ajax.html">Appending table data with ajax</a></li>
|
||||
<li><a href="example-add-rows.html">Advanced: Adding a table row</a> <span class="tip"><em>New! v2.0.16</em></span></li>
|
||||
<li><a href="example-add-rows.html">Adding a table row</a> <span class="tip"><em>New! v2.0.16</em></span></li>
|
||||
<li><a href="example-update-cell.html">Update the table after cell content has changed</a></li>
|
||||
<li><a href="example-option-text-extraction.html">Dealing with markup inside cells (textExtraction function)</a></li>
|
||||
<li><a href="example-option-render-header.html">Modify how the header is rendered to allow for custom styling</a></li>
|
||||
@ -734,7 +735,7 @@ $(function(){
|
||||
<td>
|
||||
Initialize widgets using this option ( e.g. <code class="hilight">widgets : ['zebra']</code>, or custom widgets <code class="hilight">widgets: ['zebra', 'myCustomWidget'];</code>, see <a href="example-widgets.html">this demo</a> on how to write your own custom widget ).
|
||||
</td>
|
||||
<td><a href="example-zebra.html">Example</a></td>
|
||||
<td><a href="example-widget-zebra.html">Example</a></td>
|
||||
</tr>
|
||||
|
||||
<tr id="widgetzebra">
|
||||
@ -752,7 +753,25 @@ $(function(){
|
||||
});
|
||||
});</pre></div>
|
||||
</td>
|
||||
<td><a href="example-zebra.html">Example</a></td>
|
||||
<td><a href="example-widget-zebra.html">Example</a></td>
|
||||
</tr>
|
||||
|
||||
<tr id="widgetcolumns">
|
||||
<td><a href="#" class="toggle2">widgetColumns</a></td>
|
||||
<td>Object with Array</td>
|
||||
<td>{css:[ "primary", "secondary", "tertiary" ]}</td>
|
||||
<td>
|
||||
When the column styling widget is initialized, it automatically applied the default class names of <code class="hilight">"primary"</code> for the primary sort, <code class="hilight">"secondary"</code> for the next sort, <code class="hilight">"tertiary"</code> for the next sort, and so on (add more as needed)... <span class="tip"><em>New!</em></span> in v2.0.17.
|
||||
<div class="collapsible">
|
||||
Use the <a href="#widgetcolumns"><code class="hilight">"widgetColumns"</code></a> option to change the css class name as follows:
|
||||
<pre class="js">$(function(){
|
||||
$("table").tablesorter({
|
||||
widgets: ["columns"], // initialize column styling of the table
|
||||
widgetColumns: { css: ["primary", "secondary", "tertiary" ] }
|
||||
});
|
||||
});</pre></div>
|
||||
</td>
|
||||
<td><a href="example-widget-columns.html">Example</a></td>
|
||||
</tr>
|
||||
|
||||
<tr id="widthfixed">
|
||||
@ -1040,18 +1059,15 @@ $(table)
|
||||
<strong id="Download-Required">Required:</strong>
|
||||
<ul>
|
||||
<li><a class="external" href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery">jQuery</a> (1.2.1 or higher)</li>
|
||||
<li><a href="../js/jquery.tablesorter.min.js">jquery.tablesorter.min.js</a> (12kb, Minified for production - please put the file on your server)</li>
|
||||
<li><a href="../js/jquery.tablesorter.min.js">jquery.tablesorter.min.js</a> (17kb, Minified for production - please put the file on your server)</li>
|
||||
</ul>
|
||||
|
||||
<strong id="Download-Addons">Optional/Add-Ons:</strong>
|
||||
<ul>
|
||||
<li><a class="external" href="http://plugins.jquery.com/files/jquery.metadata.2.1.zip">jQuery Metadata 2.1</a> (3,7kb <strong>Required for setting <a href="#Examples">inline options</a></strong>)</li>
|
||||
<!--
|
||||
<li><a class="external" href="http://dev.jquery.com/browser/trunk/plugins/dimensions/jquery.dimensions.
|
||||
.js?format=raw">jquery.dimensions.pack.js</a> (5,1kb, <a href="http://dean.edwards.name/packer/" class="external">packed</a>, for production. <strong>Required: for the <a href="example-pager.html">tablesorter pagination plugin</a></strong>)</li>
|
||||
-->
|
||||
<li><a href="../js/jquery.tablesorter.js">jquery.tablesorter.js</a> (17,7kb, for development)</li>
|
||||
<li><a href="../js/jquery.tablesorter.js">jquery.tablesorter.js</a> (31kb, for development)</li>
|
||||
<li><a href="../addons/pager/jquery.tablesorter.pager.js">jquery.tablesorter.pager.js</a> (3,6kb, <a href="example-pager.html">tablesorter pagination plugin</a>)</li>
|
||||
<li><a href="../js/jquery.tablesorter.widgets.js">jquery.tablesorter.widgets.js</a> (2,12kb, includes the jQuery UI theme 'uitheme' and columns styling 'columns' widgets. <span class="tip"><em>New!</em></span> in v2.0.17.)</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
@ -1065,7 +1081,7 @@ $(table)
|
||||
<ul>
|
||||
<li><a href="../css/green/green.zip">Green Skin</a> - Images and CSS styles for green themed headers</li>
|
||||
<li><a href="../css/blue/blue.zip">Blue Skin</a> - Images and CSS styles for blue themed headers (as seen in the examples)</li>
|
||||
<li><a href="example-ui-theme.html">jQuery UI Theme</a> - Apply any jQuery UI theme to the table using the "uitheme" widget code. <span class="tip"><em>New!</em></span> in v2.0.9!</li>
|
||||
<li><a href="example-widget-ui-theme.html">jQuery UI Theme</a> - Apply any jQuery UI theme to the table using the "uitheme" widget code. <span class="tip"><em>New!</em></span> in v2.0.9!</li>
|
||||
</ul>
|
||||
|
||||
<a name="Compatibility"></a>
|
||||
|
||||
@ -13,18 +13,18 @@
|
||||
<!-- Pick a theme, load the plugin & initialize plugin -->
|
||||
<link href="css/blue/style.css" rel="stylesheet">
|
||||
<script src="js/jquery.tablesorter.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$('table').tablesorter();
|
||||
$('table').tablesorter({ widgets: ['zebra', 'columns'] });
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo">
|
||||
|
||||
<h1><a href="https://github.com/Mottie/tablesorter">TableSorter</a></h1>
|
||||
<p>By Christian Bach; github updates by Rob G<br>
|
||||
<h1><a href="https://github.com/Mottie/tablesorter">table<em>sorter</em></a></h1>
|
||||
<p>By Christian Bach; github updates by <a href="https://github.com/Mottie/">Rob G</a><br>
|
||||
<a href="docs/index.html">Complete docs included</a> (updated with missing docs from <a href="http://wowmotty.blogspot.com/2011/06/jquery-tablesorter-missing-docs.html">this blog post</a>)
|
||||
</p>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/*
|
||||
* TableSorter 2.0 - Client-side table sorting with ease!
|
||||
* Version 2.0.16
|
||||
* Version 2.0.17
|
||||
* @requires jQuery v1.2.3
|
||||
*
|
||||
* Copyright (c) 2007 Christian Bach
|
||||
@ -94,6 +94,7 @@
|
||||
parsers: {},
|
||||
widgets: [],
|
||||
widgetZebra: { css: ["even", "odd"] },
|
||||
widgetColumns: { css: ["primary", "secondary", "tertiary" ] },
|
||||
headers: {},
|
||||
widthFixed: false,
|
||||
cancelSelection: true,
|
||||
|
||||
4
js/jquery.tablesorter.min.js
vendored
4
js/jquery.tablesorter.min.js
vendored
File diff suppressed because one or more lines are too long
68
js/jquery.tablesorter.widgets.js
Normal file
68
js/jquery.tablesorter.widgets.js
Normal file
@ -0,0 +1,68 @@
|
||||
/* TableSorter 2.0 Widgets */
|
||||
|
||||
// Add jQuery UI theme widget
|
||||
$.tablesorter.addWidget({
|
||||
id: "uitheme",
|
||||
format: function(table) {
|
||||
var c = table.config,
|
||||
// ["up/down arrow (cssHeaders, unsorted)", "down arrow (cssDesc, descending)", "up arrow (cssAsc, ascending)" ]
|
||||
icons = c.uitheme || ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"],
|
||||
klass, rmv = icons.join(' ');
|
||||
if (c.debug) {
|
||||
time = new Date();
|
||||
}
|
||||
if (!$(c.headerList[0]).is('.ui-theme')) {
|
||||
$(table).addClass('ui-widget ui-widget-content ui-corner-all');
|
||||
$.each(c.headerList, function(){
|
||||
$(this)
|
||||
// using "ui-theme" class in case the user adds their own ui-icon using onRenderHeader
|
||||
.addClass('ui-widget-header ui-corner-all ui-theme')
|
||||
.append('<span class="ui-theme"/>');
|
||||
});
|
||||
}
|
||||
$.each(c.headerList, function(i){
|
||||
if (c.headers[i] && c.headers[i].sorter === false) {
|
||||
// no sort arrows for disabled columns!
|
||||
$(this).find('span.ui-theme').removeClass(rmv + ' ui-icon');
|
||||
} else {
|
||||
klass = ($(this).is('.' + c.cssAsc)) ? icons[1] : ($(this).is('.' + c.cssDesc)) ? icons[2] : $(this).is('.' + c.cssHeader) ? icons[0] : '';
|
||||
$(this).find('span.ui-theme').removeClass(rmv).addClass(klass + ' ui-icon');
|
||||
}
|
||||
});
|
||||
if (c.debug) {
|
||||
$.tablesorter.benchmark("Applying uitheme widget", time);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add Column styles widget
|
||||
$.tablesorter.addWidget({
|
||||
id: "columns",
|
||||
format: function(table) {
|
||||
var $td, time, i,
|
||||
c = table.config,
|
||||
list = c.sortList,
|
||||
len = list.length,
|
||||
css = c.widgetColumns.css,
|
||||
last = css.length-1,
|
||||
rmv = css.join(' ');
|
||||
if (c.debug) {
|
||||
time = new Date();
|
||||
}
|
||||
// loop through the visible rows
|
||||
$("tr:visible", table.tBodies[0]).each(function (i) {
|
||||
$td = $(this).children().removeClass(rmv);
|
||||
// primary sort column class
|
||||
$td.eq(list[0][0]).addClass(css[0]);
|
||||
if (len > 1) {
|
||||
for (i=1; i<len; i++){
|
||||
// secondary, tertiary, etc sort column classes
|
||||
$td.eq(list[i][0]).addClass( css[i] || css[last] );
|
||||
}
|
||||
}
|
||||
});
|
||||
if (c.debug) {
|
||||
$.tablesorter.benchmark("Applying Columns widget", time);
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user