Bootstrap Table - multiple tables, capture page-change

Boostrap Table - multiple tables, capture page-change for all and distinct actions to take based on particular table. Created to answer https://github.com/wenzhixin/bootstrap-table/issues/2248

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="mainTable"
       data-toggle="table"
       data-url="https://api.github.com/users/wenzhixin/repos"
       data-query-params="queryParams"
       data-pagination="true"
       data-search="true"
       data-height="300">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

<table id="secondTable"
       data-toggle="table"
       data-url="https://api.github.com/users/wenzhixin/repos"
       data-query-params="queryParams"
       data-pagination="true"
       data-search="false"
       data-page-size="20"
       data-classes="table-no-bordered"
       data-height="500">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
    </tr>
    </thead>
</table>

JavaScript

// Boostrap Table - multiple tables, capture page-change for all and distinct actions to take based on particular table. Created to answer https://github.com/wenzhixin/bootstrap-table/issues/2248

function queryParams() {
    return {
        type: 'owner',
        sort: 'updated',
        direction: 'desc',
        per_page: 100,
        page: 1
    };
}

$('table').on('page-change.bs.table',function(e,number, size){
	console.log('page-change.bs.table', {'number':number,'size':size,'e':e,'this':this});
  console.log('options',$(this).bootstrapTable('getOptions'));
});

/*
document.addEventListener('click', function(event) {
    var tableId = 'a-table-id';
    var target = event.target;
    if (target.parentNode.classList.contains('page-number')){
        console.log('changed page');
        // Get table id from 
        console.log({ 'tableId':tableId, 'target':target, 'contains': $.contains($('#' + tableId).parent(), target)}); // return false instead of true
        var stage1 = target.parentNode.parentNode.parentNode;
        console.log({'stage1':stage1}); // return <div class="pull-right pagination">
        var stage2 = stage1.parentNode.parentNode; // cast error because stage1.parentNode is null
        console.log({'stage2':stage2}); // code blocked from previous line so nothing
        var stage3 = stage2.getElementById(tabeId);
        console.log({'stage3':stage3}) // should not be seen because of expected stage2
    }
});
*/