JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#userList" onclick="userList(0)">User List</button>
<button class="btn btn-primary btn-sm" onclick="logSavedData()">Get Saved Data</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#adminList" onclick="adminList(0)">User Admin</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#extUser">Open External Form</button>

  <div class="modal fade" id="userList" role="dialog">
    <div class="modal-dialog modal-lg">
    
      
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">User List</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
              <table class="table table-bordered table-hover" id="datatable">
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>DOB</th>
                </tr>
            </table>
          </div>
          <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
            </div>

            <div class="col-sm-4">
                <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
            </div>
        </div>
            <hr/>
        <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary btn-sm"...

JavaScript

$(document).ready(function(){
    displaySavedData();
});

function displaySavedData() {
	$('.container').html('');
    $.getJSON("/def/someData/mySaved.json", function(data) {
	savedData = data;
	refreshDisplay();
    }).fail(function(error) {
            console.log("AJAX ERROR: " + error);
    });
}



var currentPageNo = 0; // Keep track of currently displayed page


// Select button that is descendant of userList
$('#userList .prev-btn').click(function(){ 
    userList(currentPageNo-10);
});
$('#userList .next-btn').click(function(){ 
    userList(currentPageNo+10);
});
$('#adminList .prev-btn').click(function(){ 
    adminList(currentPageNo-10);
});
$('#adminList .next-btn').click(function(){ 
    adminList(currentPageNo+10);
});

function userList(pageNo) {
    var resType="userList";
    createTable(resType,pageNo);
}

function adminList(pageNo) {
    var resType="adminList";
    createTable(resType,pageNo);
}

function createTable(resType, pageNo) {
    // Update global variable
    currentPageNo = pageNo; 
    // Set visibility of the correct "prev" button:
    $('#' + resType + ' .prev-btn').toggle(pageNo > 0);
    // Ask one record more than needed, to determine if there are more records after this page:
    $.getJSON("https://api.randomuser.me/?results=20&resType="+resType + "&pageIndex=" + pageNo, function(data) {
        var $table = $('#' + resType + ' table');
        ('tr:has(td)', $table).empty();
        // Check if there's an extra record which we do not display, 
        // but determines that there is a next page
        $('#' + resType + ' .next-btn').toggle(data.results.length > 10);
        // Slice results, so 11th record is not included:
        data.results.slice(0, 10).forEach(function (record, i) { // add second argument for numbering records
            var json = JSON.stringify(record);
            $table.append(
                $('<tr>').append(
                    $('<td>').append(
                       ...