Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

New: Support rowspan for FixedColumns. Added example showing this run…

…ning
  • Loading branch information...
commit 324636313a98ae9e74c5ec18f6c9e5ae17314c0f 1 parent c759881
@DataTables authored
View
1  col_filter.html
@@ -582,6 +582,7 @@
<li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
<li><a href="two_columns.html">Two columns fixed in place</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
+ <li><a href="rowspan.html">Rowspan on the fixed column</a></li>
<li><a href="right_column.html">Fix the right column in place</a></li>
<li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
</ul>
View
1  index.html
@@ -473,6 +473,7 @@
<li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
<li><a href="two_columns.html">Two columns fixed in place</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
+ <li><a href="rowspan.html">Rowspan on the fixed column</a></li>
<li><a href="right_column.html">Fix the right column in place</a></li>
<li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
</ul>
View
1  index_column.html
@@ -566,6 +566,7 @@
<li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
<li><a href="two_columns.html">Two columns fixed in place</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
+ <li><a href="rowspan.html">Rowspan on the fixed column</a></li>
<li><a href="right_column.html">Fix the right column in place</a></li>
<li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
</ul>
View
1  left_right_columns.html
@@ -638,6 +638,7 @@
<li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
<li><a href="two_columns.html">Two columns fixed in place</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
+ <li><a href="rowspan.html">Rowspan on the fixed column</a></li>
<li><a href="right_column.html">Fix the right column in place</a></li>
<li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
</ul>
View
17 media/js/FixedColumns.js
@@ -475,8 +475,12 @@ FixedColumns.prototype = {
{
var that = this,
jqBoxHack = $(parent+' tr:eq(0)', original).children(boxHackSelector),
- iBoxHack = jqBoxHack.outerHeight() - jqBoxHack.height(),
- bRubbishOldIE = ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0"));
+ iBoxHack = jqBoxHack.outerHeight() - jqBoxHack.height();
+
+ if ( $(parent+' tr:eq(0) th', clone).attr('rowspan') > 1 )
+ {
+ $(parent+' tr:gt(0)', clone).remove();
+ }
/* Remove cells which are not needed and copy the height from the original table */
$(parent+' tr', clone).each( function (k) {
@@ -485,16 +489,11 @@ FixedColumns.prototype = {
/* Can we use some kind of object detection here?! This is very nasty - damn browsers */
if ( $.browser.mozilla || $.browser.opera )
{
- $(this).children().height( $(parent+' tr:eq('+k+')', original).outerHeight() );
+ $(this).children().height( $(parent+' tr:eq('+k+')', original).children(':first').outerHeight() );
}
else
{
- $(this).children().height( $(parent+' tr:eq('+k+')', original).outerHeight() - iBoxHack );
- }
-
- if ( !bRubbishOldIE )
- {
- $(parent+' tr:eq('+k+')', original).height( $(parent+' tr:eq('+k+')', original).outerHeight() );
+ $(this).children().height( $(parent+' tr:eq('+k+')', original).children(':first').outerHeight() - iBoxHack );
}
} );
},
View
1  right_column.html
@@ -489,6 +489,7 @@
<li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
<li><a href="two_columns.html">Two columns fixed in place</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
+ <li><a href="rowspan.html">Rowspan on the fixed column</a></li>
<li><a href="right_column.html">Fix the right column in place</a></li>
<li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
</ul>
View
494 rowspan.html
@@ -0,0 +1,494 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
+
+ <title>FixedColumns example</title>
+ <style type="text/css" title="currentStyle">
+ @import "../../media/css/demo_page.css";
+ @import "../../media/css/demo_table.css";
+ .FixedColumns_Cloned th { background-color: white; }
+ </style>
+ <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
+ <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
+ <script type="text/javascript" charset="utf-8" src="media/js/FixedColumns.js"></script>
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready( function () {
+ var oTable = $('#example').dataTable( {
+ "sScrollX": "100%",
+ "sScrollXInner": "150%",
+ "bScrollCollapse": true
+ } );
+ new FixedColumns( oTable );
+ } );
+ </script>
+ </head>
+ <body id="dt_example">
+ <div id="container">
+ <div class="full_width big">
+ FixedColumns example - rowspan in the header
+ </div>
+
+ <h1>Preamble</h1>
+ <p>If you are using multiple rows in the table header, it can be useful to have a rowspanning cell on the column(s) you have fixed in place - equally at other times it can be useful to not and make use of the two or more cells per column. FixedColumns will automatically take into account rowspan elements - as shown in this example.</p>
+
+ <h1>Live example</h1>
+ <div id="demo">
+<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
+ <thead>
+ <tr>
+ <th rowspan="2">Rendering engine</th>
+ <th>Browser</th>
+ <th>Platform(s)</th>
+ <th>Engine version</th>
+ <th>CSS grade</th>
+ </tr>
+ <tr>
+ <th>Name and version</th>
+ <th>Operating systems</th>
+ <th>Rendering engine</th>
+ <th>Support level</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="gradeX">
+ <td>Trident</td>
+ <td>Internet
+ Explorer 4.0</td>
+ <td>Win 95+</td>
+ <td class="center">4</td>
+ <td class="center">X</td>
+ </tr>
+ <tr class="gradeC">
+ <td>Trident</td>
+ <td>Internet
+ Explorer 5.0</td>
+ <td>Win 95+</td>
+ <td class="center">5</td>
+ <td class="center">C</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Trident</td>
+ <td>Internet
+ Explorer 5.5</td>
+ <td>Win 95+</td>
+ <td class="center">5.5</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Trident</td>
+ <td>Internet
+ Explorer 6</td>
+ <td>Win 98+</td>
+ <td class="center">6</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Trident</td>
+ <td>Internet Explorer 7</td>
+ <td>Win XP SP2+</td>
+ <td class="center">7</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Trident</td>
+ <td>AOL browser (AOL desktop)</td>
+ <td>Win XP</td>
+ <td class="center">6</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Firefox 1.0</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td class="center">1.7</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Firefox 1.5</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td class="center">1.8</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Firefox 2.0</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td class="center">1.8</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Firefox 3.0</td>
+ <td>Win 2k+ / OSX.3+</td>
+ <td class="center">1.9</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Camino 1.0</td>
+ <td>OSX.2+</td>
+ <td class="center">1.8</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Camino 1.5</td>
+ <td>OSX.3+</td>
+ <td class="center">1.8</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Netscape 7.2</td>
+ <td>Win 95+ / Mac OS 8.6-9.2</td>
+ <td class="center">1.7</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Netscape Browser 8</td>
+ <td>Win 98SE+</td>
+ <td class="center">1.7</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Netscape Navigator 9</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td class="center">1.8</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Mozilla 1.0</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td class="center">1</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Mozilla 1.1</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td class="center">1.1</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Mozilla 1.2</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td class="center">1.2</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Mozilla 1.3</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td class="center">1.3</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Mozilla 1.4</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td class="center">1.4</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Mozilla 1.5</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td class="center">1.5</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Mozilla 1.6</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td class="center">1.6</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Mozilla 1.7</td>
+ <td>Win 98+ / OSX.1+</td>
+ <td class="center">1.7</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Mozilla 1.8</td>
+ <td>Win 98+ / OSX.1+</td>
+ <td class="center">1.8</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Seamonkey 1.1</td>
+ <td>Win 98+ / OSX.2+</td>
+ <td class="center">1.8</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Gecko</td>
+ <td>Epiphany 2.20</td>
+ <td>Gnome</td>
+ <td class="center">1.8</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Webkit</td>
+ <td>Safari 1.2</td>
+ <td>OSX.3</td>
+ <td class="center">125.5</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Webkit</td>
+ <td>Safari 1.3</td>
+ <td>OSX.3</td>
+ <td class="center">312.8</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Webkit</td>
+ <td>Safari 2.0</td>
+ <td>OSX.4+</td>
+ <td class="center">419.3</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Webkit</td>
+ <td>Safari 3.0</td>
+ <td>OSX.4+</td>
+ <td class="center">522.1</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Webkit</td>
+ <td>OmniWeb 5.5</td>
+ <td>OSX.4+</td>
+ <td class="center">420</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Webkit</td>
+ <td>iPod Touch / iPhone</td>
+ <td>iPod</td>
+ <td class="center">420.1</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Webkit</td>
+ <td>S60</td>
+ <td>S60</td>
+ <td class="center">413</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Presto</td>
+ <td>Opera 7.0</td>
+ <td>Win 95+ / OSX.1+</td>
+ <td class="center">-</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Presto</td>
+ <td>Opera 7.5</td>
+ <td>Win 95+ / OSX.2+</td>
+ <td class="center">-</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Presto</td>
+ <td>Opera 8.0</td>
+ <td>Win 95+ / OSX.2+</td>
+ <td class="center">-</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Presto</td>
+ <td>Opera 8.5</td>
+ <td>Win 95+ / OSX.2+</td>
+ <td class="center">-</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Presto</td>
+ <td>Opera 9.0</td>
+ <td>Win 95+ / OSX.3+</td>
+ <td class="center">-</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Presto</td>
+ <td>Opera 9.2</td>
+ <td>Win 88+ / OSX.3+</td>
+ <td class="center">-</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Presto</td>
+ <td>Opera 9.5</td>
+ <td>Win 88+ / OSX.3+</td>
+ <td class="center">-</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Presto</td>
+ <td>Opera for Wii</td>
+ <td>Wii</td>
+ <td class="center">-</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Presto</td>
+ <td>Nokia N800</td>
+ <td>N800</td>
+ <td class="center">-</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Presto</td>
+ <td>Nintendo DS browser</td>
+ <td>Nintendo DS</td>
+ <td class="center">8.5</td>
+ <td class="center">C/A<sup>1</sup></td>
+ </tr>
+ <tr class="gradeC">
+ <td>KHTML</td>
+ <td>Konqureror 3.1</td>
+ <td>KDE 3.1</td>
+ <td class="center">3.1</td>
+ <td class="center">C</td>
+ </tr>
+ <tr class="gradeA">
+ <td>KHTML</td>
+ <td>Konqureror 3.3</td>
+ <td>KDE 3.3</td>
+ <td class="center">3.3</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeA">
+ <td>KHTML</td>
+ <td>Konqureror 3.5</td>
+ <td>KDE 3.5</td>
+ <td class="center">3.5</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeX">
+ <td>Tasman</td>
+ <td>Internet Explorer 4.5</td>
+ <td>Mac OS 8-9</td>
+ <td class="center">-</td>
+ <td class="center">X</td>
+ </tr>
+ <tr class="gradeC">
+ <td>Tasman</td>
+ <td>Internet Explorer 5.1</td>
+ <td>Mac OS 7.6-9</td>
+ <td class="center">1</td>
+ <td class="center">C</td>
+ </tr>
+ <tr class="gradeC">
+ <td>Tasman</td>
+ <td>Internet Explorer 5.2</td>
+ <td>Mac OS 8-X</td>
+ <td class="center">1</td>
+ <td class="center">C</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Misc</td>
+ <td>NetFront 3.1</td>
+ <td>Embedded devices</td>
+ <td class="center">-</td>
+ <td class="center">C</td>
+ </tr>
+ <tr class="gradeA">
+ <td>Misc</td>
+ <td>NetFront 3.4</td>
+ <td>Embedded devices</td>
+ <td class="center">-</td>
+ <td class="center">A</td>
+ </tr>
+ <tr class="gradeX">
+ <td>Misc</td>
+ <td>Dillo 0.8</td>
+ <td>Embedded devices</td>
+ <td class="center">-</td>
+ <td class="center">X</td>
+ </tr>
+ <tr class="gradeX">
+ <td>Misc</td>
+ <td>Links</td>
+ <td>Text only</td>
+ <td class="center">-</td>
+ <td class="center">X</td>
+ </tr>
+ <tr class="gradeX">
+ <td>Misc</td>
+ <td>Lynx</td>
+ <td>Text only</td>
+ <td class="center">-</td>
+ <td class="center">X</td>
+ </tr>
+ <tr class="gradeC">
+ <td>Misc</td>
+ <td>IE Mobile</td>
+ <td>Windows Mobile 6</td>
+ <td class="center">-</td>
+ <td class="center">C</td>
+ </tr>
+ <tr class="gradeC">
+ <td>Misc</td>
+ <td>PSP browser</td>
+ <td>PSP</td>
+ <td class="center">-</td>
+ <td class="center">C</td>
+ </tr>
+ <tr class="gradeU">
+ <td>Other browsers</td>
+ <td>All others</td>
+ <td>-</td>
+ <td class="center">-</td>
+ <td class="center">U</td>
+ </tr>
+ </tbody>
+</table>
+ </div>
+ <div class="spacer"></div>
+
+
+ <h1>Initialisation code</h1>
+ <pre>$(document).ready( function () {
+ var oTable = $('#example').dataTable( {
+ "sScrollX": "100%",
+ "sScrollXInner": "150%",
+ "bScrollCollapse": true
+ } );
+ new FixedColumns( oTable );
+} );</pre>
+
+ <h1>Examples</h1>
+ <ul>
+ <li><a href="index.html">Basic demo of FixedColumns with zero initialisation</a></li>
+ <li><a href="index_column.html">Index column attached to side of the table</a></li>
+ <li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
+ <li><a href="two_columns.html">Two columns fixed in place</a></li>
+ <li><a href="col_filter.html">Individual column filtering</a></li>
+ <li><a href="rowspan.html">Rowspan on the fixed column</a></li>
+ <li><a href="right_column.html">Fix the right column in place</a></li>
+ <li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
+ </ul>
+
+
+ <div id="footer" style="text-align:center;">
+ <span style="font-size:10px;">
+ FixedColumns and DataTables &copy; Allan Jardine 2011.<br>
+ </span>
+ </div>
+ </div>
+ </body>
+</html>
View
1  two_columns.html
@@ -485,6 +485,7 @@
<li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
<li><a href="two_columns.html">Two columns fixed in place</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
+ <li><a href="rowspan.html">Rowspan on the fixed column</a></li>
<li><a href="right_column.html">Fix the right column in place</a></li>
<li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
</ul>
View
1  x_y_scrolling.html
@@ -560,6 +560,7 @@
<li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
<li><a href="two_columns.html">Two columns fixed in place</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
+ <li><a href="rowspan.html">Rowspan on the fixed column</a></li>
<li><a href="right_column.html">Fix the right column in place</a></li>
<li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
</ul>
Please sign in to comment.
Something went wrong with that request. Please try again.