Advanced Search

Results 1 to 3 of 3

Thread: Sorting Members By Clicking Link

  1. #1
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Sorting Members By Clicking Link

    Hi all,

    I am at a point where I have been able to show all my members that are in my MySQL database... When it displays the list it only shows this info:

    FirstName
    LastName
    State
    LastLogin

    But it automatically sorts the members by the userId, that's fine for the moment. But how can I make the headings at the top of the list into links that when clicked on sort. So for example if you click on 'Last Name' it will sort all the members by their last name alphabetically, and if you click it again it reverses the sort... Anyone seen this before or have any idea how to do it?

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    The following is a solution for your problem which is based on Yahoo UI library (used for the data grid as well as for sorting the fields).

    The PHP part of my code is based on my database and table you can use this example in such a way that it is suitable for your requirements.

    As I mentioned earlier you need to download Yahoo UI developer library to make the below mentioned code work.

    PHP Code:
    <?php
    class database
    {
        private 
    $db_handle;
        private 
    $user_name;
        private 
    $password;
        private 
    $data_base;
        private 
    $host_name;
        private 
    $sql;
        private 
    $results;

        function 
    __construct($host="localhost",$user,$passwd)
        {
            
    $this->db_handle mysql_connect($host,$user,$passwd);
        }

        function 
    dbSelect($db)
        {
            
    $this->data_base $db;
            if(!
    mysql_select_db($this->data_base$this->db_handle))
            {
                
    error_log(mysql_error(), 3"/phplog.err");
                die(
    "Error connecting to Database");
            }
        }
        
        function 
    executeSql($sql_stmt)
        {
            
    $this->sql $sql_stmt;
            
    $this->result mysql_query($this->sql);
        }
        function 
    returnResults()
        {
            return 
    $this->result;
        }
    }

    $user "root";
    $passwd "";
    $db "newTest"
    $sql "SELECT * FROM EMP ORDER BY empname";
    $dbObject = new database($host,$user,$passwd);
    $dbObject->dbSelect($db);
    $dbObject->executeSql($sql);

    $res $dbObject->returnResults();
    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
    <link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
    <link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
    <link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
    <link type="text/css" rel="stylesheet" href="./css/examples.css">
    <link type="text/css" rel="stylesheet" href="../../docs/assets/dpSyntaxHighlighter.css">
    <style type="text/css">
    /* custom css*/
    #markup {margin:1em;}
    #markup table {border-collapse:collapse;}
    #markup th {border:1px solid #000;padding:.25em;background-color:#696969;color:#fff;}/*dark gray*/
    #markup td {border:1px solid #000;padding:.25em;}
    </style>

    <script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
    <script type="text/javascript" src="../../build/dom/dom.js"></script>
    <script type="text/javascript" src="../../build/event/event.js"></script>
    <script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
    <script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
    <script type="text/javascript" src="../../build/logger/logger.js"></script>
    <script type="text/javascript">
    var dt;

    YAHOO.example.enhanceFromMarkup = function() {
        this.columnHeaders = [
            {key:"empid",text:"employee ID",sortable:true},
            {key:"empname",text:"employee name",type:"text",sortable:true},
          {key:"empsal",text:"employee salary",type:"number",sortable:true},
          ];
        this.columnSet = new YAHOO.widget.ColumnSet(this.columnHeaders);

        var markup = YAHOO.util.Dom.get("markup");
        this.dataTable = new YAHOO.widget.DataTable(markup,this.columnSet,null,{caption:" "});
    };

    YAHOO.util.Event.onAvailable("markup",YAHOO.example.enhanceFromMarkup,YAHOO.example.enhanceFromMarkup,true);
    </script>
    </head>

    <body>
    <div id="markup">
    <table id="emp">
    <thead>
    <tr>
    <th>Employee ID</th>
    <th>Employee Name</th>
    <th>Employee Salary</th>
    </tr>
    </thead>
    <tbody>
    <?
    while($record mysql_fetch_object($res))
    {
        echo 
    "<tr>";
        echo 
    "<td>".$record->empid."</td>";
        echo 
    "<td>".$record->empname."</td>";
        echo 
    "<td>".$record->empsal."</td>";
        echo 
    "</tr>";
    }
    echo 
    "<tbody></tr></table>";
    ?>
    </div>
    </body>
    </html>
    Additional Instructions

    1. Install Yahoo UI developer library

    2. In my case I've saved the above mentioned php code inside yui\examples\datatable which is inside my htdocs folder (web publish root).

    3. If you are saving the file in another folder make sure that the path mentioned in my program are correct/valid

    4. Plz let me know if you need any assistance to configure this code.

    5. Change the database, table names, sql query(mentioned your fields) along with the database username and password.

    6. Once you configure it correctly whenever you press the table headers then it will sort the contents based on your header clicking.

  3. #3
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It seems so hugely complicated! Is it the only way? I found a tutorial, was wondering if you get check it out for me and see if it will do what I want or if it's crap? If not I'll start on your option... http://codewalkers.com/tutorials/21/2.html

Bookmarks

Posting Permissions

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