Add in and populate pagination template.

The buttons don’t actually do anything yet, but it outputs accurately
and inherits core styles.
This commit is contained in:
George Stephanis 2015-08-07 16:36:50 -04:00
parent f541093dce
commit ba1d2d7bde
2 changed files with 42 additions and 0 deletions

View File

@ -7,6 +7,7 @@
$(function() {
var rowTemplate = wp.template( 'wc-tax-table-row' ),
paginationTemplate = wp.template( 'wc-tax-table-pagination' ),
$tbody = $('#rates');
/**
@ -52,6 +53,11 @@
renderTableContents( data.rates.slice( first_index, last_index ) );
// We've now displayed our initial page, time to render the pagination box.
$('#rates-pagination' ).html( paginationTemplate( {
qty_rates : data.rates.length,
current_page : data.page,
qty_pages : Math.ceil( data.rates.length / data.limit )
} ) );
}
$('.wc_tax_rates .remove_tax_rates').click(function() {

View File

@ -166,3 +166,39 @@ wp_enqueue_script( 'wc-settings-tax' );
</td>
</tr>
</script>
<script type="text/html" id="tmpl-wc-tax-table-pagination">
<div class="tablenav">
<div class="tablenav-pages">
<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">
<a class="tablenav-pages-navspan">
<span class="screen-reader-text"><?php esc_html_e( 'First page', 'woocommerce' ); ?></span>
<span aria-hidden="true">&laquo;</span>
</a>
<a class="tablenav-pages-navspan">
<span class="screen-reader-text"><?php esc_html_e( 'Previous page', 'woocommerce' ); ?></span>
<span aria-hidden="true">&lsaquo;</span>
</a>
<span class="paging-input">
<label for="current-page-selector" class="screen-reader-text"><?php esc_html_e( 'Current Page', 'woocommerce' ); ?></label>
<?php printf( esc_html_x( '%1$s of %2$s', 'Pagination, like `1 of 3`', 'woocommerce' ),
'<input class="current-page" id="current-page-selector" type="text" name="paged" value="{{ data.current_page }}" size="<# print( data.qty_pages.toString().length ) #>" aria-describedby="table-paging">',
'<span class="total-pages">{{ data.qty_pages }}</span>' ); ?>
</span>
<a class="tablenav-pages-navspan">
<span class="screen-reader-text"><?php esc_html_e( 'Next page', 'woocommerce' ); ?></span>
<span aria-hidden="true">&rsaquo;</span>
</a>
<a class="tablenav-pages-navspan">
<span class="screen-reader-text"><?php esc_html_e( 'Last page', 'woocommerce' ); ?></span>
<span aria-hidden="true">&raquo;</span>
</a>
</span>
</div>
</div>
</script>