服务器端（PHP）使用Ajax和无限滚动进行过滤和排序
我已经在我的项目（）上实现了无限ajax滚动插件。它是一个显示一长串div的PHP项目。infinate滚动使用服务器端分页。我也有服务器端的过滤和排序，理想的情况是使用Ajax，这样它可以很好地与我的无限卷轴配合使用。如何使用Ajax通过过滤器？我找到了关于如何使用JQuery进行过滤的教程，但没有一本是使用PHP进行过滤的 我确实发现它同时具有过滤和无限滚动功能，但在文档中它建议不要同时使用这两种功能，这对我来说是一个巨大的耻辱，因为它看起来像一个伟大的插件 有谁能建议我最好的方法吗？如果我需要重置无限滚动时，新的过滤器被选中，然后这是罚款。但是我该如何做呢？我该如何将所选的过滤器传递给无限卷轴呢 以下是我到目前为止的情况服务器端（PHP）使用Ajax和无限滚动进行过滤和排序,php,ajax,filtering,jquery-isotope,infinite-scroll,Php,Ajax,Filtering,Jquery Isotope,Infinite Scroll,我已经在我的项目（）上实现了无限ajax滚动插件。它是一个显示一长串div的PHP项目。infinate滚动使用服务器端分页。我也有服务器端的过滤和排序，理想的情况是使用Ajax，这样它可以很好地与我的无限卷轴配合使用。如何使用Ajax通过过滤器？我找到了关于如何使用JQuery进行过滤的教程，但没有一本是使用PHP进行过滤的 我确实发现它同时具有过滤和无限滚动功能，但在文档中它建议不要同时使用这两种功能，这对我来说是一个巨大的耻辱，因为它看起来像一个伟大的插件 有谁能建议我最好的方法吗？如果我
$cat = (isset($_GET['cat']) ? urldecode($_GET['cat']) : '');
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
$start = ($page * $pagelimit) - $pagelimit;
$limit = $pagelimit*$page;
//get total number of discounts for search
$total_items = Stuff::countItems($cat);
if( $total_items > ($page * $limit) ){
$next = ++$page;
}
//get items
$items = Stuff::getItems($cat, $sortby, $dir, $start, $limit);
if(!$items){
header('HTTP/1.0 404 Not Found');
echo 'Page not found!';
exit();
}
?>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ias.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.paginate', // page navigation
next: '.paginate a', // next page selector
loader: '<img src="css/ajax-loader.gif"/>', // loading gif
noneleft: 'No more items', //Contains the message to be displayed when there are no more pages left to load
triggerPageThreshold: 5, // show "load more" if scroll more than this to stop
trigger: "Load more items"
});
});
</script>
</head>
<body>
<div class="wrap">
<?php
echo 'TOTAL: '.$total_items .'<br />';
//filter through categories*/
echo 'FILTER BY CATEGORY:';
foreach ($categories as $category){
$categoryURL = urlencode($category);
echo "<a href=\"index.php?cat=$categoryURL\">$category<a/> | ";
}
//loop through and display items
foreach ($items as $id => $item){
echo "<div style=\"border:1px solid green;margin-bottom:5px;\" class=\"item\" id=\"item-$id\">
ID: $id <br />
$item[name]<br />
$item[cat]<br />
$item[description]<br />
</div>";
}
?>
<!--paginagation-->
<?php if (isset($next)): ?>
<div class="paginate">
<a href='index.php?cat=<?php echo $cat?>&p=<?php echo $next?>'>Next</a>
</div>
<?php endif?>
</div>
</body>
</html>
$cat=（isset（$\u GET['cat']）？urldecode（$\u GET['cat']）：“”）；
$page=（int）（！isset（$\u GET['p']）？1:$_GET['p']；
$start=（$page*$pagelimit）-$pagelimit；
$limit=$pagelimit*$page；
//获取搜索的折扣总数
$total_items=Stuff:：countItems（$cat）；
如果（$total_items>（$page*$limit））{
$next=+$page；
}
//获取项目
$items=Stuff:：getItems（$cat、$sortby、$dir、$start、$limit）；
如果（！$items）{
标头（“未找到HTTP/1.0 404”）；
echo“未找到页面！”；
退出（）；
}
?>
$（文档）.ready（函数（）{
//无限Ajax滚动配置
jQuery.ias({
容器：'.wrap'，//将数据附加到的主容器
项：'.item'，//单个项
分页：'.paginate'，//页面导航
下一页：'.paginate a'，//下一页选择器
加载程序：“”，//正在加载gif
noneleft:'无更多项目'，//包含在没有更多页面可加载时显示的消息
triggerPageThreshold:5，//如果滚动超过此值停止，则显示“加载更多”
触发器：“加载更多项目”
});
});
只有在客户端（用于已加载的数据）和服务器（用于将来要加载的页面）上应用过滤器时，无限滚动和过滤才有意义
但是，在应用了一些完全不同的过滤器或排序之后，我认为用户希望返回到第一页（或者滚动到顶部以获得无限滚动）。
丢失一些已经加载的结果是唯一的方法。你可以通过这些结果来提高速度
为了方便起见，我建议您开始使用或使用类似的客户端MVC库。jQuery非常适合处理如此复杂的问题。在某个时刻，你会发现你需要更好的东西
我不久前开发的一个应用程序，需要类似的东西。（）
您根本不需要“page”参数。我使用它是为了让我的“假”提供者能够返回顺序的、可读的名称
在服务器端，您需要随时（因此可能需要$\u SESSION
）了解当前查询已向客户端发送了多少个结果
大概是这样的：
function getResults($query) {
if($_SESSION['query']['category'] !== $query['category']) {
if(!array_key_exists($query['category'], $_SESSION['resultsSent'])) {
$_SESSION['resultsSent'][$query['category']] = 0;
}
$_SESSION['query'] = $query;
}
$sql = 'SELECT * FROM foo WHERE category = ? LIMIT ?, ?';
$data = $db->select($sql, array($_SESSION['query']['category'], $_SESSION['resultsSent'][$query['category']], 10);
$_SESSION['resultsSent'][$query['category']] += count($data);
return json_encode($data);
}
if(!array_key_exists('query', $_SESSION)) {
$_SESSION['resultsSent'] = array();
$_SESSION['query'] = array(); // maybe some defaults here?
}
if(array_key_exists('query', $_POST)) {
echo getResults($_POST['query']);
}
function resultsService() {
this.query = function(query, success) {
jQuery.post({
url: 'index.php',
data: query,
success: success
});
}
}
您必须编写一个执行AJAX调用的resultsService
。
可能是这样的：
function getResults($query) {
if($_SESSION['query']['category'] !== $query['category']) {
if(!array_key_exists($query['category'], $_SESSION['resultsSent'])) {
$_SESSION['resultsSent'][$query['category']] = 0;
}
$_SESSION['query'] = $query;
}
$sql = 'SELECT * FROM foo WHERE category = ? LIMIT ?, ?';
$data = $db->select($sql, array($_SESSION['query']['category'], $_SESSION['resultsSent'][$query['category']], 10);
$_SESSION['resultsSent'][$query['category']] += count($data);
return json_encode($data);
}
if(!array_key_exists('query', $_SESSION)) {
$_SESSION['resultsSent'] = array();
$_SESSION['query'] = array(); // maybe some defaults here?
}
if(array_key_exists('query', $_POST)) {
echo getResults($_POST['query']);
}
function resultsService() {
this.query = function(query, success) {
jQuery.post({
url: 'index.php',
data: query,
success: success
});
}
}
在那之后，你所要做的就是把你的无限卷轴库放在上面
这取决于这样一个事实：（1）在客户机上，您从不删除已加载的数据，如果数据不符合当前筛选器，您只需将其隐藏；（2）对于每个可能的筛选器组合，您的服务器都知道它发送了多少数据，这样它就不会再次发送回
如果您有更复杂的筛选器，其结果不是独占的（对于多个筛选器组合，可能会返回一个结果-考虑价格、评级和房间数量，而不是类别），那么您最终将向客户发送副本。除了重置整个列表，没有真正的解决方案。您可以尝试跟踪发送给客户端的所有单个结果，而不仅仅是计数，并在查询时过滤掉它们（其中id不在（1、2、17、20…）
），但这对于大量数据肯定不起作用
对于排序，除了确切地知道您发送给客户机的内容，或者很明显，重置列表之外，没有其他解决方案
我正在POST
将一个JS对象作为JSON
编码字符串（ko.toJS（this.query）），然后用PHP对其进行JSON\u解码。
无论您如何构建该JS对象，将其作为JSON
发送都比手动将其序列化为GET
参数要好
此外，最好对所有过滤器类型使用通用格式，并通过设置模式服务器端处理它们
对于['category'：1，'subcategory'：2，'user'：1234]
我将定义categoryFilter
、subcategoryFilter
和userFilter
，使用call\u user\u func
调用它们，并将过滤后的值作为参数传递到查询中，为每个查询添加位
$query = DB::table('stuff');
$filters = json_decode($_POST['query']);
foreach($filters as $filterName => $value) {
$query = call_user_func_array($filterName . 'Filter', array($query, $value));
}
$results = $query->get();
function categoryFilter($query, $value) {
$query->where('category_id', '=', $value);
return $query;
}
实际代码的外观以及构建SQL查询的容易程度取决于所使用的内容。我在上面使用的DB类就是绑定的那个
在客户端构建中，即使使用基本的jQuery，查询对象也不应该那么难。考虑一下这种方式：当您进行筛选时，您会更改整个结果，因此需要重新加载数据并重置滚动。这就是为什么你不应该同时使用过滤和无限滚动
我在以前的项目中也做了同样的事情。希望它对您有用。那么您想用html/javascript指定一个过滤器，并通过AJAX将其提交到服务器端脚本，我做对了吗？如果是的话，什么样的过滤器？我也在尝试f