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>