本篇文章给大家分享的是有关使用JavaScript怎么弄实现一个点击表头排序功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联公司是专业的玉环网站建设公司,玉环接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行玉环网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
1、index.html文件:
点击表头排序
String | String | Number | Date | No Sort |
apple | Strawberry | 45 | 2001-03-13 | Item 0 |
Banana | orange | 7698 | 1789-07-14 | Item 1 |
orange | Banana | 4546 | 1949-07-04 | Item 2 |
Strawberry | apple | 987 | 1975-08-19 | Item 3 |
Pear | blueberry | 98743 | 2001-01-01 | Item 4 |
blueberry | Pear | 4 | 2001-04-18 | Item 5 |
2、tablesort.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, '/')); } /* alternative to number function * This one is slower but can handle non numerical characters in * the string allow strings like the follow (as well as a lot more) * to be used: * "1,000,000" * "1 000 000" * "100cm" */ function toNumber(s) { return Number(s.replace(/[^0-9/.]/g, "")); } function compareByColumn(nCol, bDescending, sType) { var c = nCol; var d = bDescending; var fTypeCast = String; if (sType == "Number") fTypeCast = Number; else if (sType == "Date") fTypeCast = parseDate; else if (sType == "CaseInsensitiveString") fTypeCast = CaseInsensitiveString; 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); }
3、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 :-) */
以上就是使用JavaScript怎么弄实现一个点击表头排序功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。