Advertisement
| 10.03.2008 at 07:47AM PDT, ID: 23785154 | Points: 500 |
|
[x]
Attachment Details
|
||
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66: 67: 68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: 99: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109: 110: 111: 112: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124: 125: 126: 127: 128: 129: 130: 131: 132: 133: 134: 135: 136: 137: 138: 139: 140: 141: 142: 143: 144: 145: 146: 147: 148: 149: 150: 151: 152: 153: 154: 155: 156: 157: 158: 159: 160: 161: 162: 163: 164: 165: 166: 167: 168: 169: 170: 171: 172: 173: 174: 175: 176: 177: 178: 179: 180: 181: 182: 183: 184: 185: 186: 187: 188: 189: 190: 191: 192: 193: 194: 195: 196: 197: 198: 199: 200: 201: 202: 203: 204: 205: 206: 207: 208: 209: 210: 211: 212: 213: 214: 215: 216: 217: 218: 219: 220: 221: 222: 223: 224: 225: 226: 227: 228: 229: 230: 231: 232: 233: 234: 235: 236: 237: 238: 239: 240: 241: 242: 243: 244: 245: 246: 247: 248: 249: 250: 251: 252: 253: 254: 255: 256: 257: 258: 259: 260: 261: 262: 263: 264: 265: 266: 267: 268: 269: 270: 271: 272: 273: 274: 275: 276: 277: 278: 279: 280: 281: 282: 283: 284: 285: 286: 287: 288: 289: 290: 291: 292: 293: 294: 295: 296: 297: 298: 299: 300: 301: 302: 303: 304: 305: 306: 307: 308: 309: 310: 311: 312: 313: 314: 315: 316: 317: 318: 319: 320: 321: 322: 323: 324: 325: 326: 327: 328: 329: 330: 331: 332: 333: 334: 335: 336: 337: 338: 339: 340: 341: 342: 343: 344: 345: 346: 347: 348: 349: 350: 351: 352: 353: 354: 355: 356: 357: 358: 359: 360: 361: 362: 363: 364: 365: 366: 367: 368: 369: 370: 371: 372: 373: 374: 375: 376: 377: 378: 379: 380: 381: 382: 383: 384: 385: 386: 387: 388: 389: 390: 391: 392: 393: 394: 395: 396: 397: 398: 399: 400: 401: 402: 403: 404: 405: 406: 407: 408: 409: 410: 411: 412: 413: 414: 415: 416: 417: 418: 419: 420: 421: 422: 423: 424: 425: 426: 427: 428: 429: 430: 431: 432: 433: 434: 435: 436: 437: 438: 439: 440: 441: 442: 443: 444: 445: 446: 447: 448: 449: 450: 451: 452: 453: 454: 455: 456: 457: 458: 459: 460: 461: 462: 463: 464: 465: 466: 467: 468: 469: 470: 471: 472: 473: 474: 475: 476: 477: 478: 479: 480: 481: 482: 483: 484: 485: 486: 487: 488: 489: 490: 491: 492: 493: 494: 495: 496: 497: 498: 499: 500: 501: 502: 503: 504: 505: 506: 507: 508: 509: 510: 511: 512: 513: 514: 515: 516: 517: 518: 519: 520: 521: 522: 523: 524: 525: 526: 527: 528: 529: 530: 531: 532: 533: 534: 535: 536: 537: 538: 539: 540: 541: 542: 543: 544: 545: 546: 547: 548: 549: 550: 551: 552: 553: 554: 555: 556: 557: 558: 559: 560: 561: 562: 563: 564: 565: 566: 567: 568: 569: 570: 571: 572: 573: 574: 575: 576: 577: 578: 579: 580: 581: 582: 583: 584: 585: 586: 587: 588: 589: 590: 591: 592: 593: 594: 595: 596: 597: 598: 599: 600: 601: 602: 603: 604: 605: 606: 607: 608: 609: 610: 611: 612: 613: 614: 615: 616: 617: 618: 619: 620: 621: 622: 623: 624: 625: 626: 627: 628: 629: 630: 631: 632: 633: 634: 635: 636: 637: 638: 639: 640: 641: 642: 643: 644: 645: 646: 647: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>Sortable table with fixed header</title>
<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)">
<META NAME="Generator" CONTENT="Alf Magne Kalleland (www.dhtmlgoodies.com)">
<meta name="KeyWords" content="Sortable table,DHTML table,table with fixed header,fixed heading,Javascript table">
<meta name="Description" content="A library of DHTML and Ajax scripts">
<meta name="country" content="Norway">
<meta name="organization-Email" content="post@dhtmlgoodies.com">
<meta name="copyright" content="copyright 2005 - Alf Magne Kalleland">
<meta name="coverage" content="Worldwide">
<meta name="revisit_after" content="30days">
<meta name="title" content="A library DHTML and Ajax scripts - DHTMLgoodies.com">
<meta name="identifier" content="http://www.dhtmlgoodies.com/">
<meta name="language" content="English">
<meta name="robots" content="follow">
<meta name="googlebot" content="index, follow">
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
}
p{
margin-bottom:0px;
font-weight:bold;
}
.ad{
margin-top:30px;
}
/* Start layout CSS */
.tableWidget_headerCell,.tableWigdet_headerCellOver,.tableWigdet_headerCellDown{ /* General rules for both standard column header and mouse on header of sortable columns */
cursor:pointer;
border-bottom:3px solid #C5C2B2;
border-right:1px solid #ACA899;
border-left:1px solid #FFF;
background-color: #ECE9D8;
}
.tableWidget_headerCell{ /* Standard column header */
border-top:2px solid #ECE9D8;
}
.tableWigdet_headerCellOver{ /* Rollover on sortable column header */
border-top:2px solid #FFC83C;
}
.tableWidget tbody .tableWidget_dataRollOver{ /* Rollover style on mouse over (Data) */
background-color:#FFF; /* No mouseover color in this example - specify another color if you want this */
}
.tableWigdet_headerCellDown{
border-top:2px solid #FFC83C;
background-color:#DBD8C5;
border-left:1px solid #ACA899;
border-right:1px solid #FFF;
}
.tableWidget td{
margin:0px;
padding:2px;
border-bottom:1px solid #EAE9E1; /* Border bottom of table data cells */
}
.tableWidget tbody{
background-color:#FFF;
}
.tableWidget{
font-family:arial;
font-size:12px;
width:400px;
}
/* End layout CSS */
div.widget_tableDiv {
border:1px solid #ACA899; /* Border around entire widget */
height: 200px;
overflow:auto;
overflow-y:auto;
overflow:-moz-scrollbars-vertical;
width:400px;
}
html>body div.widget_tableDiv {
overflow: hidden;
width:400px;
}
.tableWidget thead{
position:relative;
}
.tableWidget thead tr{
position:relative;
top:0px;
bottom:0px;
}
.tableWidget .scrollingContent{
overflow-y:auto;
overflow:-moz-scrollbars-vertical;
width:100%;
}
</style>
<script type="text/javascript">
/*
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
*/
var tableWidget_tableCounter = 0;
var tableWidget_arraySort = new Array();
var tableWidget_okToSort = true;
var activeColumn = new Array();
var arrowImagePath = "images/"; // Path to arrow images
function addEndCol(obj)
{
if(document.all)return;
var rows = obj.getElementsByTagName('TR');
for(var no=0;no<rows.length;no++){
var cell = rows[no].insertCell(-1);
cell.innerHTML = ' ';
cell.style.width = '13px';
cell.width = '13';
}
}
function highlightTableHeader()
{
this.className='tableWigdet_headerCellOver';
if(document.all){ // I.E fix for "jumping" headings
var divObj = this.parentNode.parentNode.parentNode.parentNode;
this.parentNode.style.top = divObj.scrollTop + 'px';
}
}
function deHighlightTableHeader()
{
this.className='tableWidget_headerCell';
}
function mousedownTableHeader()
{
this.className='tableWigdet_headerCellDown';
if(document.all){ // I.E fix for "jumping" headings
var divObj = this.parentNode.parentNode.parentNode.parentNode;
this.parentNode.style.top = divObj.scrollTop + 'px';
}
}
function sortNumeric(a,b){
a = a.replace(/,/,'.');
b = b.replace(/,/,'.');
a = a.replace(/[^\d\-\.\/]/g,'');
b = b.replace(/[^\d\-\.\/]/g,'');
if(a.indexOf('/')>=0)a = eval(a);
if(b.indexOf('/')>=0)b = eval(b);
return a/1 - b/1;
}
function sortString(a, b) {
if ( a.toUpperCase() < b.toUpperCase() ) return -1;
if ( a.toUpperCase() > b.toUpperCase() ) return 1;
return 0;
}
function cancelTableWidgetEvent()
{
return false;
}
function sortTable()
{
if(!tableWidget_okToSort)return;
tableWidget_okToSort = false;
/* Getting index of current column */
var obj = this;
var indexThis = 0;
while(obj.previousSibling){
obj = obj.previousSibling;
if(obj.tagName=='TD')indexThis++;
}
var images = this.getElementsByTagName('IMG');
if(this.getAttribute('direction') || this.direction){
direction = this.getAttribute('direction');
if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
if(direction=='ascending'){
direction = 'descending';
this.setAttribute('direction','descending');
this.direction = 'descending';
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
if(direction=='descending'){
images[0].style.display='inline';
images[0].style.visibility='visible';
images[1].style.display='none';
}else{
images[1].style.display='inline';
images[1].style.visibility='visible';
images[0].style.display='none';
}
var tableObj = this.parentNode.parentNode.parentNode;
var tBody = tableObj.getElementsByTagName('TBODY')[0];
var widgetIndex = tableObj.id.replace(/[^\d]/g,'');
var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
var images = activeColumn[widgetIndex].getElementsByTagName('IMG');
images[0].style.display='none';
images[1].style.display='inline';
images[1].style.visibility = 'hidden';
if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');
}
activeColumn[widgetIndex] = this;
var cellArray = new Array();
var cellObjArray = new Array();
for(var no=1;no<tableObj.rows.length;no++){
var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
cellArray.push(content);
cellObjArray.push(tableObj.rows[no].cells[indexThis]);
}
if(sortMethod=='N'){
cellArray = cellArray.sort(sortNumeric);
}else{
cellArray = cellArray.sort(sortString);
}
if(direction=='descending'){
for(var no=cellArray.length;no>=0;no--){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}else{
for(var no=0;no<cellArray.length;no++){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}
for(var no2=0;no2<cellObjArray.length;no2++){
cellObjArray[no2].removeAttribute('allreadySorted');
}
tableWidget_okToSort = true;
}
function initTableWidget(objId,width,height,sortArray)
{
width = width + '';
height = height + '';
var obj = document.getElementById(objId);
obj.parentNode.className='widget_tableDiv';
if(navigator.userAgent.indexOf('MSIE')>=0){
obj.parentNode.style.overflowY = 'auto';
}
tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
if(width.indexOf('%')>=0){
obj.style.width = width;
obj.parentNode.style.width = width;
}else{
obj.style.width = width + 'px';
obj.parentNode.style.width = width + 'px';
}
if(height.indexOf('%')>=0){
obj.parentNode.style.height = height;
}else{
obj.parentNode.style.height = height + 'px';
}
obj.id = 'tableWidget' + tableWidget_tableCounter;
addEndCol(obj);
obj.cellSpacing = 0;
obj.cellPadding = 0;
obj.className='tableWidget';
var tHead = obj.getElementsByTagName('THEAD')[0];
var cells = tHead.getElementsByTagName('TD');
for(var no=0;no<cells.length;no++){
cells[no].className = 'tableWidget_headerCell';
cells[no].onselectstart = cancelTableWidgetEvent;
if(no==cells.length-1){
cells[no].style.borderRight = '0px';
}
if(sortArray[no]){
cells[no].onmouseover = highlightTableHeader;
cells[no].onmouseout = deHighlightTableHeader;
cells[no].onmousedown = mousedownTableHeader;
cells[no].onmouseup = highlightTableHeader;
cells[no].onclick = sortTable;
var img = document.createElement('IMG');
img.src = arrowImagePath + 'arrow_up.gif';
cells[no].appendChild(img);
img.style.visibility = 'hidden';
var img = document.createElement('IMG');
img.src = arrowImagePath + 'arrow_down.gif';
cells[no].appendChild(img);
img.style.display = 'none';
}else{
cells[no].style.cursor = 'default';
}
}
var tBody = obj.getElementsByTagName('TBODY')[0];
if(document.all && navigator.userAgent.indexOf('Opera')<0){
tBody.className='scrollingContent';
tBody.style.display='block';
}else{
tBody.className='scrollingContent';
if(tBody.offsetHeight>(tBody.parentNode.parentNode.offsetHeight - 50)) {
tBody.style.height = (obj.parentNode.clientHeight-tHead.offsetHeight) + 'px';
}else{
tBody.style.overflow='hidden';
}
if(navigator.userAgent.indexOf('Opera')>=0){
obj.parentNode.style.overflow = 'auto';
}
}
for(var no=1;no<obj.rows.length;no++){
obj.rows[no].onmouseover = highlightDataRow;
obj.rows[no].onmouseout = deHighlightDataRow;
for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
if(sortArray[no2] && sortArray[no2]=='N')obj.rows[no].cells[no2].style.textAlign='right';
}
}
for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right';
}
tableWidget_tableCounter++;
}
function highlightDataRow()
{
if(navigator.userAgent.indexOf('Opera')>=0)return;
this.className='tableWidget_dataRollOver';
if(document.all){ // I.E fix for "jumping" headings
var divObj = this.parentNode.parentNode.parentNode;
var tHead = divObj.getElementsByTagName('TR')[0];
tHead.style.top = divObj.scrollTop + 'px';
}
}
function deHighlightDataRow()
{
if(navigator.userAgent.indexOf('Opera')>=0)return;
this.className=null;
if(document.all){ // I.E fix for "jumping" headings
var divObj = this.parentNode.parentNode.parentNode;
var tHead = divObj.getElementsByTagName('TR')[0];
tHead.style.top = divObj.scrollTop + 'px';
}
}
</script>
</head>
<body>
<script type="text/javascript"><!--
google_ad_client = "pub-0714236485040063";
/* 468x60, opprettet 14.08.08 */
google_ad_slot = "7945138075";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<p>This widget transforms a table like this</p>
<table>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody class="scrollingContent">
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Photography</td>
<td>54.000</td>
<td>Female</td>
</tr>
<tr>
<td>Magnus</td>
<td>25</td>
<td>Freelancer</td>
<td>65.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<p>into a fancy, sortable table like the one below. It works in both Firefox and IE and it's very easy to implement. <br>
<i>Click on the column headers to sort.</i></p>
<div class="widget_tableDiv">
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody class="scrollingContent">
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
<tr>
<td>Kate</td>
<td>18</td>
<td>Marketing</td>
<td>50.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mona</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mike</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Male</td>
</tr>
<tr>
<td>Mark</td>
<td>25</td>
<td>Production</td>
<td>52.000</td>
<td>Male</td>
</tr>
<tr>
<td>Peter</td>
<td>33</td>
<td>Production</td>
<td>55.000</td>
<td>Male</td>
</tr>
<tr>
<td>Jennifer</td>
<td>24</td>
<td>Production</td>
<td>49.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>25</td>
<td>Photography</td>
<td>51.000</td>
<td>Male</td>
</tr>
<tr>
<td>Anna</td>
<td>42</td>
<td>Head of photography</td>
<td>56.000</td>
<td>Female</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Photography</td>
<td>54.000</td>
<td>Female</td>
</tr>
<tr>
<td>Magnus</td>
<td>25</td>
<td>Freelancer</td>
<td>65.000</td>
<td>Male</td>
</tr>
<tr>
<td>Johnny</td>
<td>-29</td>
<td>Freelancer</td>
<td>63.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
// Calling function that creates the table widget
// Input parameters:
// * id of table
// * width of table(examples: 500, 99%)
// * Height of table
// * Array of sortable columns ('S' = String, 'N' = numeric, false = no sort )
initTableWidget('myTable',600,250,Array('S','N',false,'N','S'));
</script>
</body>
</html>
|
Advertisement