`
limingcai
  • 浏览: 112340 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JSP点击表头排序

    博客分类：
  • Web
JSPAppleCC++C# 
阅读更多
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);
}


分享到：
| Android 屏幕截屏，并将之生成视频文件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js表格点击表头排序

    在JavaScript编程中，实现“js表格点击表头排序”是一个常见的功能需求，特别是在网页数据展示时，用户往往希望可以通过点击表头快速对数据进行升序或降序排列。本知识点将详细讲解如何在纯前端环境下，利用...

    tablesorter实现HTML表格点击表头排序

    以下是对`tablesorter`实现HTML表格点击表头排序的详细讲解： 1. **安装与引入**：首先，你需要在项目中下载或引用`tablesorter`库。这可以通过CDN链接、npm安装或者直接下载js文件来完成。例如，你可以使用以下CDN...

    js实现点击表头排序

    在JavaScript中实现点击表头排序是一项常见的前端开发任务，它涉及到HTML、CSS和JavaScript的交互。这个功能在数据展示和管理上非常实用，比如在网页上的数据表格中，用户可以通过点击列头对数据进行升序或降序排列...

    JavaScript实现表格排序，点击表头切换升序降序，非常简单

    这篇教程将详细介绍如何使用JavaScript实现这一功能，让使用者可以点击表头来轻松切换升序或降序排列。 首先，我们需要一个基本的HTML结构，包含一个表格以及用于排序的表头。例如： ```html &lt;!DOCTYPE html&gt; ...

    jsp+js实现可排序表格

    在IT行业中，构建可排序的表格是Web应用中常见的需求，尤其...在客户端，JavaScript提供了排序功能，使得用户可以通过点击表头轻松地对数据进行排序。这种技术组合在Web开发中非常常见，能够提供高效、灵活的用户体验。

    js 根据表头进行排序

    "根据表头进行排序"的功能允许用户通过点击表格的列标题（表头）来对表格内容进行升序或降序排序。这个功能对于展示大量结构化数据非常有用，让用户能够快速定位和理解数据。以下是对这一功能的详细解释： 1. **...

    润乾报表_点击列标题排序

    ### 润乾报表_点击列标题排序 #### 背景与概述 在报表工具的应用场景中，用户经常需要对报表数据进行排序以便更好地分析和理解数据。润乾报表作为一款功能强大的国产报表工具，提供了多种方法实现点击列标题进行...

    实现表格按照列排序和拖拽行排序

    用户可以通过点击表头来对表格数据进行排序。这个插件内部实现了复杂的排序算法，可以处理各种类型的数据，如数字、日期、货币等。它还能自动处理表头的排序图标，提供友好的用户反馈。 在实际应用中，我们首先需要...

    JavaScript与displayTag标签的合作 -- 操作表头.

    在这个例子中，当用户点击表头时，JavaScript通过AJAX向服务器发送请求，服务器根据请求的列名和排序方式进行数据排序，然后返回排序后的新数据。JavaScript将新数据应用到页面，displayTag会自动根据新数据重新绘制...

    javascript带箭头的表格排序实例

    在JavaScript编程中，实现带箭头的表格排序是一种常见的需求，尤其在数据展示和交互式网页设计中。...用户点击表头时，JavaScript会根据用户选择的列对表格数据进行排序，并更新箭头的方向，提供直观的用户体验。

    HTML/PHP/ASP/ASP.NET/JSP... jQuery ui.ariaSorTable 支持排序、分页的表格

    HTML/PHP/ASP/ASP.NET/JSP... jQuery ui.ariaSorTable 支持排序、分页的表格 jQuery ui.ariaSorTable 支持分页的表格组件，想实现无刷新分页的...除分页外，本表格组件支持表格双击表头排序，简单方便，推荐给大家。

    JSP页面表格初始化

    - 表头设置：`setHeader`方法用于设置表格头部列名。 - 设置单元格类型：通过`setColTypes`方法设置每一列的数据类型（如可编辑、只读等）。 - 设置列排序规则：通过`setColSorting`方法设置每一列是否可以排序及...

    jquery flexigrid 支持前台排序

    用户可以通过点击表头来改变数据的排序方式。Tablesorter会自动处理这些点击事件，并根据用户的选择对表格数据进行升序或降序排列。 需要注意的是，由于Flexigrid和Tablesorter都是基于jQuery的插件，它们可能在...

    9种jquery纯页面分页排序

    - 绑定事件，如点击分页按钮或表头，触发相应的操作。 8. **优化与性能**： 在实际应用中，考虑到性能问题，应尽量减少一次性加载的数据量，采用Ajax异步加载，只加载当前视口内的数据。同时，对于大数据量的场景...

    jsp开发插件2

    2. **分页和排序**：通过简单的配置，DisplayTag能够自动实现表格数据的分页和排序，减轻了开发者的工作负担。 3. **导出功能**：DisplayTag支持将表格数据导出为CSV、Excel、PDF等格式，方便用户进行数据处理和...

    JSP标签display tag实例

    通过设置`&lt;display:table&gt;`的`pageLength`属性可以控制每页显示的行数，而`sort`属性启用后，用户可以通过点击列头进行排序。 ```jsp &lt;!-- 列定义 --&gt; ``` ### 5. 国际化支持 Display Tag库支持多种语言，可以...

    datatables表格分页、检索、排序、滚动条

    用户可以通过点击表头来对数据进行升序或降序排序。这个功能尤其适用于需要比较不同列值的场景。Datatables支持多列排序，并且可以灵活地调整排序顺序。 4. 滚动条： 当表格内容过多，无法在屏幕上完全显示时，...

    Struts2中使用displaytag标签总结

    2. **排序**：用户可以通过点击表头进行列排序，这通过`&lt;display:table&gt;`的`sort="true"`属性实现，还可以通过`sortProperty`指定默认排序的列。 3. **导出数据**：使用`&lt;display:export&gt;`标签，可以方便地将表格...

    tabletag_0.2（JSP标签）

    1. **表格结构**：允许开发者通过简单的标签声明来创建表格的行（`&lt;tr&gt;`）、列（`&lt;td&gt;`）以及表头（`&lt;th&gt;`）。例如，`&lt;tabletag:table&gt;`用于开始一个表格，`&lt;tabletag:row&gt;`定义一行，`&lt;tabletag:column&gt;`表示一列...

    一个山寨版struts，带分页标签

    在"描述"中提到的"点击表头可排序"，这是增强分页功能的一个常见特性。用户可以通过点击表格的列标题来按该列的值对数据进行升序或降序排序。实现这一功能通常涉及到后台数据处理，需要根据用户的排序请求动态调整...

Magicbox
Global site tag (gtag.js) - Google Analytics