使用javascript和ajax在php中自动向下滚动和筛选
在php中集成自动向下滚动和过滤器有一个问题,php支持javascript和ajax使用javascript和ajax在php中自动向下滚动和筛选,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,在php中集成自动向下滚动和过滤器有一个问题,php支持javascript和ajax <script> $(document).ready(function() { $('#container2').scrollPagination({ nop : 12, // The number of posts per scroll to be loaded offset : 0, // Initial offset, begi
<script>
$(document).ready(function() {
$('#container2').scrollPagination({
nop : 12, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : '', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 100, // 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>
$(文档).ready(函数(){
$('#container2')。滚动分页({
nop:12,//每个卷轴要加载的帖子数
偏移量:0,//在本例中,初始偏移量从0开始
错误:“”,//当用户到达末尾时,这是
//已显示。如果需要,您可以对此进行更改。
延迟:100,//当您向下滚动时,延迟一段时间后将加载帖子。
//这主要是出于可用性方面的考虑。您可以根据自己的需要进行修改
scroll:true//如果设置为false,则在用户滚动时不会加载主位。
//但如果用户单击,仍将加载。
});
});
上述javascript包含在该文件中。使用以下ajax参数创建php文件,该文件采用category或category+sub-category或default-else部分
(function($) {
$.fn.scrollPagination = function(options) {
var settings = {
nop : 10, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : '', // 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 = '';
else $initmessage = '';
// 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', {
category :$('#category').val(),
category1:$('#category1').val(),
subcat:$('#subcat').val(),
area:$('#filter_area1').val(),
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('');
// 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);
(函数($){
$.fn.scrollPagination=函数(选项){
变量设置={
nop:10,//要加载的每个卷轴的帖子数
偏移量:0,//在本例中,初始偏移量从0开始
错误:“”,//当用户到达末尾时,这是
//已显示。如果需要,您可以对此进行更改。
延迟:500,//当您向下滚动时,延迟一段时间后将加载帖子。
//这主要是出于可用性方面的考虑。您可以根据自己的需要进行修改
scroll:true//如果设置为false,则在用户滚动时不会加载主位。
//但如果用户单击,仍将加载。
}
//扩展选项,使其与插件一起工作
如果(选项){
$.extend(设置、选项);
}
//为每一个,使我们保持链接能力。
返回此.each(函数(){
//一些变量
$this=$(this);
$settings=设置;
var offset=$settings.offset;
var busy=false;//检查是否正在执行滚动操作
//所以我们不会多次运行它
//基于设置的自定义消息
如果($settings.scroll==true)$initmessage='';
else$initmessage='';
//附加自定义消息和额外的用户界面
$this.append(“”+$initmessage+“”);
函数getData(){
//将数据发布到ajax.php
$.post('ajax.php'{
类别:$(“#类别”).val(),
类别1:$(“#类别1”).val(),
子类别:$(“#子类别”).val(),
面积:$('#过滤器_区域1').val(),
操作:“滚动分页”,
编号:$settings.nop,
抵销:抵销,
},函数(数据){
//更改加载条内容(可能已更改)
$this.find('.loading bar').html($initmessage);
//如果没有返回数据,则不会显示更多的帖子。显示错误
如果(数据==“”){
$this.find('.loading bar').html($settings.error);
}
否则{
//抵消增加
偏移量=偏移量+$settings.nop;
//将数据附加到content div
$this.find('.content').append(数据);
//不再忙了!
忙=假;
}
});
}
getData();//最初运行函数
//如果启用了滚动
如果($settings.scroll==true){
//…并且用户正在滚动
$(窗口)。滚动(函数(){
//检查用户是否位于元素的底部
if($(窗口).scrollTop()+$(窗口).height()>$this.height()&&&!busy){
//现在我们正在工作,所以忙碌是真的
忙=真;
//告诉用户我们正在加载帖子
$this.find('.loading bar').html('');
//运行函数以在延迟内获取数据
//如果您的页脚中有内容,这将非常有用
//希望用户看到。
setTimeout(函数(){
getData();
},$settings.delay);
}
});
}
//也可以通过单击加载栏加载内容/
$this.find('.loading bar')。单击(function(){
如果(忙==假){
忙=真;
getData();
}
});
});
}
})(jQuery);
基于向下滚动操作,它会在末尾追加数据。现在我想将其与文件归档概念结合起来。我有一个下拉框,基于onchange函数,数据应该改变。有人能告诉我如何通过ajax传递参数并基于过滤更改数据吗??我不熟悉javascript和ajax
<script>
$(document).ready(function() {
$('#container2').scrollPagination({
nop : 12, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : '', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 100, // 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>