このjqueryページ分割プラグインを正しく動作させる方法

私はこれを実現させようとしていますjQuery pagination plugin。何らかの理由で、それはしません、なぜ私は本当によく分かりません。このjqueryページ分割プラグインを正しく動作させる方法

<!doctype html> 
<html> 
<head> 
    <link rel="stylesheet" href="css/simplePagination.css" type="text/css" /> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.simplePagination.js"></script> 
</head> 
<body> 

    <div id="selector"> 
     <ul class="selector"> 
     <li> 
      <p>One</p> 
     </li> 
     <li> 
      <p>Two</p> 
     </li> 
     <li> 
      <p>Three</p> 
     </li> 
     <li> 
      <p>Four</p> 
     </li> 
     <li> 
      <p>Five</p> 
     </li> 
     <li> 
      <p>Six</p> 
     </li> 
     <li> 
      <p>Seven</p> 
     </li> 
     <li> 
      <p>Eight</p> 
     </li> 
    </ul> 
    </div> 


    <script language="javascript"> 
    $(function() { 
     $(selector).pagination({ 
      items: 8, 
      itemsOnPage: 1, 
      cssStyle: 'light-theme' 
     }); 
    }); 
    </script> 

</body> 
</html>

ページのボタンは表示されますが、コンテンツは消えています。私は間違って何をしていますか？ http://jsbin.com/obacig/1/edit

出典

2013-02-21 John Smith

デモを提供する：[jsbin.com]（http://jsbin.com） –

@Web_Designer http://jsbin.com/obacig/1/edit –

を必要と私は正確に持っていた：ここ

はデモです同じ問題。ドキュメントを見ると、ツールは文字通りページ区切りツールをレンダリングするためのものであり、データを自分でバインドする方法を管理する必要があります。

あなたは、セレクタのdivの内側に何を必要としないすべての最初の - ページネーションコントロールが表示される場所つまり：

ので、空のことを残して、あなたのコンテンツが段落または何でその上に座ってい：

<p class="selection" id="page-1">one</p> 
<p class="selection" id="page-2">Two</p> 
<p class="selection" id="page-3">Three</p> 
<p class="selection" id="page-4">Four</p> 
<p class="selection" id="page-5">Five</p> 
<p class="selection" id="page-6">Six</p> 
<p class="selection" id="page-7">Seven</p> 
<p class="selection" id="page-8">Eight</p> 


<div id="selector"> 
</div>

：あなたは、動的データを使用している場合

あなたは、このスクリプトを必要とする身体が終了する直前に、タグの下に

その後、その場でIDを生成する必要があると思います

<script language="javascript"> 
    $(function() { 
     $('#selector').pagination({ 
      items: 10, 
      itemsOnPage: 2, 
      cssStyle: 'compact-theme', 
      onPageClick: function(pageNumber){test(pageNumber)} 
     }); 
    }); 
</script>

通知私は関数にページ番号を渡すonPageClick関数（名前を変更する必要があります）を追加しました。私は私のヘッダ部でこれを持っている

：

<style type="text/css"> 
    .selection { 
     display: none; 
    } 
</style> 


<script> 

function test(pageNumber) 
{ 

    var page="#page-"+pageNumber; 
    $('.selection').hide() 
    $(page).show() 

} 

</script> 


</head>

CSSもともとクラスによってそれらすべてを隠し、その関数は、現在開いているものをすべて閉じて、あなたがidで欲しいものを開きます。

私のために今大丈夫動作するようですが、それはとてもイライラさせられた:)

ここで全体のスクリプトです：

<!doctype html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="pager.js"></script> 
<link href="style.css" rel="stylesheet" type="text/css" /> 

<style type="text/css"> 
    .selection { 
     display: none; 
    } 
</style> 


<script> 

function test(pageNumber) 
{ 

    var page="#page-"+pageNumber; 
    $('.selection').hide() 
    $(page).show() 

} 

</script> 


</head> 
<body> 

<p class="selection" id="page-1">one</p> 
<p class="selection" id="page-2">Two</p> 
<p class="selection" id="page-3">Three</p> 
<p class="selection" id="page-4">Four</p> 
<p class="selection" id="page-5">Five</p> 
<p class="selection" id="page-6">Six</p> 
<p class="selection" id="page-7">Seven</p> 
<p class="selection" id="page-8">Eight</p> 


<div id="selector"> 
</div> 


    <script language="javascript"> 
    $(function() { 
     $('#selector').pagination({ 
      items: 10, 
      itemsOnPage: 2, 
      cssStyle: 'compact-theme', 
      onPageClick: function(pageNumber){test(pageNumber)} 
     }); 
    }); 
    </script> 

</body> 
</html>

出典

2013-03-14 17:37:18

$（セレクタ）jqueryの中でIDを選択するために$（ "＃セレクター"）

する必要がありますuはハッシュタグ

出典

2013-02-21 05:50:23

試してみましたが、まだ動作しません。 –

私が必要なプロジェクトのために私自身のjQueryモバイルページネーションプラグインを構築し、共有単純なページ区切りリスト。基本的に、プラグインはリストの最後に「詳細を表示」ボタンを追加し、Ajax呼び出しで返される「ページごとの」項目を設定することができます。もちろん、サーバー側でオフセットとリミットをフックする必要がありますが、全体的にはかなり単純で便利です。それを試してみてくださいhttp://listomatic.stakbit.com/

出典

2013-03-19 03:12:19 Staker

D.Macは本当に素晴らしい答えですが、実装すると、自動的に最初のページが表示されず、別のページがクリックされた後で初めて表示されます。

ので、私は改ページが

function pageOne() { 
    var page_1 = "#page-1"; 
    $('.selection').hide() 
    $(page_1).show() 
} 



<script language="javascript"> 
    $(function() { 
     $('#selector').pagination({ 
      items: 10, 
      itemsOnPage: 2, 
      cssStyle: 'compact-theme', 
      currentPage: 1, 
      onPageClick: function(pageNumber){test(pageNumber)}, 
      onInit: function(){pageOne()}, 

     }); 
    }); 
    </script>

出典

2014-07-22 21:38:25 tallgirltaadaa

三年には、この質問が投稿されてから経過している最初のページに開始を確認するために、この小さな機能を追加しました。この2014 stackoverflow pageについて、より良い回答が見つかるかもしれません。特に、Bilal Akilの答えと、彼のすぐ下にある自分の貢献を見てください。

私も全くsimplepagination.jsとビル（ビラル）を使用する方法で混乱していたが私に道を示しました。彼のweb articleあなたのためのトリックを行う必要がありますが、私はまだ2014のstackoverflowの記事に入れている単純なバージョンは、私がまだ使用しているものであり、それはまだ動作します。

もしあなたがそのバージョン、あるいはBillの現在の改訂版も使用しているのであれば、target = "_ blank"がない限り、自分のウェブサイトに自分のページに置いたリンクURLに#page-実装されているにもかかわらず、それを放置してもユーザーはページに戻ることになります（バックナビゲーションボタンの作業を支援する必要があります）。これは2014年の記事の私の答えで説明されています。ユーモラス側

、私はちょうど現在のサイトのリビジョンの間にrencounteredバックナビゲーションボタン問題への解決のために今見ながら、私たちが今にしているページを見つけました。自分の2014年の答えに答えが見つかりました！私はその細部を忘れていた。

出典

2016-11-08 08:39:20

このjqueryページ分割プラグインを正しく動作させる方法

答えて

関連する問題