2015-09-07 3 views
0

Я пытаюсь создать таблицу таким образом, что, когда есть более 10 строк, я хочу создать гиперссылку, которая говорит пользователю перейти на следующую страницу. Эта концепция называется разбиением на страницы, но как я могу ее получить с помощью AngularJS?To Paginate Html Table

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Table</title> 
     <style type="text/css"> 
      th { 
       background-color: #ddd; 
      } 
      th td { 
       border: 1px solid black; 
      } 
     </style> 
    </head> 
    <body> 
     <table> 
      <th>Heading1</th> 
      <th>Heading2</th> 
      <tbody> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr><td>This is td</td><td>This is td</td></tr> 
       <tr></tr> 
      </tbody> 
     </table> 
    </body> 
</html> 

ответ

0

AngularUtils

Попробуйте использовать директиву PAGINATION here по AngularUtils.

Их документация очень хорошая, и у них есть полные инструкции о том, как заставить ее работать с примерами и демонстрацией в Plunker here.

<div class="panel panel-default"> 
    <div class="panel-body"> 
    <ul> 
     <li dir-paginate="meal in meals | filter:q | itemsPerPage: pageSize" current-page="currentPage">{{ meal }}</li> 
    </ul> 
    </div> 
</div>