Bootstrap Table

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>
<div class="alert alert-success" id="eventsResult">
    Here is the result of event.
</div>

<div>
    <input id="globalSearch" type="text" placeholder="Search">
    <button id="globalSearchSubmit" type="button" class="btn btn-default">Search</button>
</div>
    
<table id="eventsTableA"
       data-toggle="table"
       data-height="300"
       data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
       data-pagination="true"
       data-search="true"
       data-search-placeholder="Prueba"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-toolbar="#toolbar">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <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="eventsTableB"
       data-toggle="table"
       data-height="300"
       data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=desc&per_page=100&page=1"
       data-pagination="true"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-toolbar="#toolbar">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <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>

JavaScript

$(function () {
    var $result = $('#eventsResult');
 
    var $globalSearch = $("#globalSearch");
    var $globalSearchSubmit = $("#globalSearchSubmit");
    var $tableA = $('#eventsTableA');
    var $tableB = $('#eventsTableB');
    
    // NOTE - you would prob want to use inline-form instead and capture submit, or similar, so 'enter' on input field triggers this also - or if just client-side, then 'change' might suffice
    $globalSearchSubmit.on('click',function(e){
        
        // NOTE - so found that changing searchText did nothing, likely due to line #1037 of bootstrap-table.js
        /*
        $tableA.data('searchText',$globalSearch.val());
        $tableA.attr('data-search-text',$globalSearch.val());
        
        console.log('-- about to search tableA: ', $globalSearch.val(), $tableA.data('searchText'));
        
        $tableA.bootstrapTable('refresh');
        console.log('-- searched tableA: ', $globalSearch.val(), $tableA.data('searchText'));
        
        
        $tableB.data('searchText',$globalSearch.val());
        $tableB.bootstrapTable('refresh');
        */
        
        
    });

    $tableA.on('all.bs.table', function (e, name, args) {
        console.log('#eventsTableA Event:', name, ', data:', args, ', this', $(this));
    })
    .on('click-row.bs.table', function (e, row, $element) {
        $result.text('#eventsTableA Event: click-row.bs.table');
    })
    .on('dbl-click-row.bs.table', function (e, row, $element) {
        $result.text('#eventsTableA Event: dbl-click-row.bs.table');
    })
    .on('sort.bs.table', function (e, name, order) {
        $result.text('#eventsTableA Event: sort.bs.table');
    })
    .on('check.bs.table', function (e, row) {
        $result.text('#eventsTableA Event: check.bs.table');
    })
    .on('uncheck.bs.table', function (e, row) {
        $result.text('#eventsTableA Event: uncheck.bs.table');
    })
    .on('check-all.bs.table', function (e) {
        $result.text('#eventsTableA...