JSP点击表头排序

table.html 
<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="tablesortT.js"></script> 
<link type="text/css" rel="StyleSheet" href="tablesort.css" /> 
<head> 
<title>点击表头排序</title>

<style type="text/css"> 
body { 
font-family: Verdana, Helvetica, Arial, Sans-Serif; 
font:   Message-Box; 

code { 
font-size: 1em; 

</style> 
</head> 
<body> 
<table id="MyHeadTab" cellspacing="0" onclick="sortColumn(event)"> 
  
<thead> 
  <tr> 
   <td><a href="#">StringName</a></td> 
   <td title="CaseInsensitiveString"> <a href="#">String</a></td> 
   <td> <a href="#">Number</a></td> 
   <td> <a href="#">Date</a></td> 
   <td> <a href="#">No Sort</a></td> 
  </tr> 
</thead> 
    <tbody> 
  <tr> 
   <td>apple</td> 
   <td>Strawberry</td> 
   <td>45</td> 
   <td>2001-03-13</td> 
   <td>Item 0</td> 
  </tr> 
  <tr> 
   <td>Banana</td> 
   <td>orange</td> 
   <td>7698</td> 
   <td>1789-07-14</td> 
   <td>Item 1</td> 
  </tr> 
  <tr> 
   <td>orange</td> 
   <td>Banana</td> 
   <td>4546</td> 
   <td>1949-07-04</td> 
   <td>Item 2</td> 
  </tr> 
  <tr> 
   <td>Strawberry</td> 
   <td>apple</td> 
   <td>987</td> 
   <td>1975-08-19</td> 
   <td>Item 3</td> 
  </tr> 
  <tr> 
   <td>Pear</td> 
   <td>blueberry</td> 
   <td>98743</td> 
   <td>2001-01-01</td> 
   <td>Item 4</td> 
  </tr> 
  <tr> 
   <td>blueberry</td> 
   <td>Pear</td> 
   <td>4</td> 
   <td>2001-04-18</td> 
   <td>Item 5</td> 
  </tr> 
   </tbody> 
</table> 
</body> 
</html>

tablesort.css 
tr{background: window;} 
td{color: windowtext; font: menu; padding: 1px; padding-left: 5px; padding-right: 5px; 
    border-right: 1px solid buttonshadow; 
    border-bottom: 1px solid buttonshadow; 
}

table  {border-top: 1px solid buttonshadow; 
    border-left: 1px solid buttonshadow; 
    border-right: 1px solid buttonhighlight; 
    border-bottom: 1px solid buttonhighlight; 
     } 
thead td {background: buttonface; font: menu; border: 1px outset white; 
      padding-top: 0; padding: bottom: 0; 
    border-top: 1px solid buttonhighlight; 
    border-left: 1px solid buttonhighlight; 
    border-right: 1px solid buttonshadow; 
    border-bottom: 1px solid buttonshadow; 
    height: 16px; 
    } 
thead .arrow{font-family: webdings; color: black; padding: 0; font-size: 10px; 
   height: 11px; width: 10px; overflow: hidden; 
   margin-bottom: 5; margin-top: -3; padding: 0; padding-top: 0; padding-bottom: 2;} 
   /*nice vertical positioning :-) */

tablesortT.js

var dom = (document.getElementsByTagName) ? true : false; 
var ie5 = (document.getElementsByTagName && document.all) ? true : false; 
var arrowUp, arrowDown;

if (ie5 || dom) 
initSortTable();

function initSortTable() { 
arrowUp = document.createElement("SPAN"); 
var tn = document.createTextNode("5"); 
arrowUp.appendChild(tn); 
arrowUp.className = "arrow";

arrowDown = document.createElement("SPAN"); 
var tn = document.createTextNode("6"); 
arrowDown.appendChild(tn); 
arrowDown.className = "arrow"; 
}

function sortTable(tableNode, nCol, bDesc, sType) { 
var tBody = tableNode.tBodies[0]; 
var trs = tBody.rows; 
var trl= trs.length; 
var a = new Array();

for (var i = 0; i < trl; i++) { 
  a[i] = trs[i]; 
}

var start = new Date; 
window.status = "Sorting data..."; 
a.sort(compareByColumn(nCol,bDesc,sType)); 
window.status = "Sorting data done";

for (var i = 0; i < trl; i++) { 
  tBody.appendChild(a[i]); 
  window.status = "Updating row " + (i + 1) + " of " + trl + 
      " (Time spent: " + (new Date - start) + "ms)"; 
}

// check for onsort 
if (typeof tableNode.onsort == "string") 
  tableNode.onsort = new Function("", tableNode.onsort); 
if (typeof tableNode.onsort == "function") 
  tableNode.onsort(); 
}

function CaseInsensitiveString(s) { 
return String(s).toUpperCase(); 
}

function parseDate(s) { 
return Date.parse(s.replace(/\-/g, ‘/‘)); 
}

function toNumber(s) { 
    return Number(s.replace(/[^0-9\.]/g, "")); 
}

function compareByColumn(nCol, bDescending, sType) { 
var c = nCol; 
var d = bDescending;

var fTypeCast = String;

return function (n1, n2) { 
  if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c]))) 
   return d ? -1 : +1; 
  if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c]))) 
   return d ? +1 : -1; 
  return 0; 
}; 
}

function sortColumnWithHold(e) { 
// find table element 
var el = ie5 ? e.srcElement : e.target; 
var table = getParent(el, "TABLE");

// backup old cursor and onclick 
var oldCursor = table.style.cursor; 
var oldClick = table.onclick;

// change cursor and onclick 
table.style.cursor = "wait"; 
table.onclick = null;

// the event object is destroyed after this thread but we only need 
// the srcElement and/or the target 
var fakeEvent = {srcElement : e.srcElement, target : e.target};

// call sortColumn in a new thread to allow the ui thread to be updated 
// with the cursor/onclick 
window.setTimeout(function () { 
  sortColumn(fakeEvent); 
  // once done resore cursor and onclick 
  table.style.cursor = oldCursor; 
  table.onclick = oldClick; 
}, 100); 
}

