分页图片和数据库记录

时间:2017-05-13 09:38:17

标签: php jquery html mysql

我正忙着一个php脚本,假设显示一条记录和一张带有下一个和上一个按钮的图片,但我的问题出现了:它有一个下一个记录的箭头和一个单独的下一个按钮,用于这样的图片ScreenShot

基本上我想要当你点击下一个按钮时图片和记录应该改变。

这是我的编码:这是给friends.php页面

num2str(0.511,'%.2f')
    0.51
num2str(1.511,'%.2f')
    1.51

以下是getpicture.php的代码:

<?php
include ("test.php");
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $.post( "getpicture.php", { pic: "1"}, function( data ) {
      $("#picture").html( data );
    });

    $("#picture").on("click",".get_pic", function(e){
        var picture_id = $(this).attr('data-id');
        $("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
        $.post( "getpicture.php", { pic: picture_id}, function( data ) {
            $("#picture").html( data );
        });
        return false;
    });

});
</script>
<title>Social</title>
</head>
<body>

<div id="picture" align="center"> 
<!-- pictures will appear here --> 
</div>
</body>
</html>

最后这是我的test.php代码,我的数据库中的所有信息都在这里:

    <?php

$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = 'test'; //databasename

//get pic id from ajax request
if(isset($_POST["pic"]) && is_numeric($_POST["pic"]))
{
    $current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT);
}else{
    $current_picture=1;
}

//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);

if ($mysqli->connect_error){   
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}

//get next picture id
$result = $mysqli->query("SELECT id FROM pictures WHERE id > $current_picture ORDER BY id ASC LIMIT 1")->fetch_object();
if($result){
    $next_id = $result->id;
}

//get previous picture id
$result = $mysqli->query("SELECT id FROM pictures WHERE id < $current_picture ORDER BY id DESC LIMIT 1")->fetch_object();
if($result){
    $prev_id = $result->id;
}

//get details of current from database
$result = $mysqli->query("SELECT PictureTitle, PictureName FROM pictures WHERE id = $current_picture LIMIT 1")->fetch_object();

if($result){

    //construct next/previous button
    $prev_button = (isset($prev_id) && $prev_id>0)?'<a href="#" data-id="'.$prev_id.'" class="get_pic"><img src="prev.png" border="0" /></a>':'';
    $next_button = (isset($next_id) && $next_id>0)?'<a href="#" data-id="'.$next_id.'" class="get_pic"><img src="next.png" border="0" /></a>':'';

    //output html
    echo '<table width="500" border="0" cellpadding="5" cellspacing="0">';
    echo '<tr>';
    echo '<td><table width="100%" border="0" cellpadding="5" cellspacing="0">';
    echo '<tr>';
    echo '<td width="10%">'.$prev_button.'</td>';
    echo '<td width="80%" align="center"><h3>'.$result->PictureTitle.'</h3></td>';
    echo '<td width="10%">'.$next_button.'</td>';
    echo '</tr>';
    echo '</table></td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td align="center"><img src="pictures/'.$result->PictureName.'" /></td>';
    echo '</tr>';
    echo '</table>';
} 

0 个答案:

没有答案