Navigation Bar

A client side navigation bar that displays tabular data.

by jjperezaguinaga

HTML

<script src="https://gist.github.com/jjperezaguinaga/5126932/raw/b9962891eaaead272520df5b835bfd889e43fe4c/population.js"></script>
<table id="populationTable" class="table">
    <thead>
        <tr>
            <th>Year</th>
            <th>Age</th>
            <th>Sex</th>
            <th>People</th>
        </tr>
    </thead>
    <tbody>
        <tr class="trTemplate">
            <td data-key="year">YEAR</td>
            <td data-key="age">AGE</td>
            <td data-key="sex">SEX</td>
            <td data-key="people">PEOPLE</td>
        </tr>
    </tbody>
</table>
<div id='paginationList' class="pagination">
    <ul class='ulContainer'>
        <li data-command='prev'><a href="#">&laquo;</a>
        </li>
        <li><a href="#">PAGE VAL</a>
        </li>
        <li><a href="#">PAGE VAL</a>
        </li>
        <li><a href="#">PAGE VAL</a>
        </li>
        <li><a href="#">PAGE VAL</a>
        </li>
        <li><a href="#">PAGE VAL</a>
        </li>
        <li><a href="#">PAGE VAL</a>
        </li>
        <li><a href="#">PAGE VAL</a>
        </li>
        <li data-command='next'><a href="#">&raquo;</a>
        </li>
    </ul>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

// The var "population" contains the entry for 570 objects in the form
// of {"year": "String", "age": "String ", "sex": "String", "people": "String" }
// Example: {"year": "1850", "age": "0", "sex": "1", "people": "1483789" }
// From Minnesota Population Center - Gist raw added as a resource 
// https://gist.github.com/jjperezaguinaga/5126932/raw/b9962891eaaead272520df5b835bfd889e43fe4c/population.js

function ajaxSingleton() {
    var self = {};
    var httpRequest = new XMLHttpRequest();
    self.callback = null;

    self.loadResponse = function () {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200 && self.callback) {
                self.callback(httpRequest.responseText);
            } else {
                console.error('There was a problem with the request.', httpRequest);
            }
        }
    }
    self.get = function (url, data, callback) {
        self.callback = callback;
        httpRequest.open('POST', url, true);
        httpRequest.setRequestHeader('Content-Type',
            'application/x-www-form-urlencoded; charset=UTF-8');
        httpRequest.onreadystatechange = self.loadResponse;
        httpRequest.send("json=" + JSON.stringify(data));
    }
    return self;
}

function NavBarContent(activePage) {
    var self = this;
    var ulContainer = ".ulContainer";
    var paginationId = 'paginationList';

    self.pages = [];
    self.oldActivePage = null;
    self.activePage = activePage;

    var removeActive = function (index) {
        self.pages[index].classList.remove('active');
    }

    var paintActive = function (index) {
        self.pages[index].classList.add('active');
    }


    var updateCellsValue = function (updateValue) {
        var page;
        for (var i = 1, len = self.pages.length; i < len; i++) {
            page = self.pages[i].querySelector('a');
            page.innerHTML = +page.innerHTML + updateValue;
            removeActive(i);
            if (+page.innerHTML ===...