diff --git a/integration/bootstrap/2/dataTables.bootstrap.css b/integration/bootstrap/2/dataTables.bootstrap.css index bb011f5..1744bb9 100644 --- a/integration/bootstrap/2/dataTables.bootstrap.css +++ b/integration/bootstrap/2/dataTables.bootstrap.css @@ -1,5 +1,4 @@ div.dataTables_length label { - float: left; text-align: left; } @@ -7,8 +6,17 @@ div.dataTables_length select { width: 75px; } +div.dataTables_filter { + text-align: right; +} + div.dataTables_filter label { - float: right; + text-align: left; +} + +div.dataTables_filter input { + margin-left: 0.5em; + display: inline-block; } div.dataTables_info { @@ -16,10 +24,23 @@ div.dataTables_info { } div.dataTables_paginate { - float: right; + text-align: right; margin: 0; } +div.dataTables_paginate div.pagination { + margin: 0; +} + +@media screen and (max-width: 767px) { + div.dataTables_length, + div.dataTables_filter, + div.dataTables_info, + div.dataTables_paginate { + text-align: center; + } +} + table.table { clear: both; margin-bottom: 6px !important; diff --git a/integration/bootstrap/2/dataTables.bootstrap.js b/integration/bootstrap/2/dataTables.bootstrap.js index 7c552e0..264763f 100644 --- a/integration/bootstrap/2/dataTables.bootstrap.js +++ b/integration/bootstrap/2/dataTables.bootstrap.js @@ -1,121 +1,133 @@ -/* Set the defaults for DataTables initialisation */ -$.extend( true, $.fn.dataTable.defaults, { - "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", - "sPaginationType": "bootstrap", - "oLanguage": { - "sLengthMenu": "_MENU_ records per page" - } +/*! DataTables Bootstrap 2 integration + * ©2011-2014 SpryMedia Ltd - datatables.net/license + */ + +/** + * DataTables integration for Bootstrap 2. This requires Bootstrap 2 and + * DataTables 1.10 or newer. + * + * This file sets the defaults and adds options to DataTables to style its + * controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap + * for further information. + */ +(function(window, document, $, DataTable, undefined){ + +$.extend( true, DataTable.defaults, { + "dom": + "<'row-fluid'<'span6'l><'span6'f>r>" + + "<'row-fluid'<'span12't>>" + + "<'row-fluid'<'span6'i><'span6'p>>", + renderer: 'bootstrap' } ); /* Default class modification */ -$.extend( $.fn.dataTableExt.oStdClasses, { - "sWrapper": "dataTables_wrapper form-inline" +$.extend( DataTable.ext.classes, { + sWrapper: "dataTables_wrapper form-inline dt-bootstrap" } ); -/* 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": oSettings._iDisplayLength === -1 ? - 0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ), - "iTotalPages": oSettings._iDisplayLength === -1 ? - 0 : 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).addClass('pagination').append( - '' - ); - 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, ien, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2); +/* Bootstrap paging button renderer */ +DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) { + var api = new DataTable.Api( settings ); + var classes = settings.oClasses; + var lang = settings.oLanguage.oPaginate; + var btnDisplay, btnClass; - 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; + var attach = function( container, buttons ) { + var i, ien, node, button; + var clickHandler = function ( e ) { + e.preventDefault(); + if ( !$(e.currentTarget).hasClass('disabled') ) { + api.page( e.data.action ).draw( false ); } + }; - for ( i=0, ien=an.length ; i'+j+'') - .insertBefore( $('li:last', an[i])[0] ) - .bind('click', function (e) { - e.preventDefault(); - oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength; - fnDraw( oSettings ); - } ); - } + for ( i=0, ien=buttons.length ; i 0 ? + '' : ' disabled'); + break; + + case 'previous': + btnDisplay = lang.sPrevious; + btnClass = button + (page > 0 ? + '' : ' disabled'); + break; + + case 'next': + btnDisplay = lang.sNext; + btnClass = button + (page < pages-1 ? + '' : ' disabled'); + break; + + case 'last': + btnDisplay = lang.sLast; + btnClass = button + (page < pages-1 ? + '' : ' disabled'); + break; + + default: + btnDisplay = button + 1; + btnClass = page === button ? + 'active' : ''; + break; } - if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) { - $('li:last', an[i]).addClass('disabled'); - } else { - $('li:last', an[i]).removeClass('disabled'); + if ( btnDisplay ) { + node = $('
  • ', { + 'class': classes.sPageButton+' '+btnClass, + 'aria-controls': settings.sTableId, + 'tabindex': settings.iTabIndex, + 'id': idx === 0 && typeof button === 'string' ? + settings.sTableId +'_'+ button : + null + } ) + .append( $('', { + 'href': '#' + } ) + .html( btnDisplay ) + ) + .appendTo( container ); + + settings.oApi._fnBindAction( + node, {action: button}, clickHandler + ); } } } - } -} ); + }; + + attach( + $(host).empty().html('').find('ul'), + buttons + ); +}; /* * TableTools Bootstrap compatibility * Required TableTools 2.1+ */ -if ( $.fn.DataTable.TableTools ) { +if ( DataTable.TableTools ) { // Set the classes that TableTools uses to something suitable for Bootstrap - $.extend( true, $.fn.DataTable.TableTools.classes, { + $.extend( true, DataTable.TableTools.classes, { "container": "DTTT btn-group", "buttons": { "normal": "btn", @@ -137,7 +149,7 @@ if ( $.fn.DataTable.TableTools ) { } ); // Have the collection use a bootstrap compatible dropdown - $.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, { + $.extend( true, DataTable.TableTools.DEFAULTS.oTags, { "collection": { "container": "ul", "button": "li", @@ -146,3 +158,5 @@ if ( $.fn.DataTable.TableTools ) { } ); } + +})(window, document, jQuery, jQuery.fn.dataTable); diff --git a/integration/bootstrap/2/dataTables.bootstrap.min.js b/integration/bootstrap/2/dataTables.bootstrap.min.js new file mode 100644 index 0000000..4e5480d --- /dev/null +++ b/integration/bootstrap/2/dataTables.bootstrap.min.js @@ -0,0 +1,8 @@ +/*! + DataTables Bootstrap 2 integration + ©2011-2014 SpryMedia Ltd - datatables.net/license +*/ +(function(t,u,c,b){c.extend(!0,b.defaults,{dom:"<'row-fluid'<'span6'l><'span6'f>r><'row-fluid'<'span12't>><'row-fluid'<'span6'i><'span6'p>>",renderer:"bootstrap"});c.extend(b.ext.classes,{sWrapper:"dataTables_wrapper form-inline dt-bootstrap"});b.ext.renderer.pageButton.bootstrap=function(f,j,p,q,g,k){var r=new b.Api(f),s=f.oClasses,h=f.oLanguage.oPaginate,d,e,o=function(b,l){var i,m,n,a,j=function(a){a.preventDefault();c(a.currentTarget).hasClass("disabled")||r.page(a.data.action).draw(!1)};i=0; +for(m=l.length;i",{"class":s.sPageButton+" "+e,"aria-controls":f.sTableId,tabindex:f.iTabIndex,id:0===p&&"string"===typeof a? +f.sTableId+"_"+a:null}).append(c("",{href:"#"}).html(d)).appendTo(b),f.oApi._fnBindAction(n,{action:a},j))}};o(c(j).empty().html('').find("ul"),q)};b.TableTools&&(c.extend(!0,b.TableTools.classes,{container:"DTTT btn-group",buttons:{normal:"btn",disabled:"disabled"},collection:{container:"DTTT_dropdown dropdown-menu",buttons:{normal:"",disabled:"disabled"}},print:{info:"DTTT_print_info modal"},select:{row:"active"}}),c.extend(!0,b.TableTools.DEFAULTS.oTags,{collection:{container:"ul", +button:"li",liner:"a"}}))})(window,document,jQuery,jQuery.fn.dataTable); diff --git a/integration/bootstrap/2/index.html b/integration/bootstrap/2/index.html index bdd8048..4334d67 100644 --- a/integration/bootstrap/2/index.html +++ b/integration/bootstrap/2/index.html @@ -5,11 +5,11 @@ DataTables Bootstrap 2 example - + - - + +