0
从MySQL
我的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％;}'。所以每条评论都会占用整个宽度 –