Блог

У меня есть неупорядоченный список из 50 элементов. Я хочу показывать только 10 одновременно с дополнительной ссылкой внизу. Точно так, только без ajax, поскольку мне это не нужно.

Не могли бы вы, пожалуйста, дать мне совет или направить меня к руководству о том, как я могу достичь этого эффекта?

Спасибо!

РЕДАКТИРОВАТЬ: Спасибо Ройи Намиру за ссылку. Я пытаюсь показать 2 элемента на странице из списка из 10, но не могу понять, что я делаю не так…

JS

 function pageselectCallback(page_index, jq){
                // Get number of elements per pagionation page from form
                var items_per_page = 2;
                var max_elem = Math.min((page_index 1) * items_per_page, members.length);
                var newcontent = '';

                // Iterate through a selection of the content and build an HTML string
                for(var i=page_index*items_per_page;i<max_elem;i  )
                {
                                      newcontent = jQuery('#hiddenresult div.result:eq(' i ')').append();
                }

                // Replace old content with new content
                $('#Searchresult').html(newcontent);

                // Prevent click eventpropagation
                return false;
}

/** 
 * Initialisation function for pagination
 */
function initPagination() {
        // Create content inside pagination element
        $("#Pagination").pagination(10, {
                callback: pageselectCallback,
                load_first_page:true,
                items_per_page:2 
        });
 }

// When document is ready, initialize pagination
$(document).ready(function(){      
        initPagination();
});
  

HTML:

 <div id="Pagination"></div>
    <br style="clear:both;" />
    <div id="Searchresult">
        This content will be replaced when pagination inits.
    </div>

    <!-- Container element for all the Elements that are to be paginated -->
    <div id="hiddenresult" style="display:none;">
        <div class="result">111</div>
        <div class="result">222</div>
        <div class="result">333</div>
        <div class="result">444</div>
    </div>
  

ПРАВКА # 2: Найден мой ответ: D http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin

Загрузите полный контент, если вы не хотите использовать AJAX.

Вы можете скрывать элементы с помощью jQuery и CSS. Взгляните, например, на show() и hide() . Вы можете включить кнопку на ваш показать еще ссылку и замените эту ссылку с менее ссылке напротив, слишком.

http://api.jquery.com/show/
http://api.jquery.com/hide/

конечно

http://plugins.jquery.com/project/pagination

демонстрация здесь :

http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

Самый простой способ, который я могу придумать для этого, — это использовать несколько ссылок «скрыть показать».

добавьте этот простой код в нижнюю часть вашей страницы.

     <script type="text/javascript">
  $(document).ready(function () {
        // choose text for the show/hide link - can contain HTML (e.g. an image)
        var showText = 'expand';
        var hideText = 'hide';

        // initialise the visibility check
        var is_visible = false;

        // append show/hide links to the element directly preceding the element with a class of "toggle"
        $('.toggle').prev().append(' <a href="#" class="toggleLink">'   showText   '</a>');

        // hide all of the elements with a class of 'toggle'
        $('.toggle').hide();

        // capture clicks on the toggle links
        $('a.toggleLink').click(function () {

            // change the link depending on whether the element is shown or hidden
            if ($(this).html() == hideText) {
                $(this).html(showText);
                $(this).removeClass('hide');
                $(this).parent().removeClass('purple');
            }
            else {
                $(this).html(hideText);
                $(this).addClass('hide');
                $(this).parent("h2").hide();
            }

            // toggle the display - uncomment the next line for a basic "accordion" style
            $(this).parent().next('.toggle').toggle();

            // return false so any link destination is not followed
            return false;

        });
    });
</script>
  

затем просто оберните каждую группу из десяти элементов следующим образом

 <div class="nextresults">
        <h2 class="more">Show More</h2>
         <div class="toggle">
           {10 results go hear!!}    
         </div>
  </div>
  

Для полного исправления этого кода goto http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements