View Full Version : trying to table sort w/ AJAX

12-11-2006, 12:08 AM
HI all,

I am using AJAX to help grab records from a database..this works fine; however, I had been using a table sorting .js. I was thinking it could be done but perhaps I am not looking at it right or possibly it cannot be done. I was thinking it could because the script does not error out on me and does sort by keyboard. I am baffled. Bottom line is this..is it possible to sort a table AFTER an AJAX call using javascript?

here is a simple table I used to show the problem...thanks!

Demo with sorting problem to help those figure out my problem (http://k.domaindlx.com/bslintx/peace/show_colors_form.asp)

12-11-2006, 07:19 AM
Bummer, no ideas?

Well, I went ahead and coded a server-side solution. I really would have liked to use javascript instead of hitting the server again...but it does the trick for me. Pros and Cons on both. Server hit being a con while minimal coding needed to sort easily on dates/numbers/text and fast on larger recordsets

I still would love to know why it will not show a link/clickable header...if you happen to know please post it...it's appreciated

for those interested in server-side solution:

see it here:Sorting done on the server mixed w/ ajax (http://k.domaindlx.com/bslintx/peace/show_colors_form_sort.asp)

sOrderBy = Request.QueryString("order_by")
sSortOrder = Request.QueryString("sort_order")

If isNumeric(sOrderBy) Then sOrderBy = CINT(sOrderBy)

Select Case sOrderBy
Case 0
sOrderBy = "ORDER BY ColorID ASC"
sSortOrder = "ASC"
sArrow = ""
Case 1
Select Case sSortOrder
Case "ASC"
sOrderBy = "ORDER BY ColorID DESC"
sSortOrder = "DESC"
sColorIDArrow = "<img style=""position:absolute;right:65px;top:50%;"" src=""images/up.gif"" alt=""Ascending"">"
Case "DESC"
sOrderBy = "ORDER BY ColorID ASC"
sSortOrder = "ASC"
sColorIDArrow = "<img style=""position:absolute;right:65px;top:50%;"" src=""images/down.gif"" alt=""Descending"">"
End Select
Case 2
Select Case sSortOrder
Case "ASC"
sOrderBy = "ORDER BY Color DESC"
sSortOrder = "DESC"
sColorArrow = "<img style=""position:absolute;right:50px;top:50%;"" src=""images/up.gif"" alt=""Ascending"">"
Case "DESC"
sOrderBy = "ORDER BY Color ASC"
sSortOrder = "ASC"
sColorArrow = "<img style=""position:absolute;right:50px;top:50%;"" src=""images/down.gif"" alt=""Descending"">"
End Select
End Select

Set oConn = Server.CreateObject("ADODB.Connection")
sFilePath = Server.MapPath("databases/colors.mdb")
sConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & sFilePath & ";"
oConn.Open sConn

Set oRs = oConn.Execute("SELECT * FROM tblColors " & sOrderBy & ";")

Response.Write "<table border=""1"" width=""400"">" & _
"<tr>" & _
"<th onmouseout=""this.style.color = '#000';this.style.cursor='crosshair'"" onmouseover=""this.style.color = 'blue';this.style.cursor='hand';"" style=""position:relative; width=""100"" onclick=""showColors(1,'" & sSortOrder & "');"">Color ID" & sColorIDArrow & "</th>" & _
"<th onmouseout=""this.style.color = '#000';this.style.cursor='crosshair'"" onmouseover=""this.style.color = 'blue';this.style.cursor='hand'"" style=""position:relative; width=""300"" onclick=""showColors(2,'" & sSortOrder & "');"">Color" & sColorArrow & "</th>" & _

If Not oRs.EOF Then
Do While Not oRs.EOF
Response.Write " <tr>" & vbCrlf & _
" <td>" & oRs("ColorID") & "</td>" & vbCrlf & _
" <td>" & oRs("Color") & "</td>" & vbCrlf & _
" </tr>" & vbCrlf


End If

Response.Write "</table>"


12-11-2006, 07:32 AM
This thread talks about a table sort in javascript which works but there has to be a better way. It is kind of ugly and choppy looking in FireFox although decent in IE. Just click on the pizzas to resort.


I figured it might spur some ideas though.


12-11-2006, 07:38 AM
I just looked at your first example again. It seems like it works fine on my machine. What is the problem? It seems like a way better solution than the one I linked.


12-11-2006, 07:49 AM
hi david,

i appreciate the response.

in IE6 the table header IS NOT clickable. i am a server side programmer and unfortuantely very weak on js. perhaps an ie issue w/ innerhtml? i get no errors and it does sort; however, only by the Ctrl + Alt method. To make sure, are you referring to the first link/first table? if so, this is pure html and yes it does work well. the second table uses ajax to make a call to the database and the server spits out the html code. this is where i have a problem. it simply does not show the "link" to click on in the header...only the text. all that is needed from the sortable.js is to ensure the table has a class associated to "sortable"....and it does...very odd to me...hopefully an answer out there...again thanks for your time

12-11-2006, 08:06 AM
Looking at the source generated the thead for the first table looks like this

<th><a style="text-decoration: none; font-weight: bold; color: black;" onmouseover="this.oldstyle=this.style.cssText;this.style.color='blue'" onmouseout="this.style.cssText=this.oldstyle;" class="abc" href="#" title="Click here to Sort!" onclick="javascript:ml_tsort.resortTable(this.parentNode);return false">Color ID</a></th>
<th><a style="text-decoration: none; font-weight: bold; color: red;" onmouseover="this.oldstyle=this.style.cssText;this.style.color='blue'" onmouseout="this.style.cssText=this.oldstyle;" class="def" href="#" title="Sorted in descending order" onclick="javascript:ml_tsort.resortTable(this.parentNode);return false">Color</a></th>

while the second one looks like this

<th>Color ID</th>

So the problem is that the created table doesn't have the necessary attributes to fire the sorting routines with out the ctrl-alt click. What I'm not sure is who added them to the table in the first place. Let me see if I can find it quick.


12-11-2006, 08:15 AM
It is done with javascript on page initialization with this call


so in theory you should be able to call that function after the ajax is finished in stateChanged right after the responseText is set. You might have to set an id for the table so you can find it easily.


12-11-2006, 08:29 AM
nice debugging...

ok, i understand your theory, but i don't understand the js syntax for this...what and where within the show_colors_ajax.js does this go?

also...ummm..not a web guru by any means ...:o how did you get that particular "source" view? A dom component? i simply do a rt click view source...and of course i only see the the original div placeholder...rather than the postback table from the server.

note: i threw up a simple table to help w/ faster debugging...on my original setup i have multiple tables and ea having a unique name/id while looping through the recordset on the server...ie:

i = 0
initiate loop
i = i + 1
tbl_i id_i
end loop

gonna have to catch up w/ your idea in a little while david...gotta go to works in a few....i will check later...thanks

12-11-2006, 08:44 AM
I got the generated source by using FireFox with the Web Developer extension. Very handy. It makes a new menu under the normal one that has View Souce. Under that menu is View Generated Source which is what the browser is actually displaying at that snapshot in time.


As for where the code goes it should go in the function


Now the question is which one.

function stateChanged()
if (xmlHttp.readyState==4 || xmlHttp.readyState == "complete")

Then you need to add a the id="newTable" to the table returned in your server script. Of course I can't test this so there could be (will probably be) issues but in theory I'd think this should work.