peya-nodejs-pool/website_example/pages/payments.html

<ul class="nav nav-tabs" id="blocksTabs">
</ul>

<div class="tab-content" id="tab-content">
</div>

<script id="siblingTabTemplate" type="text/x-handlebars-template">
	<li id="blockTabs{{coin}}" role="presentation" class="{{active}}"><a href="#{{coin}}">{{coin}} {{symbol}}</a></li>
</script>

<script id="siblingTemplate" type="text/x-handlebars-template">
	<div role="tabpanel" class="tab-pane {{active}}" id="{{coin}}">
      <!-- Statistics -->
      <div class="row paymentsStats">

          <!-- Total Payments -->
          <div class="col-lg-3 col-sm-6">
              <div class="infoBox hoverExpandEffect mergedBg">
                  <div class="icon">
                      <span class="fa fa-money"></span>
                  </div>
                  <div class="content">
                      <div class="text"><span data-tkey="paymentsTotal">Total Payments</span></div>
                      <div class="value"><span id="paymentsTotal{{coin}}">N/A</span> <span class="smallText">(<strong><span id="paymentsTotalPaid{{coin}}">N/A</span></strong> <span data-tkey="minersCount">miners</span>)</span></div>
                  </div>
              </div>
          </div>

          <!-- Minimum Payment Threshold -->
          <div class="col-lg-3 col-sm-6">
              <div class="infoBox hoverExpandEffect mergedBg">
                  <div class="icon">
                      <span class="fa fa-dollar"></span>
                  </div>
                  <div class="content">
                      <div class="text"><span data-tkey="paymentsMinimum">Minimum Payout</span></div>
                      <div class="value"><span id="paymentsMinimum{{coin}}">N/A</span></div>
                  </div>
              </div>
          </div>

          <!-- Payment Interval -->
          <div class="col-lg-3 col-sm-6">
              <div class="infoBox hoverExpandEffect mergedBg">
                  <div class="icon">
                      <span class="fa fa-clock-o"></span>
                  </div>
                  <div class="content">
                      <div class="text"><span data-tkey="paymentsInterval">Payment Interval</span></div>
                      <div class="value"><span id="paymentsInterval{{coin}}">N/A</span></div>
                  </div>
              </div>
          </div>

          <!-- Denomination Unit -->
          <div class="col-lg-3 col-sm-6">
              <div class="infoBox hoverExpandEffect mergedBg">
                  <div class="icon">
                      <span class="fa fa-hashtag"></span>
                  </div>
                  <div class="content">
                      <div class="text"><span data-tkey="paymentsDenomination">Denomination Unit</span></div>
                      <div class="value"><span id="paymentsDenomination{{coin}}">N/A</span></div>
                  </div>
              </div>
          </div>

      </div>

      <!-- Report -->
      <div class="card push-up-10">
          <div id="paymentsReport{{coin}}" class="table-responsive">
              <table class="table table-hover table-striped">
                  <thead>
                  <tr>
                      <th class="col1"><span data-tkey="timeSent">Time Sent</span></th>
                      <th class="col2"><span data-tkey="transactionHash">Transaction Hash</span></th>
                      <th class="col3"><span data-tkey="amount">Amount</span></th>
                      <th class="col4"><span data-tkey="fee">Fee</span></th>
                      <th class="col5"><span data-tkey="mixin">Mixin</span></th>
                      <th class="col6"><span data-tkey="payees">Payees</span></th>
                  </tr>
                  </thead>
                  <tbody id="paymentsReport{{coin}}_rows">

                  </tbody>
              </table>
          </div>
      </div>

      <p class="text-center push-up-10">
          <button type="button" class="btn btn-default" id="loadMorePayments{{coin}}"><span data-tkey="loadMore">Load More</span></button>
      </p>
  </div>
</script>

<!-- Javascript -->
<script>
	let xhrGetPayments = {}
	let ranOnce = false
	// Update current page
	currentPage = {
		destroy: function () {
			if (xhrGetPayments) {
				Object.keys(xhrGetPayments)
					.forEach(key => {
						if (xhrGetPayments[key])
							xhrGetPayments[key].abort();
						$(`#loadMorePayments${key}`)
							.off('click')
					})
			}
			$('#blocksTabs a')
				.off('click')
		},
		update: function (updateKey) {
			let stats = updateKey === parentCoin ? lastStats : mergedStats[updateKey]
			if (stats) {
				updateText(`paymentsTotal${updateKey}`, stats.pool.totalPayments.toString());
				updateText(`paymentsTotalPaid${updateKey}`, stats.pool.totalMinersPaid.toString());
				updateText(`paymentsInterval${updateKey}`, getReadableTime(stats.config.paymentsInterval));
				updateText(`paymentsMinimum${updateKey}`, getReadableCoin(stats, stats.config.minPaymentThreshold));
				updateText(`paymentsDenomination${updateKey}`, getReadableCoin(stats, stats.config.denominationUnit, 3));
				payments_renderPayments(stats.pool.payments, stats);
			}
		}
	};

	function RunOnce () {
		$('#blocksTabs a')
			.click(function (e) {
				e.preventDefault()
				$(this)
					.tab('show')
			})
		return true
	}

	payments_InitTemplate(xhrGetPayments, ranOnce)

</script>