473,770 Members | 5,925 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Table Sort

I am using sorttable.js to sort a table which works fine which allows a
user to sort the table by clicking on the column header. Is there some
code I could add to the page (onload or something) to auto sort by the
first column without user clicking on it. Here is the sorttable.js
code.

addEvent(window , "load", sortables_init) ;

var SORT_COLUMN_IND EX;

function sortables_init( ) {
// Find all tables with class sortable and make them sortable
if (!document.getE lementsByTagNam e) return;
tbls = document.getEle mentsByTagName( "table");
for (ti=0;ti<tbls.l ength;ti++) {
thisTbl = tbls[ti];
if (((' '+thisTbl.class Name+' ').indexOf("sor table") != -1) &&
(thisTbl.id)) {
//initTable(thisT bl.id);
ts_makeSortable (thisTbl);
}
}
}

function ts_makeSortable (table) {
if (table.rows && table.rows.leng th > 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);
if (cell.getAttrib ute('sortsuppre ss')) {
continue;
}
cell.innerHTML = '<a href="#" class="sorthead er"
onclick="ts_res ortTable(this); return false;">'+txt+' <span
class="sortarro w">&nbsp;&nbsp; &nbsp;</span></a>';
}
}

function ts_getInnerText (el) {
if (typeof el == "string") return el;
if (typeof el == "undefined" ) { return el };
if (el.innerText) 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 += ts_getInnerText (cs[i]);
break;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}
}
return str;
}

function ts_resortTable( lnk) {
// get the span
var span;
for (var ci=0;ci<lnk.chi ldNodes.length; ci++) {
if (lnk.childNodes[ci].tagName &&
lnk.childNodes[ci].tagName.toLowe rCase() == 'span') span =
lnk.childNodes[ci];
}
var spantext = ts_getInnerText (span);
var td = lnk.parentNode;
var column = td.cellIndex;
var table = getParent(td,'T ABLE');
var row_count = 0;
var test_row = 1;
var i, el;

var sortval =
table.rows[test_row].cells[column].getAttribute(' sortval');

// Work out a type for the column
if (table.rows.len gth <= 1) return;
for (i=1; i<table.rows.le ngth; i++) {
if (table.rows[i].id.indexOf('se ction_row') == -1) {
test_row = i;
break;
}
}

if (typeof(sortval ) !='undefined' && sortval)
{
sortfn = ts_sort_sortval ;
} else {
var itm = ts_getInnerText (table.rows[test_row].cells[column]);
sortfn = ts_sort_caseins ensitive;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn =
ts_sort_date;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^[$]/)) sortfn = ts_sort_currenc y;
if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric ;
}
SORT_COLUMN_IND EX = column;
var firstRow = new Array();
var newRows = new Array();
for (i=0;i<table.ro ws[0].length;i++) {
firstRow[i] = table.rows[0][i];
}
for (j=1;j<table.ro ws.length;j++) {
// We don't sort section/folder rows, so we skip them here:
if ((table.rows[j].parentNode.nod eName == 'TBODY')
&& (table.rows[j].id.indexOf("se ction_row") == -1)) {
newRows[row_count] = table.rows[j];
row_count++;
}
}

newRows.sort(so rtfn);

if (span.getAttrib ute("sortdir") == 'down') {
ARROW = '&nbsp;&nbsp;&u arr;';
newRows.reverse ();
span.setAttribu te('sortdir','u p');
} else {
ARROW = '&nbsp;&nbsp;&d arr;';
span.setAttribu te('sortdir','d own');
}

// We appendChild rows that already exist to the tbody, so it moves
them rather than creating new ones
// don't do sortbottom rows
for (i=0;i<newRows. length;i++) { if (!newRows[i].className ||
(newRows[i].className && (newRows[i].className.inde xOf('sortbottom ') ==
-1))) table.tBodies[0].appendChild(ne wRows[i]);}
// do sortbottom rows only
for (i=0;i<newRows. length;i++) { if (newRows[i].className &&
(newRows[i].className.inde xOf('sortbottom ') != -1))
table.tBodies[0].appendChild(ne wRows[i]);}

// Delete any other arrows there may be showing
var allspans = document.getEle mentsByTagName( "span");
for (var ci=0;ci<allspan s.length;ci++) {
if (allspans[ci].className == 'sortarrow') {
if (getParent(alls pans[ci],"table") ==
getParent(lnk," table")) { // in the same table as us?
allspans[ci].innerHTML = '&nbsp;&nbsp;&n bsp;';
}
}
}

