<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-2.2.4.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
<h3 class="panel-title">Panel Heading</h3>
</div>
<div class="col col-xs-6 text-right">
<button type="button" class="btn btn-sm btn-primary btn-create">Create New</button>
</div>
</div>
</div>
<div class="panel-body table-responsive">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th class="hidden-xs">ID</th>
<th>File Name</th>
<th>Artist</th>
<th>Composer</th>
<th>Publisher</th>
<th>Genre</th>
<th>Bitrate</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td align="center">
<a class="btn btn-default"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
<td class="hidden-xs">1</td>
<td>myMp3</td>
<td>amart</td>
<td>am compo</td>
<td>ampub</td>
<td>amgen</td>
<td>ambit</td>
</tr>
<tr>
<td align="center">
<a class="btn btn-default"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
<td class="hidden-xs">2</td>
<td>myMp3</td>
<td>amart</td>
<td>am compo</td>
<td>ampub</td>
<td>amgen</td>
<td>ambit</td>
</tr>
<tr>
<td align="center">
<a class="btn btn-default"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
<td class="hidden-xs">3</td>
<td>myMp3</td>
<td>amart</td>
<td>am compo</td>
<td>ampub</td>
<td>amgen</td>
<td>ambit</td>
</tr>
<tr>
<td align="center">
<a class="btn btn-default"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
<td class="hidden-xs">4</td>
<td>myMp3</td>
<td>amart</td>
<td>am compo</td>
<td>ampub</td>
<td>amgen</td>
<td>ambit</td>
</tr>
<tr>
<td align="center">
<a class="btn btn-default"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
<td class="hidden-xs">5</td>
<td>myMp3</td>
<td>amart</td>
<td>am compo</td>
<td>ampub</td>
<td>amgen</td>
<td>ambit</td>
</tr>
<tr>
<td align="center">
<a class="btn btn-default"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
<td class="hidden-xs">5</td>
<td>myMp3</td>
<td>amart</td>
<td>am compo</td>
<td>ampub</td>
<td>amgen</td>
<td>ambit</td>
</tr>
<tr>
<td align="center">
<a class="btn btn-default"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
<td class="hidden-xs">5</td>
<td>myMp3</td>
<td>amart</td>
<td>am compo</td>
<td>ampub</td>
<td>amgen</td>
<td>ambit</td>
</tr>
<tr>
<td align="center">
<a class="btn btn-default"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger"><em class="fa fa-trash"></em></a>
</td>
<td class="hidden-xs">5</td>
<td>myMp3</td>
<td>amart</td>
<td>am compo</td>
<td>ampub</td>
<td>amgen</td>
<td>ambit</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer">
<div class="row">
<div class="col col-xs-4">Page 1 of 5
</div>
<div class="col col-xs-8">
<ul class="pagination hidden-xs pull-right" id="myPager">
</ul>
<ul class="pagination visible-xs pull-right">
<li><a href="#">«</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</div>
</div>
</div></div></div>
.panel-table .panel-body{
padding:0;
}
.table-responsive {height:200px;}
.panel-table .panel-body .table-bordered{
border-style: none;
margin:0;
}
.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type {
text-align:center;
width: 100px;
}
.panel-table .panel-body .table-bordered > thead > tr > th:last-of-type,
.panel-table .panel-body .table-bordered > tbody > tr > td:last-of-type {
border-right: 0px;
}
.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type,
.panel-table .panel-body .table-bordered > tbody > tr > td:first-of-type {
border-left: 0px;
}
.panel-table .panel-body .table-bordered > tbody > tr:first-of-type > td{
border-bottom: 0px;
}
.panel-table .panel-body .table-bordered > thead > tr:first-of-type > th{
border-top: 0px;
}
.panel-table .panel-footer .pagination{
margin:0;
}
/*
used to vertically center elements, may need modification if you're not using default sizes.
*/
.panel-table .panel-footer .col{
line-height: 34px;
height: 34px;
}
.panel-table .panel-heading .col h3{
line-height: 30px;
height: 30px;
}
.panel-table .panel-body .table-bordered > tbody > tr > td{
line-height: 34px;
}
$.fn.pageMe = function(opts){
var $this = this,
defaults = {
perPage: 7,
showPrevNext: false,
hidePageNumbers: false
},
settings = $.extend(defaults, opts);
var listElement = $this;
var perPage = settings.perPage;
var children = listElement.children();
var pager = $('.pager');
if (typeof settings.childSelector!="undefined") {
children = listElement.find(settings.childSelector);
}
if (typeof settings.pagerSelector!="undefined") {
pager = $(settings.pagerSelector);
}
var numItems = children.size();
var numPages = Math.ceil(numItems/perPage);
pager.data("curr",0);
if (settings.showPrevNext){
$('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
}
var curr = 0;
while(numPages > curr && (settings.hidePageNumbers==false)){
$('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
curr++;
}
if (settings.showPrevNext){
$('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
}
pager.find('.page_link:first').addClass('active');
pager.find('.prev_link').hide();
if (numPages<=1) {
pager.find('.next_link').hide();
}
pager.children().eq(1).addClass("active");
children.hide();
children.slice(0, perPage).show();
pager.find('li .page_link').click(function(){
var clickedPage = $(this).html().valueOf()-1;
goTo(clickedPage,perPage);
return false;
});
pager.find('li .prev_link').click(function(){
previous();
return false;
});
pager.find('li .next_link').click(function(){
next();
return false;
});
function previous(){
var goToPage = parseInt(pager.data("curr")) - 1;
goTo(goToPage);
}
function next(){
goToPage = parseInt(pager.data("curr")) + 1;
goTo(goToPage);
}
function goTo(page){
var startAt = page * perPage,
endOn = startAt + perPage;
children.css('display','none').slice(startAt, endOn).show();
if (page>=1) {
pager.find('.prev_link').show();
}
else {
pager.find('.prev_link').hide();
}
if (page<(numPages-1)) {
pager.find('.next_link').show();
}
else {
pager.find('.next_link').hide();
}
pager.data("curr",page);
pager.children().removeClass("active");
pager.children().eq(page+1).addClass("active");
}
};
$(document).ready(function(){
$('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});
});
