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

<section class="page-hero page-hero-compact">
    <div class="page-hero-copy">
        <span class="eyebrow">Leaderboard</span>
        <h3><span data-tkey="top10miners">Top 10 miners</span></h3>
        <p class="hero-copy-text">
            A clean leaderboard for the biggest contributors by hashrate, recent share activity, and submitted work.
        </p>
    </div>
    <div class="page-hero-panel">
        <div class="hero-kpi">
            <span>Ranking</span>
            <strong>Top 10</strong>
        </div>
        <div class="hero-kpi">
            <span>Signal</span>
            <strong>Live shares</strong>
        </div>
    </div>
</section>

<section class="section-block">
    <div class="section-head">
        <div>
            <span class="eyebrow">Miners</span>
            <h4>Pool leaderboard</h4>
        </div>
    </div>
    <ul class="nav nav-tabs" id="blocksTabs">
    </ul>

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

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

<script id="siblingTemplate" type="text/x-handlebars-template">
    <div role="tabpanel" class="tab-pane {{active}}" id="{{coin}}">
        <div class="card">
            <div id="top10miners" class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th class="col1 sort">#</th>
                        <th class="col2 sort"><span data-tkey="miner">Miner</span></th>
                        <th class="col3 sort"><span data-tkey="hashRate">Hash Rate</span></th>
                        <th class="col4 sort"><span data-tkey="lastShare">Last Share Submitted</span></th>
                        <th class="col5 sort"><span data-tkey="totalHashes">Total Hashes Submitted</span></th>
                    </tr>
                    </thead>
                    <tbody id="top10miners_rows{{coin}}">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</script>

<!-- Javascript -->
<script>
let ranOnce = false
let xhrGetMiners = {}
// Update current page
currentPage = {
    destroy: function(){
        if (xhrGetMiners) {
            Object.keys(xhrGetMiners).forEach(key => {
                if (xhrGetMiners[key])
                    xhrGetMiners[key].abort();
            })
        }
        $('#blocksTabs a').off('click')
    },
    update: function(updateKey){
        top10Miners_UpdateTop10(xhrGetMiners, api, updateKey)
    }
};

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


top10Miners_InitTemplate(xhrGetMiners, ranOnce)

</script>