span.innerHTML = ARROW;
}

function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLo werCase() ==
pTagName.toLowe rCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.pa rentNode, pTagName);
}
function ts_sort_date(a, b) {
// y2k notes: two digit years less than 50 are treated as 20XX,
greater than 50 are treated as 19XX
aa = ts_getInnerText (a.cells[SORT_COLUMN_IND EX]);
bb = ts_getInnerText (b.cells[SORT_COLUMN_IND EX]);
if (aa.length == 10) {
dt1 = aa.substr(6,4)+ aa.substr(3,2)+ aa.substr(0,2);
} else {
yr = aa.substr(6,2);
if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
dt1 = yr+aa.substr(3, 2)+aa.substr(0, 2);
}
if (bb.length == 10) {
dt2 = bb.substr(6,4)+ bb.substr(3,2)+ bb.substr(0,2);
} else {
yr = bb.substr(6,2);
if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
dt2 = yr+bb.substr(3, 2)+bb.substr(0, 2);
}
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
}

function ts_sort_currenc y(a,b) {
aa =
ts_getInnerText (a.cells[SORT_COLUMN_IND EX]).replace(/[^0-9.]/g,'');
bb =
ts_getInnerText (b.cells[SORT_COLUMN_IND EX]).replace(/[^0-9.]/g,'');
return parseFloat(aa) - parseFloat(bb);
}

function ts_sort_numeric (a,b) {
aa = parseFloat(ts_g etInnerText(a.c ells[SORT_COLUMN_IND EX]));
if (isNaN(aa)) aa = 0;
bb = parseFloat(ts_g etInnerText(b.c ells[SORT_COLUMN_IND EX]));
if (isNaN(bb)) bb = 0;
return aa-bb;
}

function ts_sort_caseins ensitive(a,b) {
aa = ts_getInnerText (a.cells[SORT_COLUMN_IND EX]).toLowerCase() ;
bb = ts_getInnerText (b.cells[SORT_COLUMN_IND EX]).toLowerCase() ;
if (aa==bb) return 0;
if (aa == '') return 1;
if (bb == '') return -1;
if (aa<bb) return -1;
return 1;
}

function ts_sort_sortval (a,b) {
aa = a.cells[SORT_COLUMN_IND EX].getAttribute(' sortval');
bb = b.cells[SORT_COLUMN_IND EX].getAttribute(' sortval');
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
}

function ts_sort_default (a,b) {
aa = ts_getInnerText (a.cells[SORT_COLUMN_IND EX]);
bb = ts_getInnerText (b.cells[SORT_COLUMN_IND EX]);
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
}
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventLi stener){
elm.addEventLis tener(evType, fn, useCapture);
return true;
} else if (elm.attachEven t){
var r = elm.attachEvent ("on"+evType , fn);
return r;
} else {
alert("Handler could not be removed");
}
}

Aug 10 '05 #1
4 3308
The answer is right on the authors website..
Sorting a table the first time the page is loaded
Lots of people ask, "how do I make sorttable sort the table the first time
the page is loaded?" The answer is: you don't. Sorttable is about changing
the HTML that is served from your server without a page refresh. When the
page is first served from the server, you have to incur the wait for it to
be served anyway. So, if you want the table sorted when a page is first
displayed, serve the table in sorted order. Tables often come out of a
database; get the data from the database in a sorted order with an ORDER BY
clause in your SQL.

The other thing that people say to that is: no, no, no, you've got it wrong,
I want people who have visited the page before and sorted the data to get
the data sorted that way again on their next visit, so I need sorttable to
run when the page loads. No, you don't. Any solution which involves you
running sorttable as soon as the page loads (i.e., without user input) is a
wrong solution. To do what you want, what you should do is:

1.. Hack sorttable.js so that it sets a cookie when a table is sorted,
storing which table was sorted and which column it was sorted by, and
whether that sort was ascending or descending.
2.. Change your server code that generates the HTML in the first place to
read the cookie, if it exists, and serve the data sorted in the way that the
cookie dictates.
This procedure is left as an exercise for the reader. It would be a useful
addition, but I can't add it to the library because I don't know how your
server code works, and I won't add something that fires sorttable to do
sorting as soon as the page loads. That's the wrong solution; if you're
determined to do it then I can't stop you, but you're on your own.
Aug 11 '05 #2
If you DON"T have an answer, DON"T reply. I read all that stuff
already. I got the ANSWER from another group which works perfectly. I
couldn't get the data in the sorted order I wanted from the database.
So the answer isn't you don't. The answer is you can if you need to. So
remember. If you DON"T have an answer, DON"T reply.

