标签：jquery-isotope ajax infinite-scroll php filtering
我已经在我的项目(https://github.com/webcreate/infinite-ajax-scroll)中实现了infinite-ajax-scroll插件.它是一个PHP项目,其中显示了很长的div列表.无限滚动使用服务器端分页.我还具有服务器端过滤和排序功能,理想情况下,我希望使用Ajax,以便它与我的无限滚动完美配合.如何使用Ajax通过过滤器？我找到了有关如何使用JQuery进行过滤的教程,但都没有使用PHP进行过滤.
我确实找到了具有过滤和无限滚动功能的http://isotope.metafizzy.co/,但是在文档中建议不要同时使用这两个功能,这对我来说是一个巨大的耻辱,因为它看起来像是一个出色的插件.
谁能建议我最好的方法？如果在选择新过滤器时需要重置无限滚动,那就可以了.但是,我该怎么做？如何将选定的滤镜传递给无限滚动？
以下是我到目前为止的内容.
$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>
解决方法:
仅当您同时在客户端(对于已加载的数据)和服务器(对于将来的页面加载)上应用筛选器时,无限滚动和筛选才有意义.
但是在应用了完全不同的过滤器或排序之后,我会认为用户希望回到第一页(或滚动到顶部以进行无限滚动).
丢失一些已经加载的结果是唯一的方法.您也许可以将cache的结果提高一点速度.
为了简化此操作,我建议您开始使用KnockoutJS或某些类似的客户端MVC库. jQuery非常适合处理这么多的复杂性.在某个时候,您发现您需要更好的东西.
我之前使用过的应用程序的Here’s a cleaned up extract需要类似的内容. (edit link)
您根本不需要该“页面”参数.我使用它是为了让我的“假”提供程序可以返回顺序的,可读的名称.
在服务器端,您需要随时了解当前查询(例如$_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']);
}
您必须编写一个执行AJAX调用的resultService.
大概是这样的：
function resultsService() {
this.query = function(query, success) {
jQuery.post({
url: 'index.php',
data: query,
success: success
});
}
}
之后,您要做的就是将无限滚动库放在顶部.
这取决于以下事实：(1)在客户端上您永远不会删除已加载的数据,如果它不适合当前过滤器,则将其隐藏；(2)服务器可能知道的每个过滤器组合都知道发送了多少数据,因此它不会再次发送回去.
如果您有更复杂的过滤器,但结果不是唯一的(多个过滤器组合可能会返回一个结果-考虑价格,等级和房间数量,而不是类别),那么您最终将向客户发送重复的结果.除了重置整个列表之外,没有其他解决方案.您可以尝试跟踪发送给客户端的所有结果,不仅是计数,还可以在查询时将其过滤掉(WHERE ID NOT IN(1、2、17、20,…)),但是对于大量数据,这绝对是行不通的.
对于排序,除了确切地知道您已发送给客户端的内容,或者显然是重置列表之外,没有其他解决方案.
我正在将JS对象作为JSON编码的字符串(ko.toJS(this.query))发布,然后在PHP中以json_decode对其进行编码.
不管您如何构建该JS对象,将其作为JSON进行发送都比将自己作为GET参数手动序列化要好.
另外,最好对所有过滤器类型使用通用格式,并在服务器端通过设置的模式处理它们.
对于[‘category’：1,’subcategory’：2,’user’：1234]我将定义categoryFilter,subcategoryFilter和userFilter,使用call_user_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类是与Laravel捆绑在一起的类.
在客户端上,即使使用基本的jQuery,查询对象也不应该那么难.
标签：jquery-isotope,ajax,infinite-scroll,php,filtering 来源： https://codeday.me/bug/20191122/2061089.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。