我的PHP抓取數據和顯示的它取一個容器DIV MYSQL數據顯示在同一行X3 DIV的。但是,數據會依次顯示(不同的行),而不是使用同一行中的可用空間。想從我的index.php沒有問題,PHP
這裏用作身體標籤的容器整體的div的index.php片段。第二個div用於無限滾動功能,當用戶到達屏幕末尾時加載更多數據。
<div id="postedComments">
<?php require_once 'jquery-masterLoader.php' ; ?>
</div>
<div id="loadMoreComments" style="display:none;" > <center>test for hidden field </center>
</div>
這是PHP jquery-masterLoader.php它是管理加載腳本的兩個PHP文件之一。另一個不需要顯示和告訴,因爲只有在用戶到達屏幕末尾時纔會調用它。
<?php
if (strpos(strtolower($_SERVER['SCRIPT_NAME']),strtolower(basename(__FILE__)))) {
header("Location: index.php");
die("Denny access");
}
error_reporting(0) ;
set_exception_handler('exception_handler') ;
$config = parse_ini_file("core/config/my.ini") ;
$db=new mysqli($config['dbLocation'] , $config['dbUser'] , $config['dbPassword'] ,
$config['dbName']);
if(mysqli_connect_error()) {
throw new Exception("<b>Could not connect to database</b>") ;
}
if (!$result = $db->query("SELECT * FROM world_country ORDER BY id ASC LIMIT
0,30")) {
throw new Exception("<b>Could not read data from the table </b>") ;
}
while ($data = $result->fetch_object()) {
$id = $data->id;
$name = $data->Name ;
$continent = $data->Continent;
$population = $data->Population ;
echo "
<div class='postedComment' style=\"width: 33%; \ list-style: ; \ float: left;\" id=\"$data-
>id \">
<b>Country : </b>$name <br />
<b>Continent : </b>$continent<br/>
<b>Population : </b>$population
<i style=\"font-size:small;color:blue\">Index : $id</i>
<hr />
</div>
" ;
}
/* close connection */
$db->close();
function exception_handler($exception) {
echo "Exception cached : " , $exception->getMessage(), "";
}
對不起,有風格與PHP混合,這是一項工作正在進行中。
這裏的CSS規則
#postedComments {
width: 100%;
display: ;
}
html, body {
height: ;
width: 100%;
margin: 0;
padding: 0;
}
#body {
width: 60%;
margin: 1% auto;
}
/* Resets */
ul {
padding:0;
margin:0 0 20px 0;
list-style:none;
}
h1, h2 {
padding:0;
margin:0 0 20px 0;
font-weight:normal;
}
p {
padding:0;
margin:0 0 20px 0;
}
a:link, a:visited {
text-decoration:underline;
color:#000;
}
a:hover {
text-decoration:none;
}
ul li {
padding:5px 0;
}
ul li input[type="text"], ul li input[type="password"] {
width:200px;
}
而且這裏的JavaScript的呼籲腳本。
(custom_jquery-debug.js)
$(document).ready(function() {
$("#postedComments").append("<p id='last'></p>");
//$("#postedComments").append("<div id='last'></div>");
console.log("Document Ready ------------------------");
if ($("#last").length){
position = $("#last").offset() ;
console.log("Initialization of last_DIV succeeded and it's values are ....Top-value
is :"+Math.floor(position.top) + " ---- Left-value is : "+ Math.floor(position.left))
;
}
doMouseWheel = 1 ;
$(window).scroll(function() {
if (!doMouseWheel) {
return ;
} ;
var distanceTop = $('#last').offset().top - $(window).height();
console.log("Mouse scroll , and The DIV last has an offset-top value of :"+
Math.floor($("#last").offset().top)+"----Window height is
:"+Math.floor($(window).height())+"---- Last's offset minus window height is :
"+Math.floor(distanceTop)) ;
if ($(window).scrollTop() > distanceTop){
console.log("End of Window Reached >>>>>>>>>>>>>>>>>>>>>>>>>>") ;
console.log("Show Div loadMoreComments and Class .postedComments.last has the id of :
"+$(".postedComment:last").attr('id'));
doMouseWheel = 0 ;
$('div#loadMoreComments').show();
$.ajax({
dataType : "html" ,
url: "jquery-loadMoreComments.php?lastComment="+
$(".postedComment:last").attr('id') ,
success: function(html) {
doMouseWheel = 1 ;
if(html){
$("#postedComments").append(html);
console.log("Append html , sumarize .... first id has nr : "
+$(".postedComment:first").attr('id')+ " --- last id has nr :"
+$(".postedComment:last").attr('id'));
position = $("#last").offset() ;
console.log("New values of last_DIV from IF_html are , Top
:"+Math.floor(position.top)+" --- left :"+Math.floor(position.left)) ;
$("#last").remove();
if ($("#last").length == 0){ console.log(">>>>>>>>>>>>>>>The last_DIV is removed
from stage>>>>>>>>>>") ; }
$("#postedComments").append("<p id='last'></p>");
if ($("#last").length ){
position = $("#last").offset() ;
console.log(">>>>>>>>>>>>>>>A new last_DIV is appended and it's values are , Top :"
+ Math.floor(position.top) +" ---- Left :" + Math.floor(position.left)) ;
}
$('div#loadMoreComments').hide();
}else{
console.log("LoadMoreComments is replaced with a custom message") ;
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of
countries !!!!!!!</h1></center>");
}
}
});
}
});
});
二JS腳本(custom_jquery.js)
$(document).ready(function() {
$("#postedComments").append("<p id='last'></p>");
//console.log("Document Ready");
doMouseWheel = 1 ;
$(window).scroll(function() {
//console.log("Window Scroll ----");
if (!doMouseWheel) {
return ;
} ;
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop){
//console.log("Window distanceTop to scrollTop Start");
doMouseWheel = 0 ;
$('div#loadMoreComments').show();
//console.log("Another window to the end !!!!
"+$(".postedComment:last").attr('id'));
$.ajax({
dataType : "html" ,
url: "jquery-loadMoreComments.php?lastComment="+
$(".postedComment:last").attr('id') ,
success: function(html) {
doMouseWheel = 1 ;
if(html){
$("#postedComments").append(html);
//console.log("Append html--------- " +$(".postedComment:first").attr('id'));
//console.log("Append html--------- " +$(".postedComment:last").attr('id'));
$("#last").remove();
$("#postedComments").append("<p id='last'></p>");
$('div#loadMoreComments').hide();
}else{
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of
countries !!!!!!!</h1></center>");
// Added on Ver.0.4
//Disable Ajax when result from PHP-script is empty (no more DB-results)
doMouseWheel = 0 ;
}
}
});
}
});
});
嗯,這是一個很大的數據。而數據在第二行,因爲''
標籤 –
的顯示如果你是治療整個註釋的東西作爲單個數據塊,您將在下一行中獲得下一條評論,因爲您給出了#postedComments {width:100%;}'。所以每條評論都會佔用整個寬度 –