簡體   English   中英

如何更改Ajax分頁以加載更多或無限滾動功能

[英]How to change ajax pagination to load more or infinite scroll functionality

我找到了我用於Wordpress稱為“事件管理器”的插件的AJAX分頁功能。 截至目前,當單擊分頁時,它將在下一頁上加載即將到來的內容。但是我希望所加載的內容顯示在初始內容下。 這樣用戶可以繼續向下滾動。 就像無限滾動和加載更多按鈕一樣。 是否有人願意在這里幫助我或為我指明正確的方向?

提前致謝!

if(!function_exists('em_paginate')){ //overridable e.g. in you mu-plugins folder.
/**
 * Takes a few params and determines a pagination link structure
 * @param string $link
 * @param int $total
 * @param int $limit
 * @param int $page
 * @param array $data If supplied and EM_USE_DATA_ATTS is true/defined, this set of data will be stripped from the URL and added as a data-em-ajax attribute containing data AJAX can use
 * @return string
 */
function em_paginate($link, $total, $limit, $page=1, $data=array()){
    if($limit > 0){
        $pagesToShow = defined('EM_PAGES_TO_SHOW') ? EM_PAGES_TO_SHOW : 10;
        $url_parts = explode('?', $link);
        $base_link = $url_parts[0];
        $base_querystring = '';
        $data_atts = '';
        //Get querystring for first page without page
        if( count($url_parts) > 0 ){
            $query_arr = array();
            parse_str($url_parts[1], $query_arr);
            //if $data was passed, strip any of these vars from both the $query_arr and $link for inclusion in the data-em-ajax attribute
            if( !empty($data) && is_array($data) && (!defined('EM_USE_DATA_ATTS') || EM_USE_DATA_ATTS) ){
                //remove the data attributes from $query_arr
                foreach( array_keys($data) as $key){
                    if( array_key_exists($key, $query_arr) ){
                        unset($query_arr[$key]);
                    }
                }
                //rebuild the master link, without these data attributes
                if( count($query_arr) > 0 ){
                    $link = $base_link .'?'. build_query($query_arr);
                }else{
                    $link = $base_link;
                }
                $data_atts = 'data-em-ajax="'.esc_attr(build_query($data)).'"'; //for inclusion later on
            }
            //proceed to build the base querystring without pagination arguments
            unset($query_arr['page']); unset($query_arr['pno']);
            $base_querystring = esc_attr(build_query($query_arr));
            if( !empty($base_querystring) ) $base_querystring = '?'.$base_querystring;
        }
        //calculate
        $maxPages = ceil($total/$limit); //Total number of pages
        $startPage = ($page <= $pagesToShow) ? 1 : $pagesToShow * (floor($page/$pagesToShow)) ; //Which page to start the pagination links from (in case we're on say page 12 and $pagesToShow is 10 pages)
        $placeholder = urlencode('%PAGE%');
        $link = str_replace('%PAGE%', $placeholder, esc_url($link)); //To avoid url encoded/non encoded placeholders
        //Add the back and first buttons
            $string = ($page>1 && $startPage != 1) ? '<a class="prev page-numbers" href="'.str_replace($placeholder,1,$link).'" title="1">&lt;&lt;</a> ' : '';
            if($page == 2){
                $string .= ' <a class="prev page-numbers" href="'.esc_url($base_link.$base_querystring).'" title="2">back </a> ';
            }elseif($page > 2){
                $string .= ' <a class="prev page-numbers" href="'.str_replace($placeholder,$page-1,$link).'" title="'.($page-1).'">  </a> ';
            }
        //Loop each page and create a link or just a bold number if its the current page
            for ($i = $startPage ; $i < $startPage+$pagesToShow && $i <= $maxPages ; $i++){
                if($i == $page || (empty($page) && $startPage == $i)) {
                    $string .= ' <strong><span class="page-numbers current">'.$i.'</span></strong>';
                }elseif($i=='1'){
                    $string .= ' <a class="page-numbers" href="'.esc_url($base_link.$base_querystring).'" title="'.$i.'"></a> ';
                }else{
                    $string .= ' <a class="page-numbers" href="'.str_replace($placeholder,$i,$link).'" title="'.$i.'"></a> ';
                }
            }
        //Add the forward and last buttons
            $string .= ($page < $maxPages) ? ' <a class="next page-numbers" href="'.str_replace($placeholder,$page+1,$link).'" title="'.($page+1).'">load more</a> ' :' ' ;
            $string .= ($i-1 < $maxPages) ? ' <a class="next page-numbers" href="'.str_replace($placeholder,$maxPages,$link).'" title="'.$maxPages.'">&gt;&gt;</a> ' : ' ';
        //Return the string
            return apply_filters('em_paginate', '<span class="em-pagination" '.$data_atts.'>'.$string.'</span>');
    }
}
}

如果該插件使用自定義帖子類型,那么您也可以使用ajax-load-more來使用此插件。 您也可以自己創建一個ajax請求。

AJAX 在滾動到底部時加載更多<div></div><div id="text_translate"><p>我想使用 AJAX 和 PHP ZC1C425268E68385D14AB5074C17A 從 mysql 加載數據。 例子: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> #ajaxload { border: 1px solid #000; max-height: 400px; overflow-y:scroll; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;?php //data from mysql... ?&gt; &lt;div id="ajaxload"&gt; &lt;ul&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;Loading next data...&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</pre></div></div><p></p><p> 但是我在這里(在stackoverflow上)沒有找到具體的例子......一切都只是全頁滾動,但我只想滾動&lt;div&gt;以加載更多數據。 你能幫助我嗎?</p></div>

[英]AJAX load more on scroll to bottom in <div>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 無限的ajax滾動分頁循環 如何讓ajax加載更多內容,使用按鈕分頁工作 無限滾動,分頁和路線 CakePHP通過ajax分頁加載更多結果 Laravel使用Jquery和AJAX在滾動中加載更多數據 AJAX 在滾動到底部時加載更多<div></div><div id="text_translate"><p>我想使用 AJAX 和 PHP ZC1C425268E68385D14AB5074C17A 從 mysql 加載數據。 例子: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> #ajaxload { border: 1px solid #000; max-height: 400px; overflow-y:scroll; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;?php //data from mysql... ?&gt; &lt;div id="ajaxload"&gt; &lt;ul&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;Loading next data...&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</pre></div></div><p></p><p> 但是我在這里(在stackoverflow上)沒有找到具體的例子......一切都只是全頁滾動,但我只想滾動&lt;div&gt;以加載更多數據。 你能幫助我嗎?</p></div> WordPress的文章類型無限滾動/加載更多按鈕 WordPress-無限滾動自定義分頁 Ajax無限向下滾動分頁。 在ajax調用中使用異步時圖像未顯示 Ajax中的無限滾動
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM