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
-
+
-
-
+
+