1. ホーム
  2. 質問と答え
  3. JQueryの項目数による項目のページ設定

JQueryの項目数による項目のページ設定

2016-06-27 12 views
0

JQueryを使用してページを設定するid "display"を持つHTML表があります。 HTMLテーブルのコードは次のとおりです。JQueryの項目数による項目のページ設定

<table id="display"> 
    <tr> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
    </tr> 
    <tr> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
    </tr> 
    <tr> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
    </tr> 
    <tr> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
     <td class="cols"> 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
     </td> 
    </tr> 
</table>

タグには、Jquery LibrayとDataTable APIが含まれています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">  </script> 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

これは私がheadタグ内のページあたりの項目を示すために書かれているjQueryのスクリプトです

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#display').DataTable({ 
      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], 
      "iDisplayLength": 5 
     }); 
    }); 
</script>

私はこのコードを実行すると、表がページ付けしないでも、それはへの選択ボックスを表示しませんアイテムの数を変更します。

どこが間違っているのかわかりません。

は、おそらくあなたは、最新のDataTableの実装でレガシーのオプションを使用しているあなたの助け

出典

2016-06-27 Bharath

+0

あなたは 'datatables.css'ファイルが含まれていますか？コンソールエラーを確認してください。 –

+0

Nope。しかし、それはまだそれなしで動作します。 TheadとTfootを追加しました。 – Bharath

答えて

0

あなたは初期化が失敗しそうにもtheadtfootとtbodyを使用する必要があります。 theadとtfootがtbodyと同じ数の列を必要とすることに注意してください。

はJQuery：

$(document).ready(function(){ 
    $('#display').DataTable(); 
});

HTML：

<table id="display"> 
    <thead> 
     <tr> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
     </tr> 
     <tr> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
     </tr> 
     <tr> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
     </tr> 
     <tr> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
      <td class="cols"> 
       <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
      </td> 
     </tr> 
    </tbody> 
</table>

出典

2016-06-27 11:37:55 AJenkins

0

いただきありがとうございます。

iDisplayLengthはここに文書化されている：http://legacy.datatables.net/usage/options。これは「遺産」であることに注意してください。

使用しているコードが新しいバージョンであるので、私はこれらを見てお勧め：

https://datatables.net/reference/option/pageLength https://datatables.net/reference/option/paging

ちょうどpageLengthでiDisplayLengthを交換するのに十分かもしれません。

出典

2016-06-27 11:33:30

0 

$(document).ready(function() { 
 
    $('#example').DataTable(); 
 
});
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 

 
<table id="example" class="display" cellspacing="0" width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Position</th> 
 
       <th>Salary</th> 
 
      </tr> 
 
     </thead> 
 
     <tfoot> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Position</th> 
 
       <th>Salary</th> 
 
      </tr> 
 
     </tfoot> 
 
     <tbody> 
 
      <tr> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
     <td class="cols"> 
 
      <img class="imagedisplay" src="the_deep_sea_a16eb25rs_right_1_1.jpg" /><br>Deep Sea Horse Charm Necklace 
 
     </td> 
 
    </tr> 
 
     </tbody> 
 
    </table>

出典

2016-06-27 11:37:09 DiniZx

関連する問題

 関連する問題