Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Creating a sortable HTML table from a MySQL database

    Hi

    I was wondering whether there is an easy way to create a sortable HTML table from data in a MySQL database. I get the data out of the DB using PHP. What I am talking about are those tables you often see around the web, where you can click on the headings and all of the data gets sorted by the heading that you clicked on. If you click again on the same heading, it will sort it in the other direction (ascending/descending).

    Something with java or ajax would probably be best, but is there code that I can use to do this easily?

    Thanks

    Zach

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Ajax and javascript aren't different languages. AJAX stands for Asynchronous JavaScript and XML so as you see its part of javascript. I'm guessing you don't want a page reload? If you didn't mind the page reload it would be simple. With a page reload all you would do is make the headers of the table links that have something like.
    Code:
    <a href="yourpage.php?order=columnname">Columnname</a>
    Then just before your sql statement
    PHP Code:
    $order = (isset($_GET['order'])) ? mysql_real_escape_string($_GET['order']) : 'defaultcolumnname';
    $sql "SELECT * FROM table ORDER BY $order ASC";
    $result mysql_query($sql) or die(mysql_error()); 
    You get the idea. If you didn't want a page reload then look into this http://yoast.com/articles/sortable-table/

    But I think you should still have the links for users with js disabled. Just add onclick="return false" so they don't go anywhere. With js disabled the page will reload with the correct order.
    Last edited by _Aerospace_Eng_; 02-25-2009 at 05:16 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi zachbb!

    I strived the net for the same some weeks ago. Here is your ready-to-go solution: http://www.kryogenix.org/code/browser/sorttable/

    Just download the js library and link it in your HTML head.
    Code:
    <script src="sorttable.js"></script>
    Mark your table as a sortable one by giving it a class of "sortable":

    Code:
    <table class="sortable">
    Note that the library's JavaScript file is called sorttable (two Ts), but the class you add to the table is sortable (one T).

    Then you need a css file. I just created style.css

    Code:
        table.sortable thead {
        background-color:grey;
        color:#ffffff;
        font-weight: bold;
        cursor: default;
    }
    And link it also in the HTML head:
    Code:
    <link rel="stylesheet" type="text/css" href="style.css">
    Just read the link above or email me.

    dr_craiz

  • Users who have thanked dr_craiz for this post:

    zachbb (03-17-2009)

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks!

    That's great!

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    Have you tried it yet? Does it work? I use Firefox only. For some reason it does not work in IE...

  • #6
    New Coder
    Join Date
    Jan 2009
    Posts
    91
    Thanks
    17
    Thanked 1 Time in 1 Post
    This is what I use. It is very flexible and the instructions are detailed.

    Table Sort Script


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •