<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/jquery.dataTables.js" type="text/javascript" language="javascript"></script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-hover table-condensed" id="results-table">
<thead>
<th >Column1<span style="margin-left: 5px;" class="glyphicon glyphicon-dynamic"></span></th>
<th >Column2<span style="margin-left: 5px;" class="glyphicon glyphicon-dynamic"></span></th>
<th >Column3<span style="margin-left: 5px;" class="glyphicon glyphicon-dynamic"></span></th>
</thead>
<tbody>
<tr><td>1</td><td>Something</td><td>Something else...</td></tr>
<tr><td>2</td><td>Something</td><td>Something else...</td></tr>
<tr><td>3</td><td>Something</td><td>Something else...</td></tr>
<tr><td>4</td><td>Something</td><td>Something else...</td></tr>
</tbody>
</table>
</div>
</div>
<!--
<script>
$(document).ready(function() {
$('#results-table').dataTable(
{ "bFilter": true,
"sDom": "<'panel-heading'<'row'<'col-xs-6'l><'col-xs-6'f>>r>t<'panel-footer'<'row'<'col-xs-6'i><'col-xs-6'p>>>",
//"oLanguage": {
// "sLengthMenu": "_MENU_ records per page"
//},
"bPaginate": true,
"bStateSave": true,
//"bServerSide": true,
//"sProcessing": "<div id=#results-table_spinner></div>",
"sPaginationType": "full_numbers",
//"iDisplayLength": 20,
"aoColumns": [{"bSortable": false},{"bSortable": false}],
"sPaginationType": "bootstrap"
//"fnInitComplete": function() {
// $('#results-table_length select').addClass('form-control input-sm');
// $('#results-table_filter input').addClass('form-control input-sm');
// }
});
});
</script>
-->
div.dataTables_wrapper div.panel-heading {
padding: 2px 2px;
}
div.dataTables_wrapper div.panel-footer {
padding: 2px 2px;
}
div.dataTables_length label {
float: left;
text-align: left;
margin-bottom: 0;
}
div.dataTables_filter label {
float: right;
margin-bottom: 0;
}
div.dataTables_info {
width: auto;
padding-top: 8px;
}
div.dataTables_paginate {
float: right;
margin: 0;
}
table {
margin: 1em 0;
clear: both;
}
div.dataTables_paginate ul {
margin: 0;
}
.dataTables_processing {
position: absolute;
top: 55%;
left: 50%;
width: 250px;
height: 50px;
margin-left: -125px;
margin-top: -15px;
padding: 15px;
border: 1px solid transparent;
border-radius: 4px 4px 4px 4px;
text-align: center;
font-size: 14px;
background-color: rgb(217, 237, 247);
border-color: rgb(188, 232, 241);
color: rgb(49, 112, 143);
}
div.dataTables_wrapper th.header {
cursor: pointer;
*cursor: hand;
}
div.dataTables_wrapper th.header span.glyphicon-dynamic:before{
content: "\e150";
}
div.dataTables_wrapper th.header:hover span.glyphicon-dynamic:before{
content: "\e155";
}
div.dataTables_wrapper th.headerSortDown span.glyphicon-dynamic:before{
content: "\e155";
}
div.dataTables_wrapper th.headerSortDown:hover span.glyphicon-dynamic:before{
content: "\e156";
}
div.dataTables_wrapper th.headerSortUp span.glyphicon-dynamic:before{
content: "\e156";
}
div.dataTables_wrapper th.headerSortUp:hover span.glyphicon-dynamic:before{
content: "\e155";
}
/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
}
/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function ( e ) {
e.preventDefault();
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
fnDraw( oSettings );
}
};
//$(nPaging).removeClass('dataTables_paginate paging_bootstrap').addClass('pull-right').append(
$(nPaging).addClass('pull-right').append(
'<ul class="pagination pagination-sm">'+
'<li class="prev disabled"><a href="#"><span class="glyphicon glyphicon-arrow-left"></span></a></li>'+
'<li class="next disabled"><a href="#"><span class="glyphicon glyphicon-arrow-right"></span></a></li>'+
'</ul>'
);
var els = $('a', nPaging);
$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
},
"fnUpdate": function ( oSettings, fnDraw ) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
if ( oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if ( oPaging.iPage <= iHalf ) {
iStart = 1;
iEnd = iListLength;
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}
for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
// Remove the middle elements
$('li:gt(0)', an[i]).filter(':not(:last)').remove();
// Add the new list items and their event handlers
for ( j=iStart ; j<=iEnd ; j++ ) {
sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
$('<li '+sClass+'><a href="#">'+j+'</a></li>')
.insertBefore( $('li:last', an[i])[0] )
.bind('click', function (e) {
e.preventDefault();
oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
fnDraw( oSettings );
} );
}
// Add / remove disabled classes from the static elements
if ( oPaging.iPage === 0 ) {
$('li:first', an[i]).addClass('disabled');
} else {
$('li:first', an[i]).removeClass('disabled');
}
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
$('li:last', an[i]).addClass('disabled');
} else {
$('li:last', an[i]).removeClass('disabled');
}
}
}
}
} );
//$.extend( $.fn.dataTableExt.oStdClasses, {
// "sWrapper": "dataTables_wrapper form-inline panel panel-default",
// "sSortAsc": "header headerSortDown",
// "sSortDesc": "header headerSortUp",
// "sSortable": "header headerSortable",
//} );
