Как использовать jQuery SimplePagination

Ответ 1

Одно замечание об этом плагине, о котором мало кто может смутить, заключается в том, что он технически не реализует разбиение на страницы. Он генерирует навигатор страниц и предоставляет средства через события jQuery, чтобы просто подключить его к нашим собственным функциям разбиения на страницы.

Предполагая, что вы выполнили шаги 1 (и 2, если хотите стили CSS), необходимые из simplePagination, которые вы включили в ваш вопрос, то следующий jQuery будет делать то, что вам нужно:

jQuery(function($) {
    // Consider adding an ID to your table
    // incase a second table ever enters the picture.
    var items = $("table tbody tr");

    var numItems = items.length;
    var perPage = 2;

    // Only show the first 2 (or first `per_page`) items initially.
    items.slice(perPage).hide();

    // Now setup the pagination using the `.pagination-page` div.
    $(".pagination-page").pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "light-theme",

        // This is the actual page changing functionality.
        onPageClick: function(pageNumber) {
            // We need to show and hide `tr`s appropriately.
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;

            // We'll first hide everything...
            items.hide()
                 // ... and then only show the appropriate rows.
                 .slice(showFrom, showTo).show();
        }
    });



    // EDIT: Let cover URL fragments (i.e. #page-3 in the URL).
    // More thoroughly explained (including the regular expression) in: 
    // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment/index.html

    // We'll create a function to check the URL fragment
    // and trigger a change of page accordingly.
    function checkFragment() {
        // If there no hash, treat it like page 1.
        var hash = window.location.hash || "#page-1";

        // We'll use a regular expression to check the hash string.
        hash = hash.match(/^#page-(\d+)$/);

        if(hash) {
            // The `selectPage` function is described in the documentation.
            // We've captured the page number in a regex group: `(\d+)`.
            $(".pagination-page").pagination("selectPage", parseInt(hash[1]));
        }
    };

    // We'll call this function whenever back/forward is pressed...
    $(window).bind("popstate", checkFragment);

    // ... and we'll also call it when the page has loaded
    // (which is right now).
    checkFragment();



});

Вы можете найти приведенный ниже пример и более подробное руководство по simplePagination здесь, если вы хотите более подробно понять, как это все работает.

РЕДАКТИРОВАТЬ: Добавлен раздел кода для обработки фрагментов URL (при перезагрузке и обратно/вперед), поскольку Майк О'Коннор подчеркнул необходимость. Вы можете увидеть живой пример обработки фрагмента URL здесь.

РЕДАКТИРОВАТЬ 2: Если вам нужна совместимость с кросс-браузером для обновления фрагмента back/forward (то есть IE11...), включите History.js script перед реализацией вышеуказанного кода. Спасибо Майку О'Коннору за это:)

РЕДАКТИРОВАТЬ 3: Если вы динамически добавляете или удаляете контент, вам нужно вручную обновить страницу, чтобы отразить эти изменения. Я тоже взвесил пример. Вы можете увидеть, как он работает здесь.

Ответ 2

