none
How to sort html table asc and desc based on table header which contain arrow image. RRS feed

  • Question

  • Hi All,

    i need to sort html table which contain 4 columns. Onclick of table header it is sorted in asc ans desc.

    i need to add small arrow image which is display when we click the header , if we click  first time the  down arrow image is display  and sort table in ascending order, else show up arrow and sort table in descending order.

    can some one guide me on this.

    Regards,

    Jyotsna

    Sunday, November 19, 2017 7:58 AM

All replies

  • Hi All,

    i need to sort html table which contain 4 columns. Onclick of table header it is sorted in asc ans desc.

    i need to add small arrow image which is display when we click the header , if we click  first time the  down arrow image is display  and sort table in ascending order, else show up arrow and sort table in descending order.

    can some one guide me on this.

    Regards,

    Jyotsna

    Show where?

    Be aware that Visual Studio 2017 is not meant for classic style HTML editing (you can use it, but than more as sophisticated editing tool). 



    Success
    Cor

    Sunday, November 19, 2017 9:53 AM
  • Hi ,

    Thanks for the reply, 

    i have a html table which contain data, and on click of header of the table sorting is working now, but i need to add  arrow images in header when  i click that arrows, table need to  sort asc and desc order this is my requirement, for asc and desc i am calling one function, that function is written in javascript.

    also i need to show and hide arrows images based or order.

    hope you understand my point.

    Regards,

    Jyotsna 


    Sunday, November 19, 2017 2:40 PM
  • Hi Jyotsna, 

    Welcome to the MSDN forum.

    You can have a try with the JQuery plug-in like JQuery DataTables, I tried to follow this example and create a HTML to check its output:

    The behavior:

    Best regards,

    Sara


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com

    Monday, November 20, 2017 7:08 AM
  • Hi Sara,

    Thanks for the reply, i already try this,but my system is not supported.

    what i am doing i ll explain you

    i am using javascript, in javascript i create one array which contain 4 fields which behave like a table header.

    data is coming from the database.

    and each table header is able to sort the table asc and desc order, now.

    but i need to add images for each header field using this image i need to sort table.

    for this i added  asc and desc arrow image in each header field.

    and on click of image icon table sorting happen.

    but my problem is that by default at a time only one image is display in table header.

    for example , when html page load only up arrow (Asc) is visible .

    when  i click Up arrow table is sorted in ascending order . after that when i click second time

    same header up arrow is hide and down arrow (Desc) is visible & it will sort table in descending order.

    can you help me how can i add this condition.

    Regards,

    Jyotsna

    Monday, November 20, 2017 8:13 AM
  • Hi Sara,

    Thanks for the reply, i already try this,but my system is not supported.

    what i am doing i ll explain you

    i am using javascript, in javascript i create one array which contain 4 fields which behave like a table header.

    data is coming from the database.

    and each table header is able to sort the table asc and desc order, now.

    but i need to add images for each header field using this image i need to sort table.

    for this i added  asc and desc arrow image in each header field.

    and on click of image icon table sorting happen.

    but my problem is that by default at a time only one image is display in table header.

    for example , when html page load only up arrow (Asc) is visible .

    when  i click Up arrow table is sorted in ascending order . after that when i click second time

    same header up arrow is hide and down arrow (Desc) is visible & it will sort table in descending order.

    can you help me how can i add this condition.

    Regards,

    Jyotsna

    Yes that was clear from your first message. 

    Like I wrote that is not something which is done with tools from Visual Studio. You have the chance that somebody violates the forum rules and gives you a sample which they found on Internet and simply copied and pasted in this forum, maybe taken the worst. 

    However, better is that you search for that yourself using your self preferred browser. 

    Simply search for the words. Sort HTML TD table. 

    If I do that I get endless samples with code included. You can yourself then try it and take the best. 


    Success
    Cor

    Monday, November 20, 2017 1:29 PM
  • Hi Jyotsna,

    Thank you for your detail information and sorry for my misunderstanding.

    Please redirect to this appropriate forum: https://forums.asp.net/130.aspx/1?HTML+CSS+and+JavaScript and start a new thread, you will get a better support for your issue, thank you for your understanding again.

    Best regards,

    Sara


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com

    Tuesday, November 21, 2017 7:22 AM