"dataTables with bootstrap"
Bootstrap 3.1.0 Snippet by myszmen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>",
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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 );
},
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: