aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Help me to have a sortable table in my html profile! Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Help me to have a sortable table in my html profile!" Watch "Help me to have a sortable table in my html profile!" New topic
Author

Help me to have a sortable table in my html profile!

gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
Dear everyone,
I really do not know how to make it.. I feel terrible.
I would like someone who can tell me step by step how I can build up a html code with java script to see that it's working.
I was reading many pages about this topic and making it but I could not make a useful html table.
In descriptions I red that you have to add this here and after copy that there and put those there too.... but WHERE in the html code?
I would kindly ask someone to write down a useful html sample code here with 2 colums and 4 rows with sample names to see how I can make my own bigger table after understanding the structure. Please, also tell me if I have to change anything (even a dot) in or out the html code.
Thank you so much and I appriciate your help.
George
Muhammad Saifuddin
Ranch Hand

Joined: Dec 06, 2005
Posts: 1321


Welcome to Javaranch.

hope this Example helps.


Saifuddin..
[Blog][Linkedin] How To Ask Questions On JavaRanch My OpenSource
gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
hello
thank you so much but it is more confusing than others what I red before.
I would like to get a total code (sample of course with a small sample table)that I only put in a blank html editor.
Thank you so much again.
Geo
Zaeed McColin
Ranch Hand

Joined: Jan 13, 2009
Posts: 90
OK this is so so easy
the structure of a HTML table is
we have <table> root of the table
after that we specify the number of rows (careful rows at first)
then we specify columns in rows
<table> for table (root)
<tr> for specify a row
and <td> for specify a column

a simple table in html


OK lets to make it via js with a sample

alright we said that <table> is root of the our table
so first start to declare root tag


after root tag we need row so lets start a row


and a column


alright
now we should put "col" into "row" than "row" into "table"
col ---> row ---> table

OK we have a attribute for each peer tag in html called innerHTML, it's really cool attribute
so what is innerHTML and why do I know about that

ok look at this code


OK as you see we have a root tag <span> that this element has an Element
and between
and we have a some text ("We love it")
we can get things between each <x> and </x> via innerHTML

in this code we have an alert with "We love it" text


so why i say about it?
because now you should put some text in each col
you can use this guy


OK time to add col to row then row to table
OK look at this cool again



as you see <span> has a CHILD ()
so in table colums are Row's Childs
so lets to add them

with this code you add 'col' to 'row'


and do it again for 'root' and 'row'



OK now you have a table with 1 row and 1 column

SO as you said you want create 4x2 table
OK lets to make it
how many tables we need? we need 1 so we need a <table> tag
how many rows we need? we need 4 rows so we need 4 <tr> tags
and how many column do we need? we need 2 columns so we need 8 <td> tags

alright
OK it's so bad and jaggy that satart to make each row and column for example

it's not false but not standard and not optimize
so what do we should to do?

OK for root tag <table> we don't have problem because it's one and we make it
for declaring rows we use a 'for' loop and do it also for columns
and how?
look at this example


alright as you see it's really easy

now put all of the together


so you can do what you want
and also can add new record to a exist table with "appendChild()" method

so please if you have any question ask me again, I hope could learn something to you
1:after that please try to remove a row from a table
2:also try to sort table by a column of table it's easy
good luck


Open source
gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
thank you .. this last table-creating code is very usefull..
now I just would like to know how I could insert the table-sorting code to this last html code?

Where should the sorting code go here?
<!--
ArAsh.D by NetBeans 6.5
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" >
function createMyTable(){
var root=document.createElement("table"); //create root tag
root.setAttribute("border", "1"); //set border to our table to see cells nice
for(var i=0;i<4;i++){ //for 4 row
var row=document.createElement("tr"); //create a row tag
for(var x=0;x<2;x++){ //for 2 column in each row
var col=document.createElement("td"); //create a column tag
col.innerHTML=("col No "+x+" in row no "+i); //write something in each cell
row.appendChild(col); //add this column to row
}
root.appendChild(row); //add this row to table
}
document.getElementById("X").appendChild(root);} //add our table to document
</script>
</head>
<body>
<div id="X"></div>
<input type="button" value="create my table" onclick="createMyTable()"/>
</body>
</html>
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60980
    
  65

Please be sure to use code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along to posts that are easier to read. Please read this for more information.

You can go back and change your post to add code tags by clicking the button on your post.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
thank you .. this last table-creating code is very usefull..
now I just would like to know how I could insert the table-sorting code to this last html code?

Where should the sorting code go here?
Zaeed McColin
Ranch Hand

Joined: Jan 13, 2009
Posts: 90
OK, so it's easy too

so lets start with JavaScript

OK we want sort a table with a column
look at this table


as you see we have table that in second column we have some number, now we want sort the table as this column
look now what we should to do?
"We should read each number number in second column is each row AND check and compression with another number"
OK this is my solution maybe we have better or another optimized method
so as you saw in our table we have 2 columns that we want sort in column no. two
so I get data both of the column 1 and column 2 and put them in two Arrays , then start bubble sort in Array that references from column no. 2 in our table
then change sorted data into table
now we will have this code



so put the all together



as you see you can sort in each of column in your table, so please make a table yourself and try to do it yourself
good luck
gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
hello

thank you so much :lol:

