一實用的實現table排序的Javascript類庫
2024-09-06 12:41:30
供稿：網友
一個Javascript 的類庫，用于table內容排序。使用很方便，不用每次都去調用數據庫了。
特別適合多表查詢的排序。加上<tbody>的style.display 切換，也可以實現分頁。
效果演示
用法:
1.添加JS
<SCRIPT src="sorttable.js" type="text/javascript"></SCRIPT>
2.添加TABLE,注意的是：一定要有ID,class為"sortable"
<table class="sortable" id="mytable">
OK,可以了，簡單的吧
如果覺得太單調，自己加點CSS吧，官方給出了改HEAD的CSS
/* Sortable tables */
table.sortable a.sortheader {
background-color:#eee;
color:#666666;
font-weight: bold;
text-decoration: none;
display: block;
}
table.sortable span.sortarrow {
color:black;
text-decoration: none;
}
代碼如下:
addEvent(window, "load", sortables_init);
var SORT_COLUMN_INDEX;
function sortables_init() {
// Find all tables with class sortable and make them sortable
if (!document.getElementsByTagName) return;
tbls = document.getElementsByTagName("table");
for (ti=0;ti<tbls.length;ti++) {
thisTbl = tbls[ti];
if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
//initTable(thisTbl.id);
ts_makeSortable(thisTbl);
}
}
}
function ts_makeSortable(table) {
if (table.rows && table.rows.length > 0) {
var firstRow = table.rows[0];
}
if (!firstRow) return;
// We have a first row: assume it's the header, and make its contents clickable links
for (var i=0;i<firstRow.cells.length;i++) {
var cell = firstRow.cells[i];
var txt = ts_getInnerText(cell);
cell.innerHTML = '<a href="#" class="sortheader" '+
