Angularjs table pagination features detailed _angularjs

Next time, the main introduction of the table paging function, because the project needs this case is about the front page pagination way, now rarely used, but if necessary can refer to the idea of the

Html:

1. Through the UL to show the page mark, where each of the page Mark Li is dynamically generated from obtaining the different tabular data by asynchronous loading.

 <div class= "pagination" >
      <ul style= "Float:right" > <li id= "Previous" ><a href= "
        " > Prev </a></li>
        <li><!--for page-->
          <ul id= "Page_num_all" >
          </ul>
        </li>
        <li id= "Next" ><a href= "style=" border:1px solid #ddd; Float:right "> Next </a></li >
      </ul>
      <span>
        is currently the first <span class= "num" id= "current_page" ></span> page, total < span class= "num" id= "page_all" ></span> page
      </span>
    </div>

Js:

1. First you need to set the number of bars that each page wants to display, by selecting the page element to determine the total number of entries for this generation, and how many pages are currently in place (for jump preparation)

2. If the total number of pages is greater than the current number of pages generated, continue to build the next page until finished, add a corner mark to the page

3. Hide all of the table data, showing only 5 of the first page of the initial setting

4. Jump page function, Tab_page () to determine the start and end position of the intercept TR by the number of bars shown in the incoming index (pages), and then hide all TR, showing only TR (display: "") within that range;

5. Previous page next page and jump function, get the number of the current page, pay attention to determine whether the first or last page, as the index into the jump function can be

function Table_page () {var show_page=5;//the number of bars displayed per page var page_all=$ ("#page"). Children (). Size ();
      rrent_page=1;//Current page///Console.log (Page_all); var page_num=math.ceil (page_all/show_page);//Total number of pages Var current_num=0;//the counter var li= "" For generating the page mark "";//page header element while P Age_num>current_num) {///loop Generate page Mark element li+= ' <li class= ' page_num ' ><a href= ' Javasctip: (0) ">" + (current_num+1
        ) + ' </a></li> ';
      current_num++; $ ("#page_num_all"). HTML (LI),//Add page superscript to page $ (' #page tr '). CSS (' Display ', ' none ');/Set Hide $ (' #page tr '). Slice ( 0, Show_page). CSS (' Display ', ');//Set display $ ("#current_page"). HTML (" " +current_page+ " ");//Show current Page $ ("#pa Ge_all "). HTML ("   "+page_num+"   ");//Display total number of pages $ (" #previous "). Click (function () {//previous page Var New_page=parsein
        T ($ ("#current_page"). Text ())-1;
          if (new_page>0) {$ ("#current_page"). HTML (" " +new_page+ " ");
       Tab_page (New_page); }
      }); $ ("#next"). Click (function () {//Next page var new_page=parseint ($ ("#current_page"). Text ()) +1;//the current page mark if (new_page&lt
          =page_num) {//To determine whether the last or first page $ ("#current_page"). HTML (" " +new_page+ " ");
        Tab_page (New_page);
      }
      });
        $ (". Page_num"). Click (function () {//page Mark jump Var new_page=parseint ($ (this). text ());
      Tab_page (New_page);
      }); function Tab_page (index) {//Toggle page of page start= var (index-1) *show_page;//start intercepting page label var end=start+show_page;//intercept A
        Number $ (' #page '). Children (). CSS (' Display ', ' none '). Slice (start, end). CSS (' Display ', ');
        Current_page=index;
      $ ("#current_page"). HTML (" " +current_page+ " ");

 } table_page ();

Above is the table's front page pagination method and the number of pages, the page standard and so on method of Jump way, please combine the data test in the first chapter.