Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/docs/css/bootstrap.min.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://www.google.com/jsapi"></script>
<script src="https://mottie.github.io/tablesorter/docs/js/bootstrap.min.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-chart.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-pager.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-columnSelector.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-cssStickyHeaders.js"></script>
<div id="chart-container">
    <div id="chart"></div>
    <p></p>
    <div id="chartbar">	<i class="fa fa-cube active clickable toolti" title="3D Pie Chart" data-toggle="tooltip" data-placement="top"></i>
	<i class="fa fa-pie-chart clickable" title="Pie Chart" data-toggle="tooltip" data-placement="top"></i>
	<i class="fa fa-line-chart clickable" title="Line Graph" data-toggle="tooltip" data-placement="top"></i>
	<i class="fa fa-area-chart clickable" title="Area Graph" data-toggle="tooltip" data-placement="top"></i>
	<i class="fa fa-bar-chart clickable" title="Vertical Bar Chart" data-toggle="tooltip" data-placement="top"></i>
	<i class="fa fa-tasks fa-rotate-90 clickable" title="Stacking Vertical Bar Chart" data-toggle="tooltip" data-placement="top"></i>
	<i class="fa fa-align-left clickable" title="Horizontal Bar Chart" data-toggle="tooltip" data-placement="top"></i>
	<i class="fa fa-tasks fa-rotate-180 clickable" title="Stacking Horizontal Bar Chart" data-toggle="tooltip"...

CSS

#pager div {
    display: inline-block;
}
#pager-container .spacer {
    padding: 0 5px;
}
#pager-container, #chart-container {
    text-align: center;
}
#chart-container > div {
    display: inline-block;
}
#chartbar {
    text-align: center;
}
#chartbar i.clickable {
    padding: 0 5px;
}
i.clickable {
    cursor: pointer;
    color: #999;
}
i.clickable.disabled, i.clickable.disabled:hover {
    cursor: not-allowed;
    color: #ccc;
}
i.active.clickable, i.clickable:hover {
    color: #000;
}
/*** custom css only popup ***/
 .columnSelector, .hidden, #chart-container {
    display: none;
}
#colSelect:checked + label {
    background: #5797d7;
    border-color: #555;
}
#colSelect:checked ~ #columnSelector {
    display: block;
}
#chartSelect:checked + label {
    background: #5797d7;
    border-color: #555;
}
.columnSelector {
    width: 120px;
    position: absolute;
    margin-top: 5px;
    padding: 10px;
    background: #fff;
    border: #ccc 1px solid;
    border-radius: 5px;
}
.columnSelector label {
    display: block;
    text-align: left;
}
.columnSelector label:nth-child(1) {
    border-bottom: #99bfe6 solid 1px;
    margin-bottom: 5px;
}
.columnSelector input {
    margin-right: 5px;
}
.columnSelector .disabled {
    color: #ddd;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
google.load("visualization", "1.1", {
    packages: ["bar", "corechart", "line"]
});

$(function () {
    /* Initial settings */
    var $table = $('#table'),
        $chart = $('#chart'),
        $bar = $('#chartbar'),
        $rowType = $('[name=getrows]'),
        $icons = $('#chart-container i'),
        initType = 'pie', // graph types ('pie', 'pie3D', 'line', 'area', 'vbar', 'vstack', 'hbar' or 'hstack')
        chartTitle = 'Company Performance',
        axisTitle = 'Year',
        width = 900,
        height = 500,
        // extra data processing
        processor = function (data) {
            // console.log(data);
            return data;
        },

        // don't change anything below, unless you want to remove some types; modify styles and/or font-awesome icons
        types = {
            pie3D: {
                in3D: true,
                maxCol: 2,
                stack: false,
                type: 'pie',
                titleStyle: {
                    color: '#333'
                },
                icon: 'fa-cube'
            },
            pie: {
                in3D: false,
                maxCol: 2,
                stack: false,
                type: 'pie',
                titleStyle: {
                    color: '#333'
                },
                icon: 'fa-pie-chart'
            },
            line: {
                in3D: false,
                maxCol: 99,
                stack: false,
                type: 'line',
                titleStyle: {
                    color: '#333'
                },
                icon: 'fa-line-chart'
            },
            area: {
                in3D: false,
                maxCol: 5,
                stack: false,
                type: 'area',
                titleStyle: {
                    color: '#333'
                },
                icon: 'fa-area-chart'
            },
   ...