it works if I click on the 'sort it' text. If I want to sort every column by its ID then I have to insert the <a onclick="sortIt()">sort it!</a> code? and the sort it text would change only?
Zaeed McColin
Ranch Hand

Joined: Jan 13, 2009
Posts: 90
as you saw I told a simple example that my table has 2 column and sort based on column no2

So please be careful that if you want sort in Number based column you should cast that to number
I mean when you get a text from a tag, Javascript always behavior as a String with that
and one hot note that, for each column you will need one Array,
so please do it to understanding complete this subject
1:create a table with javascript (dynamic (as we made that)) with 3 columns and 10 rows
2:two of columns of your table should has Number values
3:try to make a function to sort with these two columns
SO if you do not any thing you never can be a developer
try to do this job from zero (I mean draw a flowchart) and do it step by step, and in each step ask of yourself about your problems
if you have problem please tell me, ask me and fell free about that
so I waiting for you, so go and do it
gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
Thanks Dex,
I try to do that but it takes days or weeks to me to build up a code for this task.
:roll:
Some part of this code is like chinese language to me.
but I try. I will come back.
An online-kiss
Ulf Dittmer
Marshal

Joined: Mar 22, 2005
Posts: 41487
    
  51
Or you could just check out the table at the bottom of http://faq.javaranch.com/java/SandBox. It even has arrows indicating the sort direction, and knows how to sort text, numbers and dates differently!


Ping & DNS - my free Android networking tools app
gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
Hello ArAshDex,
I tried this code and try to change it with a lot of effort to me to understand but I somehow could find out the meaning of this structural programming.
I added another function which is supposed to sort by the ID in the first column.
BUT it does not want to do it!
please help me, what I did wrong?
thank you so much
Geo
gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
ohh sorry .. the code is here
Zaeed McColin
Ranch Hand

Joined: Jan 13, 2009
Posts: 90
alright
OK look, the contents of each column is important
some note that maybe important
1: 'innerHTML' always return string, it means if you want work as integer you should cast it or other types
if you wrote your code we could help you
I tell you another example with more effects

Alright, in previous sample we sort only in a column
let's with another example

our new table


and now our new functions
LOOK I changed it (optimized it), please read step by step, if you can't understand it, draw something like flowchart or ask

Alright as you saw we have 4 column our table,2 piece have String content, and other 2 piece have number(such as int & float) values
OK, I wrote 2 function, one of them for sort columns with String values, and other for columns with number values

let's start with sort for numeral columns

as you see with this method you can sort every numeral columns, just call it with column

and now look at for sort in columns with string values


NOTE:
1:as you see we use sort() method for sorting an Array in JavaScript, remember that it's not cool for sort an numeral(int, float) Array
2:like the previous function, add n columns and rows, just call functions with column number in your table

Alright put all of them together


I know I can't be a good teacher, but I happy that can understand it self
Again and Again, please forget it and try again to make it from zero, it's really easy
believe it, I never did it before and it was first time for me, with thinking and find a way to solve it
I hope could learn something to you with my bad English
gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
thank you so much, you are a genius!! you helped me a lot, it is working...

and why we need this funcion

Zaeed McColin
Ranch Hand

Joined: Jan 13, 2009
Posts: 90
the addE() method is an additional method that automatically call on page load
this add css class to each row, it's just for better face of your table, you can remove it
good luck mi amigo
gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
me again. dear Ares Dex

I tried to sort dates like 25/01/2009 with the function sortIt(y) but the numbers are not in order.
What do you suggest?
thanks a lot

geo
Zaeed McColin
Ranch Hand

Joined: Jan 13, 2009
Posts: 90
:-P
alright
look at this date "25/01/2009"
what do you suggest to compare "25/01/2009" vs "25/10/2009" or vs "13/01/2010"?
alright
look again my suggest is: see each time as an integer, so convert your date to integer by a method(such as "25/01/2009" to 20090125) and compare to each other

but sometimes your format is not like "25/01/2009" something like "11 Sep 2001"
in this method you can change it to integer also, but have to change "Sep" to 9, sowe have 20010911
as you sawit's really easy, and it's better sort it with sortNumber() instead of sortIt() "sortIt() method is not cool for sorting numeral values"

Alright sotry to do these
in head of your column(data column) you have to can sort your table with each values of month,day or year
like this


alright you have to:
1:develop sortDate('mode') method to convert date values to integer then sort it like sortNumber() value
2:your sortDate() method should can sort with each values day,month and year of your date

please try to do it yourself with cool solutions, if you have any problem tell me to solve it

I hope you understand
:thumbup: :wink:
gyorgy oyeniyi
Greenhorn

Joined: Jan 13, 2009
Posts: 11
hello
it is a good idea. but what is the JAVA sintactics to convert the september to 9 (numeral value)?
I will try to do it with every name of months (jan, feb, mar,apr...)
thanks again.
cheers
Zaeed McColin
Ranch Hand

Joined: Jan 13, 2009
Posts: 90
Wow
look, exactly we don't have(maybe but I don't know) a method that get a String such as 'Jan' and return 1
exactly try to do it yourself, get a 'Jan' and return 1
it's really easy to solve with an Array
try to develop
again
1:draw something like flowchart
2:develop with a cool logic

we here to solve your problems
but you should develop something to understand programing
I'll waiting for you
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Help me to have a sortable table in my html profile!