我正在使用以下脚本。
http://www.inserthtml.com/2013/01/scroll-pagination/
效果很好。
但是，它仅适用于1页。如果我有多个页面，它将为所有这些页面运行相同的查询结果。我不要那个。
我想要做的是为每个页面提供不同的查询结果。通常我有页面设置，显示那些查询结果。现在我只需要通过无限滚动添加这些结果的功能。
我如何继续这样做？
更新
以下是我为您创建的3个文件。文件名与上面演示链接中的文件名匹配。
您能否告诉我您将代码放在这些文件中的哪个位置？
的index.php
<?php
$hostname='127.0.0.1';
$username='root';
$password='';
$dbh = new PDO("mysql:host=$hostname;dbname=cave",$username,$password);
?>
<!DOCTYPE HTML>
<head>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script src="javascript.js"></script>
<script type="text/javascript" src="//use.typekit.net/vue1oix.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script>
$(document).ready(function() {
$('#content').scrollPagination({
nop : 4, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : 'No More Posts!', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
});
});
</script>
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<div id="content"> </div>
</body>
</html>
ajax.php
<?php
$hostname='127.0.0.1';
$username='root';
$password='';
$dbh = new PDO("mysql:host=$hostname;dbname=cave",$username,$password);
$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();
$getPosts = $dbh->prepare("SELECT * FROM posts ORDER BY id DESC LIMIT ".$postnumbers." OFFSET ".$offset);
$getPosts->execute();
$post = $getPosts->fetchAll();
if(count($post) > 0) {
foreach($post as $row) {
$title = $row['title'];
$post = $row['post'];
?>
<h1><?php echo $title ?></h1>
<h3><?php echo $post ?></h3>
<?php
}
}
?>
javascript.php
(function($) {
$.fn.scrollPagination = function(options) {
var settings = {
nop : 4, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : 'No More Posts!', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
}
// Extend the options so they work with the plugin
if(options) {
$.extend(settings, options);
}
// For each so that we keep chainability.
return this.each(function() {
// Some variables
$this = $(this);
$settings = settings;
var offset = $settings.offset;
var busy = false; // Checks if the scroll action is happening
// so we don't run it multiple times
// Custom messages based on settings
if($settings.scroll == true) $initmessage = 'Scroll for more or click here';
else $initmessage = 'Click for more';
// Append custom messages and extra UI
$this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');
function getData() {
// Post data to ajax.php
$.post('ajax.php?page=' + page, {
action : 'scrollpagination',
number : $settings.nop,
offset : offset,
}, function(data) {
// Change loading bar content (it may have been altered)
$this.find('.loading-bar').html($initmessage);
// If there is no data returned, there are no more posts to be shown. Show error
if(data == "") {
$this.find('.loading-bar').html($settings.error);
}
else {
// Offset increases
offset = offset+$settings.nop;
// Append the data to the content div
$this.find('.content').append(data);
// No longer busy!
busy = false;
}
});
}
getData(); // Run function initially
// If scrolling is enabled
if($settings.scroll == true) {
// .. and the user is scrolling
$(window).scroll(function() {
// Check the user is at the bottom of the element
if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
// Now we are working, so busy is true
busy = true;
// Tell the user we're loading posts
$this.find('.loading-bar').html('Loading Posts');
// Run the function to fetch the data inside a delay
// This is useful if you have content in a footer you
// want the user to see.
setTimeout(function() {
getData();
}, $settings.delay);
}
});
}
// Also content can be loaded by clicking the loading bar/
$this.find('.loading-bar').click(function() {
if(busy == false) {
busy = true;
getData();
}
});
});
}
})(jQuery);
答案 0 :(得分：0)
在JQuery中调用file.php的地方，像往常一样添加一个字符串，这样file.php页面就可以获取查询字符串值。您可以使用您正在使用的任何语言动态执行此操作。如果没有任何需要传递的变量，就像在默认页面/ page1上那样，那么就不要发送任何变量。将这些值传递给数据库查询字符串。最适合数据库查询的参数化值。基本上，您将通过查询字符串将相同的信息传递给页面，就像通常通过分页按钮/链接一样。
var parameters = "?page=2&category=cat&user=joe"
$.post('file.php' + parameters, {
information : 'to be sent',
to : 'file'
}, function(data) {
}
});