function sortColumn(e) { 
var tmp = e.target ? e.target : e.srcElement; 
var tHeadParent = getParent(tmp, "THEAD"); 
var el = getParent(tmp, "TD");

if (tHeadParent == null) 
  return; 
  
if (el != null) { 
  var p = el.parentNode; 
  var i;

// typecast to Boolean 
  el._descending = !Boolean(el._descending);

if (tHeadParent.arrow != null) { 
   if (tHeadParent.arrow.parentNode != el) { 
    tHeadParent.arrow.parentNode._descending = null; //reset sort order  
   } 
   tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow); 
  }

if (el._descending) 
   tHeadParent.arrow = arrowUp.cloneNode(true); 
  else 
   tHeadParent.arrow = arrowDown.cloneNode(true);

el.appendChild(tHeadParent.arrow);

// get the index of the td 
  var cells = p.cells; 
  var l = cells.length; 
  for (i = 0; i < l; i++) { 
   if (cells[i] == el) break; 
  }

var table = getParent(el, "TABLE"); 
  // can‘t fail 
  
  sortTable(table,i,el._descending, el.getAttribute("type")); 

}

function getInnerText(el) { 
if (ie5) return el.innerText; //Not needed but it is faster

var str = "";

var cs = el.childNodes; 
var l = cs.length; 
for (var i = 0; i < l; i++) { 
  switch (cs[i].nodeType) { 
   case 1: //ELEMENT_NODE 
    str += getInnerText(cs[i]); 
    break; 
   case 3: //TEXT_NODE 
    str += cs[i].nodeValue; 
    break; 
  } 
  
}

return str; 
}

function getParent(el, pTagName) { 
if (el == null) return null; 
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase 
  return el; 
else 
  return getParent(el.parentNode, pTagName); 
}

时间: 2024-11-03 22:13:08

JSP点击表头排序的相关文章

大数据集报表点击表头排序

在润乾官方在线 demo的 "交互报表" 中,有介绍 "点击表头排序" 的报表案例,该报表针对普通统计类报表.对于使用大数据集的报表,当按照此方式改造时发现排序没起作用或仅对第一页或前几页排序,后面的都没成功. 要想了解啥原因导致?就需要分析该报表的做法及知道大数据集的取数原理. 首先,来分析下在线 demo“点击报表排序”的做法. 润乾报表中实现排序的方式有两种: 1. 借助数据集 sql,即 order by … 2. 数据集函数 如ds.select() 都有

web中table表格点击表头排序

保证在引用jQuery之后引用之后的两个文件 <script type="text/javascript" src="<%=basePath%>/resource/js/jquery-1.8.2.min.js"></script> <link rel="stylesheet" href="<%=basePath%>/tablesorter/themes/blue/style.css&

DBGridEh 点击表头排序方法

方法1: (不用编程写代码) 程序中引用 单元 EhLibCDS设置DBGridEh的属性:      ColumnDefValues.Title.TitleButton = True      OptionsEh = [ghAutoSortMarking, dghMultiSortMarking]      SortLocal = True 参考: 以下翻译来自EhLib/DataService/readme.txt “在 Ehlib 的 DataService 文件夹下提供了一些可以使数据集

点击表头切换升降序排序方式

需求: 在报表的实际应用中有很多客户希望可以通过点击表头切换该列数据的排序. 实现方式: 超链接结合参数以及单元格表达式来实现,具体举例如下      原表样如下 实现原理:通过点击第一行任意格的值,通过 A2 单元格表达式控制排序 1. 首先在原报表中增加三个参数如下 2. 修改 A2 单元格表达式为  =ds1.select(EMPID;${macro1}:${macro2}) 3. 给需要通过点击表头排序的的报表头单元格设置超链接表达式,比如 : 我要点击 A1 单元格对 EMPID 排序

javascript: 带分组数据的Table表头排序

如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <htm

非常强大的table根据表头排序,点击表头名称,对其内容排序

js代码: 1 /** 2 * 通过表头对表列进行排序 3 * 4 * @param sTableID 5 * 要处理的表ID<table id=''> 6 * @param iCol 7 * 字段列id eg: 0 1 2 3 ... 8 * @param sDataType 9 * 该字段数据类型 int,float,date 缺省情况下当字符串处理 10 */ 11 function orderByName(sTableID, iCol, sDataType) { 12 var oTab

点击表头,实现表格内容的规则排序

描述:实现表格信息的排序功能,当点击表头的属性区域,将表格信息进行排序切换功能,即第一次点击为降序排序,再一次点击进行升序排序. 如图所示:  姓名  力量  敏捷  智力  赵  17  34  13  钱  15  22  16  孙  19  15  20  李  23  15  15 接下来,首先绘制该表格, 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/>

使用js实现表头排序

工作中遇到需要表头排序的地方,我从网上参考很一些东西,汇总一下,写出来这个排序函数,这个运用了array对象的sort()方法,感觉还不错,实现的逻辑比较简单.还有就是排序列是时间格式,用到了正则表达式做了个替换,并转化为时间对象,这两点是整个排序所用到的关键技术 <html> <head> </head> <body>  <table id="tbSort">   <thead>       <tr>

根据表头排序

1 <%-- 2 Created by IntelliJ IDEA. 3 User: Administrator 4 Date: 2014/6/12 5 Time: 15:57 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %