diff --git a/pages/tables/data.html b/pages/tables/data.html index b262d2c8e..bbc34b1bb 100644 --- a/pages/tables/data.html +++ b/pages/tables/data.html @@ -1513,8 +1513,8 @@ - - + + diff --git a/plugins/datatables/dataTables.bootstrap.css b/plugins/datatables/dataTables.bootstrap.css index 27036b0e5..2ccacaff8 100644 --- a/plugins/datatables/dataTables.bootstrap.css +++ b/plugins/datatables/dataTables.bootstrap.css @@ -1,29 +1,39 @@ div.dataTables_length label { font-weight: normal; - float: left; text-align: left; + white-space: nowrap; } div.dataTables_length select { width: 75px; + display: inline-block; +} + +div.dataTables_filter { + text-align: right; } div.dataTables_filter label { font-weight: normal; - float: right; + white-space: nowrap; + text-align: left; } div.dataTables_filter input { - width: 16em; + margin-left: 0.5em; + display: inline-block; + width: auto; } div.dataTables_info { padding-top: 8px; + white-space: nowrap; } div.dataTables_paginate { - float: right; margin: 0; + white-space: nowrap; + text-align: right; } div.dataTables_paginate ul.pagination { @@ -31,7 +41,21 @@ div.dataTables_paginate ul.pagination { white-space: nowrap; } -table.dataTable, +@media screen and (max-width: 767px) { + div.dataTables_wrapper > div.row > div, + div.dataTables_length, + div.dataTables_filter, + div.dataTables_info, + div.dataTables_paginate { + text-align: center; + } + + div.DTTT { + margin-bottom: 0.5em; + } +} + + table.dataTable td, table.dataTable th { -webkit-box-sizing: content-box; @@ -53,19 +77,61 @@ table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { cursor: pointer; + position: relative; } -table.dataTable thead .sorting { background: url('images/sort_both.png') no-repeat center right; } -table.dataTable thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; } -table.dataTable thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; } +table.dataTable thead .sorting:after, +table.dataTable thead .sorting_asc:after, +table.dataTable thead .sorting_desc:after { + position: absolute; + top: 8px; + right: 8px; + display: block; + font-family: 'Glyphicons Halflings'; + opacity: 0.5; +} +table.dataTable thead .sorting:after { + opacity: 0.2; + content: "\e150"; /* sort */ +} +table.dataTable thead .sorting_asc:after { + content: "\e155"; /* sort-by-attributes */ +} +table.dataTable thead .sorting_desc:after { + content: "\e156"; /* sort-by-attributes-alt */ +} +div.dataTables_scrollBody table.dataTable thead .sorting:after, +div.dataTables_scrollBody table.dataTable thead .sorting_asc:after, +div.dataTables_scrollBody table.dataTable thead .sorting_desc:after { + display: none; +} -table.dataTable thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; } -table.dataTable thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; } +table.dataTable thead .sorting_asc_disabled:after, +table.dataTable thead .sorting_desc_disabled:after { + color: #eee; +} + +table.dataTable thead > tr > th { + padding-right: 30px; +} table.dataTable th:active { outline: none; } + +/* Condensed */ +table.dataTable.table-condensed thead > tr > th { + padding-right: 20px; +} + +table.dataTable.table-condensed thead .sorting:after, +table.dataTable.table-condensed thead .sorting_asc:after, +table.dataTable.table-condensed thead .sorting_desc:after { + top: 6px; + right: 6px; +} + /* Scrolling */ div.dataTables_scrollHead table { margin-bottom: 0 !important; @@ -95,29 +161,60 @@ div.dataTables_scrollFoot table { border-top: none; } +/* Frustratingly the border-collapse:collapse used by Bootstrap makes the column + width calculations when using scrolling impossible to align columns. We have + to use separate + */ +table.table-bordered.dataTable { + border-collapse: separate !important; +} +table.table-bordered thead th, +table.table-bordered thead td { + border-left-width: 0; + border-top-width: 0; +} +table.table-bordered tbody th, +table.table-bordered tbody td { + border-left-width: 0; + border-bottom-width: 0; +} +table.table-bordered tfoot th, +table.table-bordered tfoot td { + border-left-width: 0; + border-bottom-width: 0; +} +table.table-bordered th:last-child, +table.table-bordered td:last-child { + border-right-width: 0; +} +div.dataTables_scrollHead table.table-bordered { + border-bottom-width: 0; +} + /* * TableTools styles */ -.table tbody tr.active td, -.table tbody tr.active th { +.table.dataTable tbody tr.active td, +.table.dataTable tbody tr.active th { background-color: #08C; color: white; } -.table tbody tr.active:hover td, -.table tbody tr.active:hover th { +.table.dataTable tbody tr.active:hover td, +.table.dataTable tbody tr.active:hover th { background-color: #0075b0 !important; } -.table tbody tr.active a { +.table.dataTable tbody tr.active th > a, +.table.dataTable tbody tr.active td > a { color: white; } -.table-striped tbody tr.active:nth-child(odd) td, -.table-striped tbody tr.active:nth-child(odd) th { +.table-striped.dataTable tbody tr.active:nth-child(odd) td, +.table-striped.dataTable tbody tr.active:nth-child(odd) th { background-color: #017ebc; } @@ -125,11 +222,6 @@ table.DTTT_selectable tbody tr { cursor: pointer; } -div.DTTT .btn { - color: #333 !important; - font-size: 12px; -} - div.DTTT .btn:hover { text-decoration: none !important; } @@ -156,10 +248,25 @@ div.DTTT_collection_background { } /* TableTools information display */ -div.DTTT_print_info.modal { +div.DTTT_print_info { + position: fixed; + top: 50%; + left: 50%; + width: 400px; height: 150px; + margin-left: -200px; margin-top: -75px; text-align: center; + color: #333; + padding: 10px 30px; + opacity: 0.95; + + background-color: white; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + + -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); } div.DTTT_print_info h6 { @@ -174,6 +281,27 @@ div.DTTT_print_info p { line-height: 20px; } +div.dataTables_processing { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 60px; + margin-left: -50%; + margin-top: -25px; + padding-top: 20px; + padding-bottom: 20px; + text-align: center; + font-size: 1.2em; + background-color: white; + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0))); + background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); + background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); + background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); + background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); + background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); +} + /* @@ -185,10 +313,12 @@ div.DTFC_RightHeadWrapper table, div.DTFC_RightFootWrapper table, table.DTFC_Cloned tr.even { background-color: white; + margin-bottom: 0; } div.DTFC_RightHeadWrapper table , div.DTFC_LeftHeadWrapper table { + border-bottom: none !important; margin-bottom: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: 0 !important; @@ -206,7 +336,7 @@ div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child { div.DTFC_RightBodyWrapper table, div.DTFC_LeftBodyWrapper table { border-top: none; - margin-bottom: 0 !important; + margin: 0 !important; } div.DTFC_RightBodyWrapper tbody tr:first-child th, @@ -219,5 +349,24 @@ div.DTFC_LeftBodyWrapper tbody tr:first-child td { div.DTFC_RightFootWrapper table, div.DTFC_LeftFootWrapper table { border-top: none; + margin-top: 0 !important; +} + + +div.DTFC_LeftBodyWrapper table.dataTable thead .sorting:after, +div.DTFC_LeftBodyWrapper table.dataTable thead .sorting_asc:after, +div.DTFC_LeftBodyWrapper table.dataTable thead .sorting_desc:after, +div.DTFC_RightBodyWrapper table.dataTable thead .sorting:after, +div.DTFC_RightBodyWrapper table.dataTable thead .sorting_asc:after, +div.DTFC_RightBodyWrapper table.dataTable thead .sorting_desc:after { + display: none; +} + + +/* + * FixedHeader styles + */ +div.FixedHeader_Cloned table { + margin: 0 !important } diff --git a/plugins/datatables/dataTables.bootstrap.js b/plugins/datatables/dataTables.bootstrap.js index 87b317c71..ffca7730c 100644 --- a/plugins/datatables/dataTables.bootstrap.js +++ b/plugins/datatables/dataTables.bootstrap.js @@ -1,224 +1,140 @@ +/*! DataTables Bootstrap 3 integration + * ©2011-2014 SpryMedia Ltd - datatables.net/license + */ + +/** + * DataTables integration for Bootstrap 3. This requires Bootstrap 3 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, undefined){ + +var factory = function( $, DataTable ) { +"use strict"; + + /* Set the defaults for DataTables initialisation */ -$.extend( true, $.fn.dataTable.defaults, { - "sDom": - "<'row'<'col-xs-6'l><'col-xs-6'f>r>"+ - "t"+ - "<'row'<'col-xs-6'i><'col-xs-6'p>>", - "oLanguage": { - "sLengthMenu": "_MENU_ records per page" - } +$.extend( true, DataTable.defaults, { + dom: + "<'row'<'col-sm-6'l><'col-sm-6'f>>" + + "<'row'<'col-sm-12'tr>>" + + "<'row'<'col-sm-5'i><'col-sm-7'p>>", + renderer: 'bootstrap' } ); /* Default class modification */ -$.extend( $.fn.dataTableExt.oStdClasses, { - "sWrapper": "dataTables_wrapper form-inline", - "sFilterInput": "form-control input-sm", - "sLengthSelect": "form-control input-sm" +$.extend( DataTable.ext.classes, { + sWrapper: "dataTables_wrapper form-inline dt-bootstrap", + sFilterInput: "form-control input-sm", + sLengthSelect: "form-control input-sm" } ); -// In 1.10 we use the pagination renderers to draw the Bootstrap paging, -// rather than custom plug-in -if ( $.fn.dataTable.Api ) { - $.fn.dataTable.defaults.renderer = 'bootstrap'; - $.fn.dataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) { - var api = new $.fn.dataTable.Api( settings ); - var classes = settings.oClasses; - var lang = settings.oLanguage.oPaginate; - var btnDisplay, btnClass; - var attach = function( container, buttons ) { - var i, ien, node, button; - var clickHandler = function ( e ) { - e.preventDefault(); - if ( e.data.action !== 'ellipsis' ) { - api.page( e.data.action ).draw( false ); - } - }; +/* 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; - 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 ( 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 - ); - } - } + 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 ); } }; - attach( - $(host).empty().html('' - ); - var els = $('a', nPaging); - $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler ); - $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler ); - }, + case 'first': + btnDisplay = lang.sFirst; + btnClass = button + (page > 0 ? + '' : ' disabled'); + break; - "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); + case 'previous': + btnDisplay = lang.sPrevious; + btnClass = button + (page > 0 ? + '' : ' disabled'); + break; - 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; + 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; } - for ( i=0, ien=an.length ; i', { + '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 ); - // Add the new list items and their event handlers - for ( j=iStart ; j<=iEnd ; j++ ) { - sClass = (j==oPaging.iPage+1) ? 'class="active"' : ''; - $('
  • '+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 ); - } ); - } - - // 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'); - } + settings.oApi._fnBindAction( + node, {action: button}, clickHandler + ); } } } - } ); -} + }; + + attach( + $(host).empty().html('