<style type="text/css">
        #leaderboard li {
                font-family: sans-serif;
                font-size: 12px;
                line-height: 12px;
        }
        #leaderboard #players li {
                display:block;
                clear: both;
                position: absolute;
                width: 750px;
                -moz-transition-duration: 1s;
                -webkit-transition-duration: 1s;
                -ms-transition-duration: 1s;
        }
        #leaderboard #players li.header {
                font-weight: bold;
                background-color: silver;
                background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
        }
        #leaderboard #players {
                padding: 0;
                width: 750px;
                position: relative;
                border: 1px solid #333;
                box-shadow: 2px 2px 5px gray;
                height: 132px;
                background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
        }
        #leaderboard #players div {
                display: block;
                float: left;
                overflow: hidden;
                padding: 5px;
        }
        #leaderboard .player {
                background: -moz-linear-gradient(top, #feffff 0%, #e0dace 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#e0dace));
        }
        #leaderboard .rank {
                width: 150px;
        }
        #leaderboard .name {
                width: 250px;
        }
        #leaderboard .amount {
                width: 100px;
        }
</style>
<div id="leaderboard">
        <ul id="players">
                <li class="header">
                        <div class="rank">Rank</div>
                        <div class="name">Name</div>
                        <div class="amount">Amount</div>
                </li>
        </ul>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script language="javascript">
        var players;
        var timerId;
        var scoreToWin = 20000;
        var updateInterval = 1000;

        function descending(a, b) { return a.amount < b.amount ? 1 : -1; }

        function reposition() {
                var height = $("#leaderboard .header").height();
                var y = height;
                for(var i = 0; i < players.length; i++) {
                        players[i].$item.css("top", y + "px");
                        y += height;
                }
        }

        function updateBoard() {
                var player = getRandomPlayer();
                player.amount += getRandomScoreIncrease();
                player.$item.find(".amount").text(player.amount);

                players.sort(descending);
                updateRanks(players);
                reposition();

                if(isGameOver(player.amount)) {
                        resetBoard();
                }
        }

        function isGameOver(amount) {
                return amount >= scoreToWin;
        }

        function getRandomPlayer() {
                var index = getRandomBetween(0, players.length);
                return players[index];
        }

        function getRandomScoreIncrease() {
                return getRandomBetween(50, 150);
        }

        function getRandomBetween(minimum, maximum) {
                 return Math.floor(Math.random() * maximum) + minimum;
        }

        function updateRanks(players) {
                for(var i = 0; i < players.length; i++) {
                        players[i].$item.find(".rank").text(i + 1);
                }
        }

        function resetBoard() {
                var $list = $("#players");

                $list.find("li.player").remove();
                if(timerId !== undefined) {
                        clearInterval(timerId);
                }
                players = [
                        { name: "Alex", amount: 500 },
                        { name: "Sergei", amount: 400 },
                        { name: "Nikolay", amount: 300 },
                        { name: "Vladimir", amount: 200 },
                        { name: "Peter", amount: 100 }
                        ];

                for(var i = 0; i < players.length; i++) {
                        var $item = $(
                                "<li class='player'>" +
                                        "<div class='rank'>" + (i + 1) + "</div>" +
                                        "<div class='name'>" + players[i].name + "</div>" +
                                        "<div class='amount'>" + players[i].amount + "</div>" +
                                "</li>");
                        players[i].$item = $item;
                        $list.append($item);
                }

                timerId = setInterval("updateBoard();", updateInterval);

                reposition();
        }

        resetBoard();
</script>

<?php
require('config.php');

$sql = "SELECT name, amount FROM dbtable";
$result = $mysqli->query($sql);
$datarows = array();
while($row = $result->fetch_array(MYSQLI_ASSOC)){
       $datarows[] = $row;
}
    echo json_encode($datarows);
?>

$.getJSON('/safeteladmin/pro1.php', function(data) {
        $.each(data, function(index) {
                  players[index] = {
                           name: data[index].name, 
                           amount: data[index].amount
                  };           
        });
});