使用PHP，Ajax和MySQL

Question

I am currently working on a leaderboard of sorts for a website. What is happening is I am pulling out records from a MySQL DB and echoing them into a table to be displayed to the user. Sounds simple enough right? No what I also need to do is be able to sort both in ASC and DESC or depending on the state aa picture or a button persay. What I have currently is an image which when clicked just rotates and a class is toggled through Jquery ATM.

I want to have it when one of the images is clicked it not only changes the image but also grabs a new function, or grabs a new query (using ASC or DESC order of course). And is then displayed as such. I was trying to use AJAX to be able to connect the javascript aspects to the PHP part of my Database connection.

My current way of sending the data from the DB is through a function,

<?php
function dbConnect()
{
    // make  & test connection
    $mysqli = new mysqli("localhost", "root", "password", "dbName");
    if (mysqli_connect_errno()) 
    {
        $err = 'Connection Failed';
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
    // return
    return $mysqli;
}
function copTbl($mysqli)
{
    // prepare statement
    $stmt = $mysqli->prepare('
    SELECT `name`, `coplevel` FROM `players` WHERE `coplevel`<>"0" ORDER BY `    players`.`coplevel` DESC
    ');
    // execute query
    $stmt->execute();
    // bind result
    $stmt->bind_result($copName,$copLevel);
    $O ="";
    $x = 1;
    $O.="<h1>List Of Cops</h1>";
    $O.= "<form id=\"form1\">
                <div class=\"div-table\">
                    <div class=\"div-table-row\">
                        <div class=\"div-table-col head0\"><span class=\"col-name\">Player Name</span><img id=\"arrow0\" class=\"down\" src=\"img/arrow.png\" alt=\"\"></div>
                    <div class=\"div-table-col head1\"><span class=\"col-name\">Level</span><img id=\"arrow1\" class=\"down\" src=\"img/arrow.png\" alt=\"\"></div>
                </div>";
while($stmt->fetch())
{
    if($x%2)
    {
        $O.= "<div id='".$x."' class=\"div-table-row\">
                    <div class=\"div-table-col\">".$copName."</div>
                    <div class=\"div-table-col\"><img src='img/cl".$copLevel.".png' alt=''></div>
                </div>";
        $x++;
    }
    else
    {
        $O.= "<div id='".$x."' class=\"div-table-row\">
                    <div class=\"div-table-col white\">".$copName."</div>
                    <div class=\"div-table-col white\"><img src='img/cl".$copLevel.".png' alt=''></div>
                </div>";
        $x++;
        }
    }
    $O.= "</div></form>";
    // close statement
    $stmt->close();
    return $O;
}
?>

The function is only returning the values from the Mysql SELECT statement. Is there way at all to use ajax or other type of DOM based code to achieve this shorting affect? I would like to be taught how to use it better as aoppsed to just given code, if you would explain it for me that would be much appreciated.

Answer 1

I think Data table will be easier and quicker way to tabulate the data . And if you get stuck at any place, can expect forum support bcoz most of the scenarios are covered and tried in this.

There are many other similar plugins you can check out these links

Answer 2

I would also suggest Datatables.

I would also suggest taking a look at Laravel, building that HTML with PHP looks a bit "old school".