Pagination now works by first, prev, next, last.

Still need to get number based pagination working.
This commit is contained in:
George Stephanis 2015-08-07 16:58:42 -04:00
parent ba1d2d7bde
commit 5736d66a92
2 changed files with 42 additions and 17 deletions

View File

@ -8,7 +8,8 @@
var rowTemplate = wp.template( 'wc-tax-table-row' ), var rowTemplate = wp.template( 'wc-tax-table-row' ),
paginationTemplate = wp.template( 'wc-tax-table-pagination' ), paginationTemplate = wp.template( 'wc-tax-table-pagination' ),
$tbody = $('#rates'); $tbody = $('#rates' ),
$pagination = $( '#rates-pagination' );
/** /**
* Build the table contents. * Build the table contents.
@ -42,23 +43,47 @@
} }
/** /**
* Handle the initial display. * Renders table contents by page.
*/ */
if ( data.rates.length <= data.limit ) { function renderPage( page_num ) {
renderTableContents( data.rates ); var qty_pages = Math.ceil( data.rates.length / data.limit );
} else {
var first_index = data.limit * ( data.page - 1), page_num = parseInt( page_num, 10 );
last_index = data.limit * data.page; if ( page_num < 1 ) {
page_num = 1;
} else if ( page_num > qty_pages ) {
page_num = qty_pages;
}
var first_index = data.limit * ( page_num - 1),
last_index = data.limit * page_num;
renderTableContents( data.rates.slice( first_index, last_index ) ); renderTableContents( data.rates.slice( first_index, last_index ) );
if ( data.rates.length > data.limit ) {
// We've now displayed our initial page, time to render the pagination box. // We've now displayed our initial page, time to render the pagination box.
$('#rates-pagination' ).html( paginationTemplate( { $pagination.html( paginationTemplate( {
qty_rates : data.rates.length, qty_rates : data.rates.length,
current_page : data.page, current_page : page_num,
qty_pages : Math.ceil( data.rates.length / data.limit ) qty_pages : qty_pages
} ) ); } ) );
} }
}
/**
* Handle the initial display.
*/
renderPage( data.page );
/**
* Handle clicks on the pagination links.
*
* Abstracting it out here instead of re-running it after each render.
*/
$pagination.on( 'click', 'a', function(event){
event.preventDefault();
renderPage( $( event.currentTarget ).data('goto') );
} );
$('.wc_tax_rates .remove_tax_rates').click(function() { $('.wc_tax_rates .remove_tax_rates').click(function() {
if ( $tbody.find('tr.current').length > 0 ) { if ( $tbody.find('tr.current').length > 0 ) {

View File

@ -173,11 +173,11 @@ wp_enqueue_script( 'wc-settings-tax' );
<span class="displaying-num"><?php printf( _x( '%s items', '%s will be a number eventually, but must be a string for now.', 'woocommerce' ), '{{ data.qty_rates }}' ); ?></span> <span class="displaying-num"><?php printf( _x( '%s items', '%s will be a number eventually, but must be a string for now.', 'woocommerce' ), '{{ data.qty_rates }}' ); ?></span>
<span class="pagination-links"> <span class="pagination-links">
<a class="tablenav-pages-navspan"> <a class="tablenav-pages-navspan" data-goto="1">
<span class="screen-reader-text"><?php esc_html_e( 'First page', 'woocommerce' ); ?></span> <span class="screen-reader-text"><?php esc_html_e( 'First page', 'woocommerce' ); ?></span>
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
</a> </a>
<a class="tablenav-pages-navspan"> <a class="tablenav-pages-navspan" data-goto="<# print( parseInt( data.current_page, 10 ) - 1 ) #>">
<span class="screen-reader-text"><?php esc_html_e( 'Previous page', 'woocommerce' ); ?></span> <span class="screen-reader-text"><?php esc_html_e( 'Previous page', 'woocommerce' ); ?></span>
<span aria-hidden="true">&lsaquo;</span> <span aria-hidden="true">&lsaquo;</span>
</a> </a>
@ -189,11 +189,11 @@ wp_enqueue_script( 'wc-settings-tax' );
'<span class="total-pages">{{ data.qty_pages }}</span>' ); ?> '<span class="total-pages">{{ data.qty_pages }}</span>' ); ?>
</span> </span>
<a class="tablenav-pages-navspan"> <a class="tablenav-pages-navspan" data-goto="<# print( parseInt( data.current_page, 10 ) + 1 ) #>">
<span class="screen-reader-text"><?php esc_html_e( 'Next page', 'woocommerce' ); ?></span> <span class="screen-reader-text"><?php esc_html_e( 'Next page', 'woocommerce' ); ?></span>
<span aria-hidden="true">&rsaquo;</span> <span aria-hidden="true">&rsaquo;</span>
</a> </a>
<a class="tablenav-pages-navspan"> <a class="tablenav-pages-navspan" data-goto="{{ data.qty_pages }}">
<span class="screen-reader-text"><?php esc_html_e( 'Last page', 'woocommerce' ); ?></span> <span class="screen-reader-text"><?php esc_html_e( 'Last page', 'woocommerce' ); ?></span>
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
</a> </a>