link.php

<!DOCTYPE html>
<html>
<head>
    <title>Shared Link</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
</head>
<style type="text/css">
    body{
        overflow-x: hidden;
        padding: 5px;
    }
</style>
<?php
    header("Content-type: text/html; charset=utf-8");
    $host ="localhost";
    $user="kelvin";
    $password="26467790";
    $database="bacbac";
    $con = mysql_connect($host, $user, $password);
    header("Content-Type: text/html; charset=utf-8");
    if (!$con){
        echo "Cannot connect db: ".mysql_error($con);
        exit();
    }
    mysql_set_charset('utf8');
    $db_selected = mysql_select_db( $database);
    if (!$db_selected){
        echo "Cannot select db: " . mysql_error($con);
        exit();
    }
    $query="SELECT `link`,name,`by`,`date`,`cat`,`vote` FROM sharedlink order by `vote` DESC";
    $result=mysql_query($query);
    $rows = Array();
    while($row=mysql_fetch_array($result)){
        $rows[] = $row;
    }
    $data = json_encode($rows);

?>
<script>
$(document).ready(function(){
    $('#table').dataTable({
    data:<?php echo $data?>,
    columns: [
        { data: 'link' },
        { data: 'name' },
        { data: 'by' },
        { data: 'date' },
        { data: 'cat' },
        { data: 'vote' }
    ],
    dom: 'Bfrtip',
    buttons: [
    'csvHtml5'
    ],
    paging: false,
    "createdRow": function ( row, data, index ) {
            $('td', row).eq(0).html('<a href="'+data[0]+'">'+'Link'+'</a>');
    }
    });
});
</script>
<body>
    <table class='table table-striped table-bordered table-hover dataTable no-footer' style='width:0%' align='center' id='table'>
       <thead>
           <tr>
               <th style="width:">
                Link
               </th>
               <th>
                Name
               </th>
               <th>
                by
               </th>
               <th>
                Date
               </th>
               <th>
                Category
               </th>
               <th>
                Vote
               </th>
           </tr>
       </thead>
        </table>