Хорошо, я тестировал Bilal Akil jQuery (функция ($), и это было хорошее начало для меня --- спасибо Bilal. Это работает, но с некоторыми недостатками. Во-первых, если вы перейдете к его первая ссылка и нажмите на страницу 2, тогда этот номер появится в поле местоположения как " http://bilalakil.me/bin/simplepagination/#page-2 "--- в # page-2. Но если вы скопируете весь этот URL и вставьте его в поле расположения другой вкладки или окна, чтобы имитировать кого-то, ссылающегося на страницу 2, тогда он не работает, вы окажетесь на странице 1. Или после того, как вы нажмете на кнопку 2 и перейдите на страницу 2, вы можете просто перезагрузить страницу, вы окажетесь на странице 1.

Я бы прокомментировал, но мне нужно оставить здесь код. Здесь мой измененный jQuery (функция ($) с исправлением этой конкретной проблемы:

  var items = $("#content .page");
  var numItems = items.length;
  var hashPageNum = getPageNum();  //code for getPageNum() is below
  items.hide().slice(hashPageNum-1, hashPageNum).show();

  // now setup pagination
  $("#pagination").pagination({

    items: numItems,
    itemsOnPage: 1,
    cssStyle: "light-theme",
    onPageClick: function(pageNumber) {
    items.hide().slice(pageNumber-1, pageNumber).show();
    }

  });
  $('#pagination').pagination('drawPage', hashPageNum);

Я должен был предусмотреть это, сказав, что схема выбора, которую я использую для элементов страницы, выглядит следующим образом:

<div id="pagination"></div>
<table id="content"><tbody><tr class="page"><td>...

И я использую только perPage = 1, one <tr> на страницу, но существенное различие заключается в этой строке:

items.hide().slice(hashPageNum-1, hashPageNum).show();

Это основное исправление этой проблемы о том, что ссылки С# page-n на конце не работают. Последняя строка также необходима для этой цели, поскольку она устанавливает панель разбиения на страницы с отображенной страницей n.

Вторая проблема - полная дисфункция кнопок "назад" и "вперед" с открытым кодом Bilal. Если вы поместите панель разбиения на страницы в нижней части длинной страницы, читатели обязательно захотят использовать встроенную навигационную навигацию браузера. EDIT: Bilal с тех пор обновил свой код, чтобы устранить эти проблемы.

Итак, вот функция, которая имеет существенную деталь к этой цели. Он вызывается в коде выше, но в другом месте:

function getPageNum(){
  var hashtag = parent.location.hash;
  var hashPageNum = 1; //default
  if (hashtag == '#page-1') {
    hashPageNum=1;
  } else if (hashtag == '#page-2'){
    hashPageNum=2;
  } else if (hashtag == '#page-3') {
    hashPageNum=3;
  } else if (hashtag == '') {
    hashPageNum=1;
    parent.location.hash = '#page-1';
  };
  return hashPageNum;
};

ОК, я понимаю, что я не был сложным, но важная деталь заключается в том, что если parent.location.hash имеет значение null, функция возвращает 1, для страницы 1 --- не null.

Теперь есть еще один шаг, и что для оружия window.onpopstate, который является HTML5 (надеюсь, это не вызовет проблемы с браузерами, отличными от html5... комментарий, если вы все это знаете):

window.onpopstate = function(e){
  var pagenum = getPageNum();
  $("#content .page").hide().slice(pagenum-1, pagenum).show();
  $('#pagination').pagination('drawPage', pagenum);
};

И с этим я, кажется, делаю. Я могу скопировать URL-адрес с суффиксами # page-n и запустить их в другом месте, и они работают. Кнопки вперед и назад работают. Обратите внимание, что бит "drawPage" в коде, приведенном выше, - это просто настроить индикацию в панели разбиения на страницы.

ОК, это редактирование 2/16/2015..., чтобы показать исправление проблемы IE11, которое обсуждается в комментариях. Я не редактировал код выше, потому что, возможно, вы не захотите исправлять этот путь, хотя он, похоже, работает.

Сначала перейдите в этот проект github, а затем введите "t" для файлов (hah!) и нажмите на history.min.js, а затем на кнопке Raw и сделайте SaveAs в вашем браузере. Таким образом, вы будете использовать эту библиотеку JavaScript, которая эффективно создает всплывающие события (и другие события) для браузеров, которые их не создают.

Теперь в приведенном выше коде удалите window.onpopstate = function (e) {}, но сохраните его блок кода и вставьте его в конец jQuery (функция ($), сразу после $('# pagination')..pagination('drawPage', hashPageNum), следующим образом:

  $(window).on('popstate', function(e) {
  var pagenum = getPageNum();
   $("#content .page").hide().slice(pagenum-1, pagenum).show();
   $('#pagination').pagination('drawPage', pagenum);
  }); 

EDIT Я должен добавить, что если вы поместите ссылку на одну из ваших страниц с таким образом на вашем сайте - например, ваша домашняя страница, вероятно, имеет привязки в меню, которые переходят на некоторые ваши страницы с разбивкой по страницам --- тогда, если вы поместите цель = "_ blank" в ссылку и для href поместите www.yourdomain.com/yourpaginatedpage, все будет в порядке. Это будет хорошо, потому что вы не будете пытаться использовать обратную стрелку в своем браузере, чтобы вернуться на свою домашнюю страницу, так как открытая страница будет открываться как новая вкладка или новое окно.

Но... если вы оставите объект цели = "_ пустым" и откроете страницу с разбивкой по страницам в том же окне, вы обнаружите, что кнопка "Назад" не работает. История там, чтобы видеть, когда вы нажимаете на стрелку назад (на самом деле это неправильно, поскольку есть два списка вашей страницы), но никакое нажатие на стрелку не приведет к ее работе.

Лечение - это просто поместить www.yourdomain.com/yourpaginatedpage#page-1 в качестве href... С# page-1. Затем будет работать стрелка назад.

Ответ 3

Я тестировал jquery в Bilal Akil (функция ($)), и я нашел одну ошибку, которую я хотел бы исправить - и спасибо Bilal за ваше участие в этой теме.

Поскольку я не могу опубликовать комментарий или предложить отредактировать его сообщение, я отправлю свой ответ прямо здесь. Для получения дополнительной информации смотрите сообщение Bilal Akil.

Селектор для разбивки на страницы был неправильным (на самом деле это не так) в коде, когда я попробовал его на веб-сайте, поэтому решил отредактировать сообщение и, кстати, добавил 2 переменные, чтобы обеспечить гибкость для будущих изменений или собственную настройку.

// mind the slight change below, personal idea of best practices
jQuery(function($) {
    // consider adding an id to your table,
    // just incase a second table ever enters the picture..?
    var items = $("table tbody tr");

    var numItems = items.length;
    var perPage = 2;

    var pagination_placeholder_selector = ".pagination-page"; // put in a variable to ensure proper changes in the future
    var myPageName = "#page-"; // a number will follow for each page

    // only show the first 2 (or "first per_page") items initially
    items.slice(perPage).hide();

    // now setup your pagination
    // you need that .pagination-page div before/after your table
    $(pagination_placeholder_selector).pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "light-theme",
        hrefTextPrefix: myPageName,
        onPageClick: function(pageNumber) { // this is where the magic happens
            // someone changed page, lets hide/show trs appropriately
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;

            items.hide() // first hide everything, then show for the new page
                 .slice(showFrom, showTo).show();
        }
    });



    // EDIT: extra stuff to cover url fragments (i.e. #page-3)
    // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment
    // is more thoroughly commented (to explain the regular expression)

    // we'll create a function to check the url fragment and change page
    // we're storing this function in a variable so we can reuse it
    var checkFragment = function() {
        // if there no hash, make sure we go to page 1
        var hash = window.location.hash || (myPageName+"1");

        // we'll use regex to check the hash string
        var re = new RegExp("^"+myPageName+"(\\d+)$");
        hash = hash.match(re);

        if(hash)
            // the selectPage function is described in the documentation
            // we've captured the page number in a regex group: (\d+)
            $(pagination_placeholder_selector).pagination("selectPage", parseInt(hash[1]));
    };

    // we'll call this function whenever the back/forward is pressed
    $(window).bind("popstate", checkFragment);

    // and we'll also call it to check right now!
    checkFragment();



});

Ответ 4

Я преобразовал работу Bilal Akil в функцию и вызвал ее в ajax, поскольку я загружаю данные по вызову ajax. Это работает потрясающе. Спасибо всем участникам.

function paginate() {
// consider adding an id to your table,
// just incase a second table ever enters the picture..?
var items = jQuery("#searched_prfiles .row .col-md-4");

var numItems = items.length;
var perPage = 2;

var pagination_placeholder_selector = "#pagination_links"; // put in a variable to ensure proper changes in the future
var myPageName = "#page-"; // a number will follow for each page

// only show the first 2 (or "first per_page") items initially
items.slice(perPage).hide();

// now setup your pagination
// you need that .pagination-page div before/after your table
jQuery(pagination_placeholder_selector).pagination({
    items: numItems,
    itemsOnPage: perPage,
    cssStyle: "light-theme",
    hrefTextPrefix: myPageName,
    onPageClick: function(pageNumber) { // this is where the magic happens
        // someone changed page, lets hide/show trs appropriately
        var showFrom = perPage * (pageNumber - 1);
        var showTo = showFrom + perPage;

        items.hide() // first hide everything, then show for the new page
             .slice(showFrom, showTo).show();
    }
});



// EDIT: extra stuff to cover url fragments (i.e. #page-3)
// https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment
// is more thoroughly commented (to explain the regular expression)

// we'll create a function to check the url fragment and change page
// we're storing this function in a variable so we can reuse it
var checkFragment = function() {
    // if there no hash, make sure we go to page 1
    var hash = window.location.hash || (myPageName+"1");

    // we'll use regex to check the hash string
    var re = new RegExp("^"+myPageName+"(\\d+)$");
    hash = hash.match(re);

    if(hash)
        // the selectPage function is described in the documentation
        // we've captured the page number in a regex group: (\d+)
        jQuery(pagination_placeholder_selector).pagination("selectPage", parseInt(hash[1]));
};

// we'll call this function whenever the back/forward is pressed
jQuery(window).bind("popstate", checkFragment);

// and we'll also call it to check right now!
checkFragment();

}