Response title
This is preview!
Move this topic
Table sorting with multiple <tr> per row of data
in Getting Started
•
7 years ago
I'm evaluating jQuery to see if I can make it do the following.
I want to sort rows in a table. But I have two <tr>
tags per row of data. I've id'd the '1st' <tr> and the
'2nd' <tr> for each row of data. Then I'd like the sort to
occur only on the '1st' <tr>. Then each corresponding
'2nd' <tr> must be displayed after its '1st' <tr>.
The sort would be limited to columns defined in the '1st'
<tr>. Have I made this too complicated? I did it
this way following a tutorial
(http://www.beginnersguidetohtml.com/guides/html/tables/complex-tables)
for displaying data. Maybe I need to rethink my table display.
TIA.
Tom
1
Replies(28)
It would be easier to sort many <tbody>s each with 2 <tr>s.
But either way, it’s
very doable.
Have you tried anything yet?
JΛ̊KE
Leave a comment on jakecigar's reply
No, I haven't tried w/ <tbody>. Can you provide a sample or point
me to something? Also would like to see the js code to include. thx
Leave a comment on tbr34g's reply
If you make the <table> and the sort buttons
in http://jsfiddle.net , I will show you how I would sort the table,
JΛ̊KE
Leave a comment on jakecigar's reply
I entered html in fiddle (http://jsfiddle.net/robbie34/sLkesb0e/2/).
I want to sort on the Project, School, and Location columns, not
on the description. But when sorted, the description row must
follow accordingly.
Let me know what else I can provide.
Thanks.
Leave a comment on tbr34g's reply
http://jsfiddle.net/jakecigar/sLkesb0e/3/ sorts using my plugin JakeCigar/jQuery.sortChildren
The code becomes very simple
- $("thead th").click(function(){
- var col=$(this).index()
- $("table").sortChildren(function(A,B){
- var a=$(A).find("td").eq(col).text(),
- b=$(B).find("td").eq(col).text();
- return a<b?-1:a>b?+1:0
- },1,0)
- })
JΛ̊KE
Leave a comment on jakecigar's reply
Thanks for the quick response. I'm working on it now and will let
you know the results!
Tom
Leave a comment on tbr34g's reply
Note that I used multiple <tbody>s. Without them it would be very
messy code!
JΛ̊KE
Leave a comment on jakecigar's reply
I don't see multiple <tbody>s. Can you explain further where
I need to insert additional <tbody>s?
Here's my thought process on what I need to do, please correct
where necessary...
- insert <script src='xxx'> tags, one for jquery, one for
sortChildren. jquery is referenced online, sortChildren.js is
copied to my js folder.
- create a function in my <script> section and paste your
code into it. i.e. function jakesort() {
- create onclick events on <th> to invoke jakesort()
<<corrected the name :)
Is that the right idea?
Leave a comment on tbr34g's reply
- <table valign='top' align='right'>
- <thead>
- <tr>
- <th scope='col' align='left'>
- <u>Project</u>
- </th>
- <th scope='col' align='center'>
- <u>School</u>
- </th>
- <th scope='col'>
- <u>Location</u>
- </th>
- </tr>
- </thead>
- <tbody>
- <tr id='row1'>
- <td>
- <h2>Z Basketball Uniforms</h2>
- </td>
- <td>
- Perfect High School
- </td>
- <td>
- Anytown, NY
- </td>
- </tr>
- <tr id='row2'>
- <td colspan='2'>
- "This is the long description of the item in the list. I don't want to sort on this but I want it to be displayed so it can be read."
- </td>
- </tr>
- </tbody>
- <tbody>
-
- <tr id='row1'>
- <td>
- <h2>Science Lab Equipment</h2>
- </td>
- <td>
- Wilson High School
- </td>
- <td>
- Belmont, NJ
- </td>
- </tr>
- <tr id='row2'>
- <td colspan='2'>
- "The science lab equipment includes test tubes, bunson burners, goggles, safety gloves, and microscopes."
- </td>
- </tr>
- </tbody>
- </table>
I didn’t use your invalidly repeated ids.
You should
download https://raw.githubusercontent.com/JakeCigar/jQuery.sortChildren/master/sortChildren.js
to your own server, it’s very tiny tight code that makes sorting simple.
JΛ̊KE
Maybe you didn’t notice that I used the <TH>s in the <THEAD>
to do the sorting.
JΛ̊KE
Leave a comment on jakecigar's reply
The sort isn't working in the fiddle code
http://fiddle.jshell.net/jakecigar/sLkesb0e/3/
Should it?
Did you have it working? Does it need the js src?
I updated the html (with added <tbody>s) and the javascript
in my source and included the sortChildren.js, and it's not working
there either.
Leave a comment on tbr34g's reply
I tap on Project and
Science Lab goes before Z Basketball Uniforms, then I tap on School
and they go back.
What browser are you using?
JΛ̊KE
Leave a comment on jakecigar's reply
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <title> - jsFiddle demo by jakecigar</title>
- <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
- <script type='text/javascript' src="https://raw.githubusercontent.com/JakeCigar/jQuery.sortChildren/master/sortChildren.js"></script>
- <style type='text/css'>
- </style>
-
-
- <script type='text/javascript'>//<![CDATA[
- $(function(){
- $("thead th").click(function(){
- var col=$(this).index()
- $("table").sortChildren(function(A,B){
- var a=$(A).find("td").eq(col).text(),
- b=$(B).find("td").eq(col).text();
- return a<b?-1:a>b?+1:0
- },1,0)
- })
- });//]]>
-
- </script>
-
-
- </head>
- <body>
- <table valign='top' align='right'>
- <thead>
- <tr>
- <th scope='col' align='left'>
- <u>Project</u>
- </th>
- <th scope='col' align='center'>
- <u>School</u>
- </th>
- <th scope='col'>
- <u>Location</u>
- </th>
- </tr>
- </thead>
- <tbody>
- <tr id='row1'>
- <td>
- <h2>Z Basketball Uniforms</h2>
- </td>
- <td>
- Perfect High School
- </td>
- <td>
- Anytown, NY
- </td>
- </tr>
- <tr id='row2'>
- <td colspan='2'>
- "This is the long description of the item in the list. I don't want to sort on this but I want it to be displayed so it can be read."
- </td>
- </tr>
- </tbody>
- <tbody>
-
- <tr id='row1'>
- <td>
- <h2>Science Lab Equipment</h2>
- </td>
- <td>
- Wilson High School
- </td>
- <td>
- Belmont, NJ
- </td>
- </tr>
- <tr id='row2'>
- <td colspan='2'>
- "The science lab equipment includes test tubes, bunson burners, goggles, safety gloves, and microscopes."
- </td>
- </tr>
- </tbody>
- </table>
-
-
-
-
- </body>
-
-
- </html>
JΛ̊KE
Leave a comment on jakecigar's reply
Leave a comment on tbr34g's reply
OK, it works in Firefox.
Ideas on getting it to work w/ Chrome?
And next question, what about switching the sort (asc/desc) if I
hit the same column?
Leave a comment on tbr34g's reply
http://jsfiddle.net/jakecigar/sLkesb0e/5/ <-- chrome doesn’t like
plugins used directly from github.
JΛ̊KE
Leave a comment on jakecigar's reply
Leave a comment on jakecigar's reply
Awesome! Now to get it working in my code. I'll post my
updates and progress.
Leave a comment on tbr34g's reply
How do I display the <script> tags
in http://jsfiddle.net/jakecigar/sLkesb0e/5/ ?
I need to see
what you updated to avoid github for Chrome.
is <![CDATA[...
needed if using php/js/html? No XML that I'm aware of.
Thx!
Leave a comment on tbr34g's reply
Drop the <![CDATA[
crap. That
’s for compliant XHTML only.
JΛ̊KE
Leave a comment on jakecigar's reply
- <script type='text/javascript'>
- $(function(){
- $("thead th").click(function(){
- var col=$(this).index(),
- direction=$(this).data("direction")||1;
- $("table").sortChildren(function(A,B){
- var a=$(A).find("td").eq(col).text(),
- b=$(B).find("td").eq(col).text();
- return direction*(a<b?-1:a>b?+1:0)
- },1,0)
- $(this).data("direction",direction===1?-1:1)
- })
- })
-
- $.fn.sortChildren=function(cmp,ignoreFirst,ignoreLast){
- return this.each(function(){
- var self=$(this),
- children=$.makeArray(self.children()),
- first=children.splice(0,ignoreFirst||0),
- last=children.splice(-(ignoreLast||0),ignoreLast)
- self.append(first)
- $.each(children.sort(cmp), function(i, child){
- self.append(child)
- })
- self.append(last)
- })
- }
- </script>
JΛ̊KE
Leave a comment on jakecigar's reply
Excellent! It's working great. IE, Chrome, and Firefox look
good. Will check Safari tomorrow. Thanks for the very
responsive help.
It works in Safari. That’s my first browser.
When I decided to share sortChildren, at least one of the jQuery
devs thought it should go into the core. It didn’t make it because the
overwhelming opinion was to keep the core lean.
It’s a very simple algorithm based on the native javaScript sort
method that many people have resorted to writing their own versions.
I’m glad you like it.
JΛ̊KE
Leave a comment on tbr34g's reply
I ran into a snag. One of my columns is an integer (cost).
It's sorting as if it's a char, so ascending looks like:
$1000
$1500
$200
$475
$5500
$800
Can you provide a technique to correct the sort?
Leave a comment on tbr34g's reply
Leave a comment on jakecigar's reply
Check this.
jsfiddle.net/robbie34/zy9nxnLz/2/
I added a fourth column with cost figures.
Tom
Leave a comment on tbr34g's reply
http://jsfiddle.net/jakecigar/zy9nxnLz/3/ introduces
- <th scope='col' data-format="cash">
and some code to convert strings into cash, by removing non-money
character and making the values into numbers…
- if (format==="cash"){
- a= + a.replace(/[^0-9.-]/g,"")
- b= + b.replace(/[^0-9.-]/g,"")
- }
Now that you have strings and cash, adding more formats like
date are only a few lines of code.
JΛ̊KE
Leave a comment on jakecigar's reply
Excellent! It's working great. As you say, I may get into
dates at some point, but for now, that's working great. The cost
numbers are sorting correctly!
Leave a comment on tbr34g's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to tbr34g's question
{"z40672808":[14737000005550878,14737000005551620,14737000005564133,14737000005564135,14737000005564137,14737000005564317,14737000005564319,14737000005564321,14737000005564323,14737000005564325,14737000005564327,14737000005564619,14737000005564621,14737000005564873],"z2950240":[14737000005551614,14737000005551622,14737000005562145,14737000005562147,14737000005562283,14737000005562285,14737000005562291,14737000005562293,14737000005562295,14737000005562297,14737000005562299,14737000005562301,14737000005562303,14737000005562661,14737000005562695]}