Aug 11 '05 #3
je*****@charter .net wrote:
I am using sorttable.js to sort a table which works fine which allows a
user to sort the table by clicking on the column header. Is there some
code I could add to the page (onload or something) to auto sort by the
first column without user clicking on it. Here is the sorttable.js
code.

addEvent(window , "load", sortables_init) ;

[snip]

If it matters to you, that table sort routine fails in Safari (A bug in
Safari, the browser always returns 0(zero) for td/thNode.cellInde x.)
However, I have an example at :
http://www.mickweb.com/football/alea...files2005.html

that sorts the names by surnames (column #3) onload.
I'd be glad to help you, if it overwhelms you...

Mick
Aug 11 '05 #4
je*****@charter .net said the following on 8/11/2005 10:22 AM:
If you DON"T have an answer, DON"T reply.
If you can't quote, would you mind not posting?
I read all that stuff already.
Then you obviously did not comprehend it.
I got the ANSWER from another group which works perfectly.
Does it "work perfectly" or do you just *think* it does?
I couldn't get the data in the sorted order I wanted from the database.


Yes you could, you just didn't know how.
And to prove my point, you now have the data sorted so you *must* be
able to get it sorted.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Aug 11 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
2357
by: xah | last post by:
i'm just starting out on javascript. can anyone show me how to go about writing a code to sort a table column? something like the following: <table border="1"> <tr> <td>
8
3271
by: Együd Csaba | last post by:
Hi All, how can I improve the query performance in the following situation: I have a big (4.5+ million rows) table. One query takes approx. 9 sec to finish resulting ~10000 rows. But if I run simultaneously 4 similar queries it takes nearly 5 minutes instead of 4 times 9 seconds or something near of that. here is a sample query: select mertido, fomeazon, ertektipus, mertertek from t_me30 where fomeazon in (select distinct fomeazon...
26
5368
by: Daron | last post by:
How do I sort a table, from a form. I can't use SQL! WE have an Access application that is created by an outside vendor. The one form states: "Please make sure all records in table are sorted by date..." The application is not locked or hidden in any way, but is fairly involved. I would like to be able to simply add a button to this form to sort the table.
3
1876
by: =?Utf-8?B?UHVjY2E=?= | last post by:
Are there any good built-in or availble functions that I can call to sort my dataset datatalbe based on 1 or more of the table's columns? -- Thanks.
7
4827
by: Kamal | last post by:
Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the expandable row, the hidden row is made visible with css. The problem is when i sort the rows, the hidden rows get sorted as well which i don't want and want to be moved (while sorting) relative to their parent rows. The following is my complete html code...
4
2147
osward
by: osward | last post by:
I had made a table colum sortable and paging the table, following are the code // Display Event List echo "<center>"._EVENTLIST."</center><br>"; $now = Date(Y-m-d); // sort table colum if(!isset($_GET)){ $page = 1; } else {
2
3115
by: Tommy Holm Jakobsen | last post by:
Hi, I was wondering how I can sort a HTML table the smartest way. I've got the following table: <table id="customersTable" class="dataTable"> <thead> <tr> <th>Kundenavn</th> <th>POB kunde nr.</th>
5
4199
by: Stepheno | last post by:
Hi, I am a recently converted Iseries (AS/400) RPG programmer trying to learn HTML/CSS/JavsScript all at the same time (not fun). My problem deals mostly with CSS. I will be reveiving a table, for which number of rows/columns i will not know, and I have to pretty up the table, including a verical scroll bar. This has to work in IE6, IE7, and FireFox 3.5. The CSS I currently have will give me a scrollable table, but only if I hard code...
5
4956
by: jrod11 | last post by:
hi, I found a jquery html table sorting code i have implemented. I am trying to figure out how to edit how many colums there are, but every time i remove code that I think controls how many colums there are, it crashes. There are currently 6 columns, and I only want 4. How do I remove the last two (discount and date)? Here is a link: http://www.jaredmoore.com/tablesorter/docs/salestable.html Here is some jquery js that I think...
0
9425
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10228
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10057
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9869
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8883
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5449
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3970
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3575
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2816
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.