"dataTables with bootstrap"
Bootstrap 3.1.0 Snippet by myszmen

<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", //} );

Related: See More


Questions / Comments: