web-dev-qa-db-ja.com

SimplePagination jqueryの使用方法

コードで simplePagination を使用しようとしています。 （MVC4 C＃を使用して開発しています）

この一連のコードがあるとしましょう

<table>
    <thead>
        <tr>
            <td><input type="checkbox" name="select-all" id="select-all" /></td>
            <td style="text-align: left">Name</td>
            <td style="text-align: left">Created By</td>
            <td style="text-align: left">Created Date</td>
        </tr>
    </thead>
    <tbody>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Window</td>
            <td>John</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Door</td>
            <td>Chris</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Floor</td>
            <td>Michael</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Car</td>
            <td>James</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Bike</td>
            <td>Steven</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
    </tbody>
</table>

*注意：上記のコードでは、クラス 'post'を各 'tr'（テーブル本体の行）に追加します。そして、これらの行はforループ（C＃）によって動的に生成されます

そして、ドキュメントから simplePagination を使用したい場合、次のようにjqueryを宣言する必要があります。

$(function() {
    $(selector).pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

実際、この simplePagination の使用方法（*呼び出し方法）はよくわかりません。ページネーションを扱うのは初めてです。

私はすでにこのコードをテーブルの後に配置しようとしました

<div class="pagination-page"></div>

そして、 '。pagination-page'でjquery呼び出しメソッド内の 'Selector'を変更しましたが、動作しませんでした。

$(function() {
    $('.pagination-page').pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});
  1. 「セレクタ」をクラス名に置き換える必要がありますか？はいの場合、どうすればいいですか？
  2. 2番目は、これをどのように宣言するのですか？ simplePagination 各ページに2行のみを表示するようにします（2つのクラス「投稿」）？

*最初のページでのみ表示される手段

+--------------------------------------------------+
| [] |  Name  | CreatedBy | CreatedDate            | 
|--------------------------------------------------| 
| [] | Window | John      | 01/01/2014 12:00:00 AM | 
| [] | Door   | Chris     | 01/01/2014 12:00:00 AM | 
+--------------------------------------------------+

2ページ目に表示されます

+--------------------------------------------------+
| [] |  Name  | CreatedBy | CreatedDate            | 
|--------------------------------------------------| 
| [] | Floor  | Michael   | 01/01/2014 12:00:00 AM | 
| [] | Car    | James     | 01/01/2014 12:00:00 AM | 
+--------------------------------------------------+

など。

*注意：このjqueryがアイテム数を検出し、ページ数を生成し、それに応じてそれらのアイテムを配置する方法がわかりません。

javascriptjqueryhtmljquery-pagination
18
muhihsan

このプラグインについて注意すべきことの1つは、数人が混乱するかもしれないことですが、技術的にはページネーション自体を実装していないということです。ページナビゲーターを生成し、jQueryイベントを介して、独自のページネーション機能に単純に接続する手段を提供します。

質問に含まれている simplePagination リンクから必要な手順1（およびCSSスタイリングが必要な場合は2）を実行したと仮定すると、次の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's 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's 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();



});

実行例 here と、simplePaginationに関するより徹底的なガイド here を見つけることができます。

EDIT：Mike O'Connorが必要性を強調したため、URLフラグメント（リロード時およびバック/フォワード時）を処理するコードのセクションを追加しました。 URLフラグメント処理の実際の例を見ることができます here 。

EDIT 2：後方/前方フラグメント更新（IE11 ...）のブラウザ間の互換性が必要な場合は、 履歴.js 上記のコードを実装する前のスクリプト。マイク・オコナーに感謝します:)

EDIT 3：コンテンツを動的に追加または削除する場合は、これらの変更を反映するようにページネーターを手動で更新する必要があります。私もそのための例を挙げました。 here で実行されていることがわかります。

46
Bilal Akil

わかりました。BilalAkilのjQuery（function（$）をテストしました。これは私にとっては良いスタートでした。Bilalに感謝します。動作しますが、いくつか欠陥があります。1つは、 彼の最初のリンク ページ2をクリックすると、その番号がロケーションボックスに「 http://bilalakil.github.io/bin/simplepagination/#page-2 」---＃page-2として表示されます。ただし、そのURL全体をコピーして別のタブまたはウィンドウのロケーションボックスに貼り付け、ページ2にリンクしている人をシミュレートすると、フラットになりません。ページ1に表示されるか、ページ2をクリックした後ボタンを押してページ2に移動すると、ページをリロードするだけでページ1に移動します。

私はコメントしたでしょうが、ここにいくつかのコードを残す必要があります。その特定の問題を修正した修正jQuery（function（$）を次に示します。

  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>...

そして、ページごとに1つの<tr>を使用してperPage = 1を使用していますが、本質的な違いは次の行です。

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

これは、＃page-nが最後に機能しないリンクに関する問題の主な修正です。最後の行は、ページnが選択された状態でページネーションバーを設定するため、その目的にも必要です。

2番目の問題は、Bilalの裸のコードを使用した戻るボタンと進むボタンの完全な機能不全です。ページネーションバーを長いページの下部に配置すると、ブラウザの組み込みのページナビゲーションを使用したくなるでしょう。 EDIT：Bilalはこれらの問題を取り除くためにコードを更新しました。

そのため、ここにその目的に向けて本質的な詳細を持つ関数があります。上記のコードで呼び出されますが、他の1つの場所でも呼び出されます。

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;
};

OK、私は洗練されていないことを理解しますが、本質的な詳細は、parent.location.hashがnullの場合、関数はnullではなく1ページ目で1を返すことです。

もう1つのステップがあります。それは、HTML5のことであるwindow.onpopstateを武器化することです（これがHTML5以外のブラウザで問題を引き起こさないことを願っています。詳しくご存じの場合はコメントしてください）。

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

そして、それで私は終わったように見えます。 ＃page-nのサフィックスを付けてURLをコピーし、別の場所で起動すると、機能します。進むボタンと戻るボタンが機能します。すぐ上のコードの「drawPage」ビットは、ページネーションバーの表示を調整するためのものであることに注意してください。

OK、これは2015年2月16日の編集です... IE11の問題の修正を表示するためにコメントで説明されています。上記のコードは編集しませんでした。おそらく、この方法で修正したいとは思わないからです。

最初に このgithubプロジェクト に移動し、ファイルに「t」と入力して（hah！）、history.min.jsをクリックしてから、Rawボタンをクリックし、ブラウザーでSaveAsを実行します。したがって、ポップアップ状態のイベント（およびその他のイベント）を発生させないブラウザー用に効果的に作成するJavaScriptライブラリーを使用します。

さて、上記のコードでwindow.onpopstate = function（e）{}を削除しますが、そのコードブロックを保存し、jQuery（function（$）の最後、$（ '＃pagination'）。pagination（ 'drawPage'、hashPageNum）;、次のように：

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

編集ページにページをリンクしているページにリンクを配置する場合、たとえば、ホームページのメニューにアンカーがあり、ページのページの一部に移動する場合があります---リンクにtarget = "_ blank"を入力し、hrefにwww.yourdomain.com/yourpaginatedpageを入力すると、すべて問題ありません。ページ分割されたページが新しいタブまたは新しいウィンドウとして開くので、ブラウザの戻る矢印を使用してホームページに戻ろうとしないため、問題ありません。

しかし... target = "_ blank"を省略し、同じウィンドウでページ分割されたページを開くと、戻るボタンが機能しないことがわかります。戻る矢印を押すと履歴が表示されます（実際にはtwo yourpaginatedpageのリストがあるため間違っています）が、矢印をクリックしても機能しません。

解決策は、単にwww.yourdomain.com/yourpaginatedpage#page-1をhrefとして＃page-1で挿入することです。その後、戻る矢印が機能します。

3
Mike O'Connor

最初に追加：

<script type="text/javascript" src="mio_path_js/jquery.js"></script>
<script type="text/javascript" src="mio_path_js/jquery.simplePagination.js"></script>

<link type="text/css" rel="stylesheet" href="mio_path_css/simplePagination.css"/>

その後、10個の要素に対してAjax関数を次のように呼び出します：

$(function() {
  $(#id_paginator").pagination({
    items: 100,
    itemsOnPage: 10,
    cssStyle: 'light-theme'
  });
});

または、すべての要素をロードする場合：

$ .ajax（{...... ...... success：function（response、status、xhr）{jQuery（function（$）{var pageParts = $（ "。paginate"）; var numPages = countSelect ; var perPage = 10; pageParts.slice（perPage）.hide（）;

        $("#page-nav").pagination({
        items: numPages,
        itemsOnPage: perPage,
        cssStyle: "light-theme",
        currentPage: numeroSelezionato,
            onPageClick: function(pageNum) {
                $("#myModalWaiting").show();
                var start = perPage * (pageNum - 1);
                var end = start + perPage;
                cambiaPagina(start,end,pageNum);
                numeroSelezionato = pageNum;
            }
        });
    });
}

）};

Htmlコードは次のとおりです。

<table>
    <tr>
        <th>
            <td>
                ............
                ...............
                .................
            </td>
        </th>
     </tr></table>
<div id="id_paginator"></div>

enter image description here

他のJquery simplePaginationの例については、 here を参照してください。

または、より多くの要素をロードするには： https://lentux-informatica.com/paginazione-liste-con-jquery-parte-2-2-simplepagination-js/

0
Rosario Mezzatesta

次のコードは私のために働く：

function paginationTable() {

    var items = $("table tbody tr");
    var tablaeBody = $("table tbody");
        var numItems = items.length;
        var perPage = 20;

        // Only show the first 20 (or first `per_page`) items initially.
        tablaeBody.html(items.slice(0,20));
        // 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;

                tablaeBody.html(items.slice(showFrom,showTo));

            }
        });
}

hTMLテーブルを準備した後にこの関数を呼び出します。

0
Sandip Solanki

Bilal AkilのjQuery（function（$））をテストしましたが、修正したいミスを1つ見つけました。このトピックに関与してくれたBilalに感謝します。

コメントを投稿したり、彼の投稿の編集を提案したりすることはできないため、回答をここに直接投稿します。詳細については、Bilal Akilの投稿をご覧ください。

ページネーションのセレクターは、ウェブサイトで試したときにコード内で間違っていました（実際には同じではありませんでした）。

// 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's 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();



});
0
Devour

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's 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();

}

0
Muhammad Khalid