Dynamic Table

[vishalraj9]

Hi,
I have a table with multiple rows and columns. This table is about the different fruits a vendor is selling and different categories of the same fruit. The first row in every column is a main heading. The heading are something like this:

FRUIT NAME | DATE ORDERED | BEST BEFORE | PRICE

I want to design this table in such a way that the user clicks on the heading that matters most to him. The table rows are sorted in the chosen order on the table, with the bottom half grayed out. When they click on another column, which sorts the rows further and grays out more rejected items. Finally when one item remains, a "BUY NOW” button appears.

Is there a way I can do this using Javascript. It does not deal with Database. So iam not keen in using PHP & i am newbie to PHP. I would prefer something in Javascript. I looked around many tuts but to the maximum extent, they are showing how to delete & add rows manually. But none of them are so dynamic according to the description. The greying part of the irrelevant rows & columns is the main part. I want to achieve this. I have been working on this for 3 days now with now success.

Any help is this regard is highly appreciated. Thank you all.

[simplistik]

sounds like you should be forking out money :lol: that's a pretty intricate app you want for free.

[vishalraj9]

Hi simplistik,
Thanks for your reply. I did not realize that it was such a complicated issue. Iam not an advanced user & I tried researching but no use. That's why I thought maybe some of our friends could help. Iam willing to learn but what I need it a jump start in the right direction so that I can pick up from there.

Is there any software that could do it for me? If yes, please let me know. I would try consider buying it if it's worth. Any help is highly appreciated. Thank you.

[simplistik]

no, there isn't any software. pointing in the right direction though you'd just need to learn javascript. I can't say that there's a specific thing for you to look at cause there isn't. you may as well try an offer up some money to a javascript developer who can do it, if you're willing to buy a product.

[DDD]

yea thats pretty weird. And doesnt sound like it will work too well either. Like if I select "Fruit Name", that gives me apples, bananas, cantaloupe.... Cool. But I select "Price", so it re orders by Fruit Name and Price. But where does it dwindle down my choices? Sounds like it just reorders? Anyway, good luck, yea its a involved app. Better pay a good developer.

[Digitalosophy]

Arrays arrays and more arrays

[borrob]

Yes Array's ( in javascript ) would be the only option here, but this could be very nasty to build so it will take some time.
And indeed why is there when you order a more limited choice?
Oh and when you build a thing like this and it's well build then it could work just fine.

[zerokilled]

can you post a table sample because i'm trying to figure out how the content is present. i can't understand how the headers are organized, vertcally or horizontally. how item should be sorted? a user click on a row and that rows should sort in first place, and so on? anyway, i can't promise you anything, but a few months ago i developed a script for table manipulation as insert row and column, remove row and column, move row and column, and other basic function as well. but anyway, i would like to see a table sample to determine if my script is situable for you. cheers, there is hope...

[vishalraj9]

Firstly, thanks to all for all their suggestions. I have attached an image for a sample table. The Headings can be clicked on & they sort on relevancy.

To DDD:
You are right. If you select "Fruit Name", that gives me apples, bananas, cantaloupe and arranges everything in alphabetical order. If you select "Price", it re orders by Fruit Name and Price but preference will be given to the order of the price. So the fruit names will no longer be in ascending or descending order. They will be scrambled. That's how it should be. The prices will be listed in the ascending/descending order.

To zerokilled and everyone:
This is how I imagined it to be. This gives the user kind of the choice to limit the selection & arrive at a final produce before they can add the last-one standing fruit to their basket:

Say they click on "Price" heading, it will sort fruits in relation to price,say ascending or descending order ( I was thinking of providing an Up & Down arrow so that the user can select it to be ascending or descending order). Say the user chooses to sort from lowest price to max price, that means he has clicked on the Up arrow (price increasing). Now the prices get arranged in ascending order. As soon as this happens, the last half results get grayed out. So if I had 10 items, the last 5 rows would grey out completely. If there were 11 items, the last 5 rows would grey out completely leaving user with 6.

Now if they click on Date ordered & sort it from descending order (they click the Down arrow). This means that they are giving priority to the recently ordered fruits & hence the most recently ordered fruits get listed in the top & the oldest ordered in the bottom. Since we have only 5 left rows after our previous sort, the user will have only 3 rows after this sort.

He can then click on BEST BEFORE heading in ascending order (They click the Up arrow) which means that they want to buy which is expiring soon (they would come to shop again for fruits expiring at a later date). Now out of the remaining 3 rows, the user will now see only 2 rows (or maybe 1 row) & all the rows are grayed out & the last row is the most relevant fruit for his selection. Then we can make a "BUY NOW" button appear as there is no other fruit relevant to his selection.

So it's kind of like in 3-4 sorts, the user will get the most relevant fruit belonging to his search criteria.

I hope Iam clear with my questions & explanation. Any help is highly appreciated. Thanks a ton for all you efforts.

[simplistik]

i see what you want, you just want a sorting table... what I thought you were originally asking for was

you pick option a... sorts by a, negates last 5, pick option b adds to the a filter and sorts by that, and elemenates whatever based off those two options selected.

i guess my questions are... why are you "greying out" the last x amount of entries, and why not drop it in a database?

[vishalraj9]

Hi simplistik,
I think you are quite right with your approach but that's a little different with what I have thought. The answer is pretty simple. Why we are greying it out is that our whole & sole aim is to provide the user with the most appropriate commodity at the end of the sorting process & the "intelligent" sorting system will do this. The user is going to sort as he wishes & the best options will be provided at the top & the least appropriate ones will be shoved to the bottom & greyed out. This way, the ones at the top stand out & are more relevant to the search performed.

Hope Iam clear. Thanks.

[zerokilled]

i think my script could be part of the solution, respectively for table manipulation. http://zerokilled.awardspace.com/lib/table.js the script is an old version, today night i will upload the lastest version. http://zerokilled.awardspace.com/lib/table.htm you can see a short tutorial of usage but is in spanish. you still need to fork code for the sorting system, which is the most difficult task (my opinion) due to the parsing process and different data type to sort: number, string, and date. however, somehow for me it still don't make sense your idea about sorting and graying out.

i will try to achieve your goal but i don't know how much time it will take due that i code in my spare time.

[vishalraj9]

Thank you zerokilled. Truly appreciate your time & efforts.