diff --git a/css/plugins/dataTables.bootstrap.css b/css/plugins/dataTables.bootstrap.css index 74b488d..4512ba5 100644 --- a/css/plugins/dataTables.bootstrap.css +++ b/css/plugins/dataTables.bootstrap.css @@ -1,29 +1,38 @@ div.dataTables_length label { - float: left; - text-align: left; font-weight: normal; + 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 { - float: right; font-weight: normal; + white-space: nowrap; + text-align: left; } div.dataTables_filter input { - width: 16em; + margin-left: 0.5em; + display: inline-block; } 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 +40,16 @@ div.dataTables_paginate ul.pagination { white-space: nowrap; } -table.dataTable, +@media screen and (max-width: 767px) { + div.dataTables_length, + div.dataTables_filter, + div.dataTables_info, + div.dataTables_paginate { + text-align: center; + } +} + + table.dataTable td, table.dataTable th { -webkit-box-sizing: content-box; @@ -39,6 +57,7 @@ table.dataTable th { box-sizing: content-box; } + table.dataTable { clear: both; margin-top: 6px !important; @@ -54,24 +73,16 @@ table.dataTable thead .sorting_desc_disabled { cursor: pointer; } -table.dataTable thead .sorting { - background: url('../images/sort_both.png') no-repeat center right; -} +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_asc { - background: url('../images/sort_asc.png') no-repeat center right; -} +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_desc { - background: url('../images/sort_desc.png') no-repeat center right; -} - -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 > tr > th { + padding-left: 18px; + padding-right: 18px; } table.dataTable th:active { @@ -79,7 +90,6 @@ table.dataTable th:active { } /* Scrolling */ - div.dataTables_scrollHead table { margin-bottom: 0 !important; border-bottom-left-radius: 0; @@ -93,9 +103,9 @@ div.dataTables_scrollHead table thead tr:last-child td:first-child { } div.dataTables_scrollBody table { + border-top: none; margin-top: 0 !important; margin-bottom: 0 !important; - border-top: none; } div.dataTables_scrollBody tbody tr:first-child th, @@ -108,27 +118,55 @@ 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 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 { - color: white; +.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; } @@ -136,17 +174,12 @@ table.DTTT_selectable tbody tr { cursor: pointer; } -div.DTTT .btn { - font-size: 12px; - color: #333 !important; -} - div.DTTT .btn:hover { text-decoration: none !important; } ul.DTTT_dropdown.dropdown-menu { - z-index: 2003; + z-index: 2003; } ul.DTTT_dropdown.dropdown-menu a { @@ -158,8 +191,8 @@ ul.DTTT_dropdown.dropdown-menu li { } ul.DTTT_dropdown.dropdown-menu li:hover a { - color: white !important; background-color: #0088cc; + color: white !important; } div.DTTT_collection_background { @@ -167,18 +200,32 @@ 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 { - margin: 1em; - font-size: 28px; font-weight: normal; + font-size: 28px; line-height: 28px; + margin: 1em; } div.DTTT_print_info p { @@ -186,20 +233,44 @@ 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%); +} + + + /* * FixedColumns styles */ - div.DTFC_LeftHeadWrapper table, div.DTFC_LeftFootWrapper table, 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_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; @@ -216,8 +287,8 @@ div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child { div.DTFC_RightBodyWrapper table, div.DTFC_LeftBodyWrapper table { - margin-bottom: 0 !important; border-top: none; + margin: 0 !important; } div.DTFC_RightBodyWrapper tbody tr:first-child th, @@ -230,4 +301,13 @@ div.DTFC_LeftBodyWrapper tbody tr:first-child td { div.DTFC_RightFootWrapper table, div.DTFC_LeftFootWrapper table { border-top: none; -} \ No newline at end of file + margin-top: 0 !important; +} + + +/* + * FixedHeader styles + */ +div.FixedHeader_Cloned table { + margin: 0 !important +} diff --git a/images/Sorting icons.psd b/images/Sorting icons.psd new file mode 100644 index 0000000..53b2e06 Binary files /dev/null and b/images/Sorting icons.psd differ diff --git a/images/back_disabled.png b/images/back_disabled.png new file mode 100644 index 0000000..881de79 Binary files /dev/null and b/images/back_disabled.png differ diff --git a/images/back_enabled.png b/images/back_enabled.png new file mode 100644 index 0000000..c608682 Binary files /dev/null and b/images/back_enabled.png differ diff --git a/images/back_enabled_hover.png b/images/back_enabled_hover.png new file mode 100644 index 0000000..d300f10 Binary files /dev/null and b/images/back_enabled_hover.png differ diff --git a/images/forward_disabled.png b/images/forward_disabled.png new file mode 100644 index 0000000..6a6ded7 Binary files /dev/null and b/images/forward_disabled.png differ diff --git a/images/forward_enabled.png b/images/forward_enabled.png new file mode 100644 index 0000000..a4e6b53 Binary files /dev/null and b/images/forward_enabled.png differ diff --git a/images/forward_enabled_hover.png b/images/forward_enabled_hover.png new file mode 100644 index 0000000..fc46c5e Binary files /dev/null and b/images/forward_enabled_hover.png differ diff --git a/images/sort_asc.png b/images/sort_asc.png new file mode 100644 index 0000000..a88d797 Binary files /dev/null and b/images/sort_asc.png differ diff --git a/images/sort_asc_disabled.png b/images/sort_asc_disabled.png new file mode 100644 index 0000000..dcd7b7b Binary files /dev/null and b/images/sort_asc_disabled.png differ diff --git a/images/sort_both.png b/images/sort_both.png new file mode 100644 index 0000000..1867040 Binary files /dev/null and b/images/sort_both.png differ diff --git a/images/sort_desc.png b/images/sort_desc.png new file mode 100644 index 0000000..def071e Binary files /dev/null and b/images/sort_desc.png differ diff --git a/images/sort_desc_disabled.png b/images/sort_desc_disabled.png new file mode 100644 index 0000000..7824973 Binary files /dev/null and b/images/sort_desc_disabled.png differ diff --git a/js/plugins/dataTables/dataTables.bootstrap.js b/js/plugins/dataTables/dataTables.bootstrap.js index c2fba68..0627e48 100644 --- a/js/plugins/dataTables/dataTables.bootstrap.js +++ b/js/plugins/dataTables/dataTables.bootstrap.js @@ -1,219 +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-sm-6'l><'col-sm-6'f>r>" + "t" + "<'row'<'col-sm-6'i><'col-sm-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-6'i><'col-sm-6'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 < ien; i++) { - button = buttons[i]; - - if ($.isArray(button)) { - attach(container, button); - } else { - btnDisplay = ''; - btnClass = ''; - - switch (button) { - case 'ellipsis': - btnDisplay = '…'; - btnClass = 'disabled'; - break; - - case 'first': - btnDisplay = lang.sFirst; - btnClass = button + (page > 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 = $('