Javascript 如何使此表排序脚本以不同的方式处理不同的表?
我发现了一个很好的表内容排序脚本。它可以对多个表的内容进行排序,并且是轻量级的。但是,它使默认排序列(由脚本中必须匹配HTML排序的一个特定值确定)对每个表都相同。虽然我有不同的表,具有不同的特征,因此具有不同的默认排序列 是否可以使此脚本为不同的表分配不同的默认排序列号?这是一个由两部分组成的脚本(我尝试的内容见下文): 第一部分,单独文件:Javascript 如何使此表排序脚本以不同的方式处理不同的表?,javascript,sorting,html-table,Javascript,Sorting,Html Table,我发现了一个很好的表内容排序脚本。它可以对多个表的内容进行排序,并且是轻量级的。但是,它使默认排序列(由脚本中必须匹配HTML排序的一个特定值确定)对每个表都相同。虽然我有不同的表,具有不同的特征,因此具有不同的默认排序列 是否可以使此脚本为不同的表分配不同的默认排序列号?这是一个由两部分组成的脚本(我尝试的内容见下文): 第一部分,单独文件: function TSorter(){ var table = Object; var trs = Array; var ths
function TSorter(){
var table = Object;
var trs = Array;
var ths = Array;
var prevSortCol = '3';
var curSortCol = Object;
var sortType = Object;
function get(){}
function getCell(index){
return trs[index].cells[curSortCol]
}
/*----------------------INIT------------------------------------*/
// Initialize the variable
// @param tableName - the name of the table to be sorted
/*--------------------------------------------------------------*/
this.init = function(tableName)
{
table = document.getElementById(tableName);
ths = table.getElementsByTagName("th");
for(var i = 0; i < ths.length ; i++)
{
ths[i].onclick = function()
{
sort(this);
}
}
return true;
};
/*----------------------SORT------------------------------------*/
// Sorts a particular column. If it has been sorted then call reverse
// if not, then use quicksort to get it sorted.
// Sets the arrow direction in the headers.
// @param oTH - the table header cell (<th>) object that is clicked
/*--------------------------------------------------------------*/
function sort(oTH)
{
curSortCol = oTH.cellIndex;
sortType = oTH.abbr;
trs = table.tBodies[0].getElementsByTagName("tr");
//set the get function
setGet(sortType)
// it would be nice to remove this to save time,
// but we need to close any rows that have been expanded
for(var j=0; j<trs.length; j++)
{
if(trs[j].className == 'detail_row')
{
closeDetails(j+2);
}
}
// if already sorted just reverse
if(prevSortCol == curSortCol)
{
oTH.className = (oTH.className != 'descend' ? 'descend' : 'ascend' ); // reversed from original
reverseTable();
}
// not sorted - call quicksort
else
{
oTH.className = 'descend'; // reversed from original
if(ths[prevSortCol].className != 'exc_cell'){ths[prevSortCol].className = '';}
quicksort(0, trs.length);
}
prevSortCol = curSortCol;
}
/*--------------------------------------------------------------*/
// Sets the GET function so that it doesnt need to be
// decided on each call to get() a value.
// @param: colNum - the column number to be sorted
/*--------------------------------------------------------------*/
function setGet(sortType)
{
switch(sortType)
{
case "link_column":
get = function(index){
return getCell(index).firstChild.firstChild.nodeValue;
};
break;
default:
get = function(index){ return getCell(index).firstChild.nodeValue;};
break;
};
}
/*-----------------------EXCHANGE-------------------------------*/
// A complicated way of exchanging two rows in a table.
// Exchanges rows at index i and j
/*--------------------------------------------------------------*/
function exchange(i, j)
{
if(i == j+1) {
table.tBodies[0].insertBefore(trs[i], trs[j]);
} else if(j == i+1) {
table.tBodies[0].insertBefore(trs[j], trs[i]);
} else {
var tmpNode = table.tBodies[0].replaceChild(trs[i], trs[j]);
if(typeof(trs[i]) == "undefined") {
table.appendChild(tmpNode);
} else {
table.tBodies[0].insertBefore(tmpNode, trs[i]);
}
}
}
/*----------------------REVERSE TABLE----------------------------*/
// Reverses a table ordering
/*--------------------------------------------------------------*/
function reverseTable()
{
for(var i = 1; i<trs.length; i++)
{
table.tBodies[0].insertBefore(trs[i], trs[0]);
}
}
/*----------------------QUICKSORT-------------------------------*/
// This quicksort implementation is a modified version of this tutorial:
// http://www.the-art-of-web.com/javascript/quicksort/
// @param: lo - the low index of the array to sort
// @param: hi - the high index of the array to sort
/*--------------------------------------------------------------*/
function quicksort(lo, hi)
{
if(hi <= lo+1) return;
if((hi - lo) == 2) {
if(get(hi-1) > get(lo)) exchange(hi-1, lo);
return;
}
var i = lo + 1;
var j = hi - 1;
if(get(lo) > get(i)) exchange(i, lo);
if(get(j) > get(lo)) exchange(lo, j);
if(get(lo) > get(i)) exchange(i, lo);
var pivot = get(lo);
while(true) {
j--;
while(pivot > get(j)) j--;
i++;
while(get(i) > pivot) i++;
if(j <= i) break;
exchange(i, j);
}
exchange(lo, j);
if((j-lo) < (hi-j)) {
quicksort(lo, j);
quicksort(j+1, hi);
} else {
quicksort(j+1, hi);
quicksort(lo, j);
}
}
}
我试着把它放在几个地方,但都不起作用:
if (table.id == 'score-x-year-for-one-patho')
var prevSortCol = '0';
if (table.id == 'score-x-patho-in-one-year')
var prevSortCol = '3';
有人知道该如何修改脚本吗 这台桌子分拣机似乎是Terill Dent的。请参阅链接,您可以对每列上的表进行排序 这里介绍了如何初始化每列的排序:“在开始使用实际表之前,我们需要初始化TSorter对象内的变量,并将onclick行为添加到表头行的单元格中。从onclick处理程序内部引用时必须小心,因为它引用的是单击的单元格,而不是TSorter。“ 据我所知,您必须为
TSorter()
函数中的每个列定义onclick
事件处理程序
编辑-错误:在函数开头,默认排序列似乎设置为3:
var prevSortCol = '3';
如何在默认列上排序?我只需在特定列的init()
函数中触发事件。您可以在标题中为列设置ID,在init()
函数中获取该ID,并在其上触发单击事件。例如:
在表部分:
<th id='defaultCol'>Col. name</th>
如果默认排序列的索引与previsortcol
不相同,这将起作用。如果它们相同,则必须更改previsortcol
,并且不能将其设置为-1
或列数-1中的更大值。Previsortcol在函数开始时确实设置为3。这就是我尝试更改的原因用我的小if
块将其与表的id一起更改。但这不起作用——没有任何区别。我应该如何做?可以以一种相当简单的方式完成吗?
<th id='defaultCol'>Col. name</th>
function init() {
var TableSorter1 = new TSorter;
TableSorter1.init('housing_table_1');
var elem = document.getElementById("defaultCol");
if (typeof elem.onclick == "function") {
elem.onclick.apply(elem);
}
}
window.onload = init;