3
내 프로젝트에 무한 아약스 스크롤 플러그인을 구현했습니다 (https://github.com/webcreate/infinite-ajax-scroll). div의 긴 목록을 표시하는 PHP 프로젝트입니다. 무한 스크롤은 서버 측 페이지 매김을 사용합니다. 또한 서버 측 필터링 및 순서 지정이 필요하며 이상적으로 Ajax를 사용하여 무한의 스크롤과 잘 작동하도록하고 싶습니다. Ajax를 사용하여 필터를 전달하는 방법은 무엇입니까? JQuery를 사용하여 필터링하는 방법에 대한 자습서를 찾았으나 PHP를 사용하는 튜토리얼은 없습니다.Ajax와 무한 스크롤로 서버 사이드 (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>
그래서 html/javascript를 사용하여 필터를 지정하고 AJAX를 통해 서버 측 스크립트에 제출하려는 경우, 올바르게 입력 했습니까? 그렇다면 어떤 종류의 필터입니까? – Ch33f
나는 또한이 부분이 당신을 위해 작동하지 않는 부분을 파악하려고합니다. 카테고리가 필터링되어야합니다 - 일어나지 않아야하는 것은 무엇입니까? –
예, 범주가 필터링되지만 페이지를 다시로드 한 후에 만 적용됩니다. 필터를 적용 할 때 아약스 사용하여 새 결과를로드하려면 노력하고있어. 그러면 아마 무한 스크롤을 재설정해야 할 것입니다. 그런 다음 선택한 필터 (카테고리)를 전달하여 무한 스크롤이 선택한 필터와 작동하도록해야합니다. 희망을 분명히 해줍니다. – LeeTee