From 1905e9bf451f9c05c6ea0e73e37bccab58212afe Mon Sep 17 00:00:00 2001 From: null-d3v Date: Thu, 30 Oct 2014 11:13:02 -0500 Subject: [PATCH 1/5] Ensure jQuery UI theme styles are not overwritten --- integration/jqueryui/dataTables.jqueryui.css | 375 +++++++++---------- 1 file changed, 179 insertions(+), 196 deletions(-) diff --git a/integration/jqueryui/dataTables.jqueryui.css b/integration/jqueryui/dataTables.jqueryui.css index be48e9b..d11d172 100644 --- a/integration/jqueryui/dataTables.jqueryui.css +++ b/integration/jqueryui/dataTables.jqueryui.css @@ -2,413 +2,396 @@ * Table styles */ table.dataTable { - width: 100%; - margin: 0 auto; - clear: both; - border-collapse: separate; - border-spacing: 0; - /* - * Header and footer styles - */ - /* - * Body styles - */ + width: 100%; + margin: 0 auto; + clear: both; + border-collapse: separate; + border-spacing: 0; + /* + * Header and footer styles + */ + /* + * Body styles + */ } table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td { - padding: 4px 10px; + padding: 4px 10px; } table.dataTable thead th, table.dataTable tfoot th { - font-weight: bold; + font-weight: bold; } table.dataTable thead th:active, table.dataTable thead td:active { - outline: none; + outline: none; } table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting { - cursor: pointer; - *cursor: hand; + cursor: pointer; + *cursor: hand; } table.dataTable thead th div.DataTables_sort_wrapper { - position: relative; - padding-right: 10px; + position: relative; + padding-right: 10px; } table.dataTable thead th div.DataTables_sort_wrapper span { - position: absolute; - top: 50%; - margin-top: -8px; - right: -5px; + position: absolute; + top: 50%; + margin-top: -8px; + right: -5px; } table.dataTable thead th.ui-state-default { - border-right-width: 0; + border-right-width: 0; } table.dataTable thead th.ui-state-default:last-child { - border-right-width: 1px; + border-right-width: 1px; } table.dataTable tbody tr { - background-color: white; + background-color: white; } table.dataTable tbody tr.selected { - background-color: #b0bed9; + background-color: #b0bed9; } table.dataTable tbody th, table.dataTable tbody td { - padding: 8px 10px; + padding: 8px 10px; } table.dataTable th.center, table.dataTable td.center, table.dataTable td.dataTables_empty { - text-align: center; + text-align: center; } table.dataTable th.right, table.dataTable td.right { - text-align: right; + text-align: right; } table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td { - border-top: 1px solid #dddddd; + border-top: 1px solid #dddddd; } table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child td { - border-top: none; + border-top: none; } table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td { - border-top: 1px solid #dddddd; - border-right: 1px solid #dddddd; + border-top: 1px solid #dddddd; + border-right: 1px solid #dddddd; } table.dataTable.cell-border tbody tr th:first-child, table.dataTable.cell-border tbody tr td:first-child { - border-left: 1px solid #dddddd; + border-left: 1px solid #dddddd; } table.dataTable.cell-border tbody tr:first-child th, table.dataTable.cell-border tbody tr:first-child td { - border-top: none; + border-top: none; } table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { - background-color: #f9f9f9; + background-color: #f9f9f9; } table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected { - background-color: #abb9d3; + background-color: #abb9d3; } table.dataTable.hover tbody tr:hover, table.dataTable.hover tbody tr.odd:hover, table.dataTable.hover tbody tr.even:hover, table.dataTable.display tbody tr:hover, table.dataTable.display tbody tr.odd:hover, table.dataTable.display tbody tr.even:hover { - background-color: whitesmoke; + background-color: whitesmoke; } table.dataTable.hover tbody tr:hover.selected, table.dataTable.hover tbody tr.odd:hover.selected, table.dataTable.hover tbody tr.even:hover.selected, table.dataTable.display tbody tr:hover.selected, table.dataTable.display tbody tr.odd:hover.selected, table.dataTable.display tbody tr.even:hover.selected { - background-color: #a9b7d1; + background-color: #a9b7d1; } table.dataTable.order-column tbody tr > .sorting_1, table.dataTable.order-column tbody tr > .sorting_2, table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1, table.dataTable.display tbody tr > .sorting_2, table.dataTable.display tbody tr > .sorting_3 { - background-color: #f9f9f9; + background-color: #f9f9f9; } table.dataTable.order-column tbody tr.selected > .sorting_1, table.dataTable.order-column tbody tr.selected > .sorting_2, table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1, table.dataTable.display tbody tr.selected > .sorting_2, table.dataTable.display tbody tr.selected > .sorting_3 { - background-color: #acbad4; + background-color: #acbad4; } table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 { - background-color: #f1f1f1; + background-color: #f1f1f1; } table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 { - background-color: #f3f3f3; + background-color: #f3f3f3; } table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 { - background-color: whitesmoke; + background-color: whitesmoke; } table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 { - background-color: #a6b3cd; + background-color: #a6b3cd; } table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 { - background-color: #a7b5ce; + background-color: #a7b5ce; } table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 { - background-color: #a9b6d0; + background-color: #a9b6d0; } table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 { - background-color: #f9f9f9; + background-color: #f9f9f9; } table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 { - background-color: #fbfbfb; + background-color: #fbfbfb; } table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 { - background-color: #fdfdfd; + background-color: #fdfdfd; } table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 { - background-color: #acbad4; + background-color: #acbad4; } table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 { - background-color: #adbbd6; + background-color: #adbbd6; } table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 { - background-color: #afbdd8; + background-color: #afbdd8; } table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.display tbody tr.odd:hover > .sorting_1, table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_1, table.dataTable.order-column.hover tbody tr.even:hover > .sorting_1 { - background-color: #eaeaea; + background-color: #eaeaea; } table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.display tbody tr.odd:hover > .sorting_2, table.dataTable.display tbody tr.even:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_2, table.dataTable.order-column.hover tbody tr.even:hover > .sorting_2 { - background-color: #ebebeb; + background-color: #ebebeb; } table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.display tbody tr.odd:hover > .sorting_3, table.dataTable.display tbody tr.even:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_3, table.dataTable.order-column.hover tbody tr.even:hover > .sorting_3 { - background-color: #eeeeee; + background-color: #eeeeee; } table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.display tbody tr.odd:hover.selected > .sorting_1, table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_1 { - background-color: #a1aec7; + background-color: #a1aec7; } table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.display tbody tr.odd:hover.selected > .sorting_2, table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_2 { - background-color: #a2afc8; + background-color: #a2afc8; } table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.display tbody tr.odd:hover.selected > .sorting_3, table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_3 { - background-color: #a4b2cb; + background-color: #a4b2cb; } table.dataTable, table.dataTable th, table.dataTable td { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; } /* * Control feature layout */ .dataTables_wrapper { - position: relative; - clear: both; - *zoom: 1; - zoom: 1; + position: relative; + clear: both; + *zoom: 1; + zoom: 1; } .dataTables_wrapper .dataTables_length { - float: left; + float: left; } .dataTables_wrapper .dataTables_filter { - float: right; - text-align: right; + float: right; + text-align: right; } .dataTables_wrapper .dataTables_filter input { - margin-left: 0.5em; + margin-left: 0.5em; } .dataTables_wrapper .dataTables_info { - clear: both; - float: left; - padding-top: 0.55em; + clear: both; + float: left; + padding-top: 0.55em; } .dataTables_wrapper .dataTables_paginate { - float: right; - text-align: right; + float: right; + text-align: right; } .dataTables_wrapper .dataTables_paginate .fg-button { - box-sizing: border-box; - display: inline-block; - min-width: 1.5em; - padding: 0.5em; - margin-left: 2px; - text-align: center; - text-decoration: none !important; - cursor: pointer; - *cursor: hand; - color: #333333 !important; - border: 1px solid transparent; + box-sizing: border-box; + display: inline-block; + min-width: 1.5em; + padding: 0.5em; + text-align: center; + text-decoration: none !important; + cursor: pointer; + *cursor: hand; + border: 1px solid transparent; } .dataTables_wrapper .dataTables_paginate .fg-button:active { - outline: none; -} -.dataTables_wrapper .dataTables_paginate .fg-button:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; -} -.dataTables_wrapper .dataTables_paginate .fg-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + outline: none; } .dataTables_wrapper .dataTables_processing { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 40px; - margin-left: -50%; - margin-top: -25px; - padding-top: 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))); - /* Chrome,Safari4+ */ - 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%); - /* Chrome10+,Safari5.1+ */ - 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%); - /* FF3.6+ */ - 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%); - /* IE10+ */ - 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%); - /* Opera 11.10+ */ - 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%); - /* W3C */ -} -.dataTables_wrapper .dataTables_length, -.dataTables_wrapper .dataTables_filter, -.dataTables_wrapper .dataTables_info, -.dataTables_wrapper .dataTables_processing, -.dataTables_wrapper .dataTables_paginate { - color: #333333; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 40px; + margin-left: -50%; + margin-top: -25px; + padding-top: 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))); + /* Chrome,Safari4+ */ + 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%); + /* Chrome10+,Safari5.1+ */ + 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%); + /* FF3.6+ */ + 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%); + /* IE10+ */ + 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%); + /* Opera 11.10+ */ + 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%); + /* W3C */ } .dataTables_wrapper .dataTables_scroll { - clear: both; + clear: both; } .dataTables_wrapper .dataTables_scrollBody { - *margin-top: -1px; - -webkit-overflow-scrolling: touch; + *margin-top: -1px; + -webkit-overflow-scrolling: touch; } .dataTables_wrapper .ui-widget-header { - font-weight: normal; + font-weight: normal; } .dataTables_wrapper .ui-toolbar { - padding: 8px; + padding: 8px; } .dataTables_wrapper:after { - visibility: hidden; - display: block; - content: ""; - clear: both; - height: 0; + visibility: hidden; + display: block; + content: ""; + clear: both; + height: 0; } @media screen and (max-width: 767px) { - .dataTables_wrapper .dataTables_length, - .dataTables_wrapper .dataTables_filter, - .dataTables_wrapper .dataTables_info, - .dataTables_wrapper .dataTables_paginate { - float: none; - text-align: center; - } - .dataTables_wrapper .dataTables_filter, - .dataTables_wrapper .dataTables_paginate { - margin-top: 0.5em; - } + .dataTables_wrapper .dataTables_length, + .dataTables_wrapper .dataTables_filter, + .dataTables_wrapper .dataTables_info, + .dataTables_wrapper .dataTables_paginate { + float: none; + text-align: center; + } + .dataTables_wrapper .dataTables_filter, + .dataTables_wrapper .dataTables_paginate { + margin-top: 0.5em; + } } /* * TableTools styling for jQuery UI */ div.DTTT_container { - position: relative; - float: left; + position: relative; + float: left; } .DTTT_button { - position: relative; - float: left; - margin-right: 3px; - padding: 3px 10px; - border: 1px solid #d0d0d0; - background-color: #fff; - color: #333; - cursor: pointer; + position: relative; + float: left; + margin-right: 3px; + padding: 3px 10px; + border: 1px solid #d0d0d0; + background-color: #fff; + color: #333; + cursor: pointer; } .DTTT_button::-moz-focus-inner { - border: none !important; - padding: 0; + border: none !important; + padding: 0; } .DTTT_disabled { - color: #999; + color: #999; } table.DTTT_selectable tbody tr { - cursor: pointer; + cursor: pointer; } div.DTTT_collection { - width: 150px; - background-color: #f3f3f3; - overflow: hidden; - z-index: 2002; - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + width: 150px; + background-color: #f3f3f3; + overflow: hidden; + z-index: 2002; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } div.DTTT_collection button.DTTT_button, div.DTTT_collection div.DTTT_button, div.DTTT_collection a.DTTT_button { - float: none; - width: 100%; - margin-bottom: -0.1em; + float: none; + width: 100%; + margin-bottom: -0.1em; } div.DTTT_collection_background { - background: black; - z-index: 2001; + background: black; + z-index: 2001; } .DTTT_print_info { - position: absolute; - top: 50%; - left: 50%; - width: 400px; - height: 150px; - margin-left: -200px; - margin-top: -75px; - text-align: center; - background-color: #3f3f3f; - color: white; - padding: 10px 30px; - opacity: 0.9; - border-radius: 5px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + position: absolute; + top: 50%; + left: 50%; + width: 400px; + height: 150px; + margin-left: -200px; + margin-top: -75px; + text-align: center; + background-color: #3f3f3f; + color: white; + padding: 10px 30px; + opacity: 0.9; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } .DTTT_print_info .DTTT_print_info h6 { - font-weight: normal; - font-size: 28px; - line-height: 28px; - margin: 1em; + font-weight: normal; + font-size: 28px; + line-height: 28px; + margin: 1em; } .DTTT_print_info .DTTT_print_info p { - font-size: 14px; - line-height: 20px; + font-size: 14px; + line-height: 20px; } From 0c47f9e736a6aa95f61581aa3c63f1eed280a447 Mon Sep 17 00:00:00 2001 From: null-d3v Date: Thu, 30 Oct 2014 11:15:52 -0500 Subject: [PATCH 2/5] Match original indentation --- integration/jqueryui/dataTables.jqueryui.css | 358 +++++++++---------- 1 file changed, 179 insertions(+), 179 deletions(-) diff --git a/integration/jqueryui/dataTables.jqueryui.css b/integration/jqueryui/dataTables.jqueryui.css index d11d172..9ad5ecc 100644 --- a/integration/jqueryui/dataTables.jqueryui.css +++ b/integration/jqueryui/dataTables.jqueryui.css @@ -2,396 +2,396 @@ * Table styles */ table.dataTable { - width: 100%; - margin: 0 auto; - clear: both; - border-collapse: separate; - border-spacing: 0; - /* - * Header and footer styles - */ - /* - * Body styles - */ + width: 100%; + margin: 0 auto; + clear: both; + border-collapse: separate; + border-spacing: 0; + /* + * Header and footer styles + */ + /* + * Body styles + */ } table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td { - padding: 4px 10px; + padding: 4px 10px; } table.dataTable thead th, table.dataTable tfoot th { - font-weight: bold; + font-weight: bold; } table.dataTable thead th:active, table.dataTable thead td:active { - outline: none; + outline: none; } table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting { - cursor: pointer; - *cursor: hand; + cursor: pointer; + *cursor: hand; } table.dataTable thead th div.DataTables_sort_wrapper { - position: relative; - padding-right: 10px; + position: relative; + padding-right: 10px; } table.dataTable thead th div.DataTables_sort_wrapper span { - position: absolute; - top: 50%; - margin-top: -8px; - right: -5px; + position: absolute; + top: 50%; + margin-top: -8px; + right: -5px; } table.dataTable thead th.ui-state-default { - border-right-width: 0; + border-right-width: 0; } table.dataTable thead th.ui-state-default:last-child { - border-right-width: 1px; + border-right-width: 1px; } table.dataTable tbody tr { - background-color: white; + background-color: white; } table.dataTable tbody tr.selected { - background-color: #b0bed9; + background-color: #b0bed9; } table.dataTable tbody th, table.dataTable tbody td { - padding: 8px 10px; + padding: 8px 10px; } table.dataTable th.center, table.dataTable td.center, table.dataTable td.dataTables_empty { - text-align: center; + text-align: center; } table.dataTable th.right, table.dataTable td.right { - text-align: right; + text-align: right; } table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td { - border-top: 1px solid #dddddd; + border-top: 1px solid #dddddd; } table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child td { - border-top: none; + border-top: none; } table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td { - border-top: 1px solid #dddddd; - border-right: 1px solid #dddddd; + border-top: 1px solid #dddddd; + border-right: 1px solid #dddddd; } table.dataTable.cell-border tbody tr th:first-child, table.dataTable.cell-border tbody tr td:first-child { - border-left: 1px solid #dddddd; + border-left: 1px solid #dddddd; } table.dataTable.cell-border tbody tr:first-child th, table.dataTable.cell-border tbody tr:first-child td { - border-top: none; + border-top: none; } table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { - background-color: #f9f9f9; + background-color: #f9f9f9; } table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected { - background-color: #abb9d3; + background-color: #abb9d3; } table.dataTable.hover tbody tr:hover, table.dataTable.hover tbody tr.odd:hover, table.dataTable.hover tbody tr.even:hover, table.dataTable.display tbody tr:hover, table.dataTable.display tbody tr.odd:hover, table.dataTable.display tbody tr.even:hover { - background-color: whitesmoke; + background-color: whitesmoke; } table.dataTable.hover tbody tr:hover.selected, table.dataTable.hover tbody tr.odd:hover.selected, table.dataTable.hover tbody tr.even:hover.selected, table.dataTable.display tbody tr:hover.selected, table.dataTable.display tbody tr.odd:hover.selected, table.dataTable.display tbody tr.even:hover.selected { - background-color: #a9b7d1; + background-color: #a9b7d1; } table.dataTable.order-column tbody tr > .sorting_1, table.dataTable.order-column tbody tr > .sorting_2, table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1, table.dataTable.display tbody tr > .sorting_2, table.dataTable.display tbody tr > .sorting_3 { - background-color: #f9f9f9; + background-color: #f9f9f9; } table.dataTable.order-column tbody tr.selected > .sorting_1, table.dataTable.order-column tbody tr.selected > .sorting_2, table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1, table.dataTable.display tbody tr.selected > .sorting_2, table.dataTable.display tbody tr.selected > .sorting_3 { - background-color: #acbad4; + background-color: #acbad4; } table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 { - background-color: #f1f1f1; + background-color: #f1f1f1; } table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 { - background-color: #f3f3f3; + background-color: #f3f3f3; } table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 { - background-color: whitesmoke; + background-color: whitesmoke; } table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 { - background-color: #a6b3cd; + background-color: #a6b3cd; } table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 { - background-color: #a7b5ce; + background-color: #a7b5ce; } table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 { - background-color: #a9b6d0; + background-color: #a9b6d0; } table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 { - background-color: #f9f9f9; + background-color: #f9f9f9; } table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 { - background-color: #fbfbfb; + background-color: #fbfbfb; } table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 { - background-color: #fdfdfd; + background-color: #fdfdfd; } table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 { - background-color: #acbad4; + background-color: #acbad4; } table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 { - background-color: #adbbd6; + background-color: #adbbd6; } table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 { - background-color: #afbdd8; + background-color: #afbdd8; } table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.display tbody tr.odd:hover > .sorting_1, table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_1, table.dataTable.order-column.hover tbody tr.even:hover > .sorting_1 { - background-color: #eaeaea; + background-color: #eaeaea; } table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.display tbody tr.odd:hover > .sorting_2, table.dataTable.display tbody tr.even:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_2, table.dataTable.order-column.hover tbody tr.even:hover > .sorting_2 { - background-color: #ebebeb; + background-color: #ebebeb; } table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.display tbody tr.odd:hover > .sorting_3, table.dataTable.display tbody tr.even:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_3, table.dataTable.order-column.hover tbody tr.even:hover > .sorting_3 { - background-color: #eeeeee; + background-color: #eeeeee; } table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.display tbody tr.odd:hover.selected > .sorting_1, table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_1 { - background-color: #a1aec7; + background-color: #a1aec7; } table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.display tbody tr.odd:hover.selected > .sorting_2, table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_2 { - background-color: #a2afc8; + background-color: #a2afc8; } table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.display tbody tr.odd:hover.selected > .sorting_3, table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_3 { - background-color: #a4b2cb; + background-color: #a4b2cb; } table.dataTable, table.dataTable th, table.dataTable td { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; } /* * Control feature layout */ .dataTables_wrapper { - position: relative; - clear: both; - *zoom: 1; - zoom: 1; + position: relative; + clear: both; + *zoom: 1; + zoom: 1; } .dataTables_wrapper .dataTables_length { - float: left; + float: left; } .dataTables_wrapper .dataTables_filter { - float: right; - text-align: right; + float: right; + text-align: right; } .dataTables_wrapper .dataTables_filter input { - margin-left: 0.5em; + margin-left: 0.5em; } .dataTables_wrapper .dataTables_info { - clear: both; - float: left; - padding-top: 0.55em; + clear: both; + float: left; + padding-top: 0.55em; } .dataTables_wrapper .dataTables_paginate { - float: right; - text-align: right; + float: right; + text-align: right; } .dataTables_wrapper .dataTables_paginate .fg-button { - box-sizing: border-box; - display: inline-block; - min-width: 1.5em; - padding: 0.5em; - text-align: center; - text-decoration: none !important; - cursor: pointer; - *cursor: hand; - border: 1px solid transparent; + box-sizing: border-box; + display: inline-block; + min-width: 1.5em; + padding: 0.5em; + text-align: center; + text-decoration: none !important; + cursor: pointer; + *cursor: hand; + border: 1px solid transparent; } .dataTables_wrapper .dataTables_paginate .fg-button:active { - outline: none; + outline: none; } .dataTables_wrapper .dataTables_processing { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 40px; - margin-left: -50%; - margin-top: -25px; - padding-top: 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))); - /* Chrome,Safari4+ */ - 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%); - /* Chrome10+,Safari5.1+ */ - 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%); - /* FF3.6+ */ - 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%); - /* IE10+ */ - 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%); - /* Opera 11.10+ */ - 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%); - /* W3C */ + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 40px; + margin-left: -50%; + margin-top: -25px; + padding-top: 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))); + /* Chrome,Safari4+ */ + 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%); + /* Chrome10+,Safari5.1+ */ + 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%); + /* FF3.6+ */ + 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%); + /* IE10+ */ + 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%); + /* Opera 11.10+ */ + 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%); + /* W3C */ } .dataTables_wrapper .dataTables_scroll { - clear: both; + clear: both; } .dataTables_wrapper .dataTables_scrollBody { - *margin-top: -1px; - -webkit-overflow-scrolling: touch; + *margin-top: -1px; + -webkit-overflow-scrolling: touch; } .dataTables_wrapper .ui-widget-header { - font-weight: normal; + font-weight: normal; } .dataTables_wrapper .ui-toolbar { - padding: 8px; + padding: 8px; } .dataTables_wrapper:after { - visibility: hidden; - display: block; - content: ""; - clear: both; - height: 0; + visibility: hidden; + display: block; + content: ""; + clear: both; + height: 0; } @media screen and (max-width: 767px) { - .dataTables_wrapper .dataTables_length, - .dataTables_wrapper .dataTables_filter, - .dataTables_wrapper .dataTables_info, - .dataTables_wrapper .dataTables_paginate { - float: none; - text-align: center; - } - .dataTables_wrapper .dataTables_filter, - .dataTables_wrapper .dataTables_paginate { - margin-top: 0.5em; - } + .dataTables_wrapper .dataTables_length, + .dataTables_wrapper .dataTables_filter, + .dataTables_wrapper .dataTables_info, + .dataTables_wrapper .dataTables_paginate { + float: none; + text-align: center; + } + .dataTables_wrapper .dataTables_filter, + .dataTables_wrapper .dataTables_paginate { + margin-top: 0.5em; + } } /* * TableTools styling for jQuery UI */ div.DTTT_container { - position: relative; - float: left; + position: relative; + float: left; } .DTTT_button { - position: relative; - float: left; - margin-right: 3px; - padding: 3px 10px; - border: 1px solid #d0d0d0; - background-color: #fff; - color: #333; - cursor: pointer; + position: relative; + float: left; + margin-right: 3px; + padding: 3px 10px; + border: 1px solid #d0d0d0; + background-color: #fff; + color: #333; + cursor: pointer; } .DTTT_button::-moz-focus-inner { - border: none !important; - padding: 0; + border: none !important; + padding: 0; } .DTTT_disabled { - color: #999; + color: #999; } table.DTTT_selectable tbody tr { - cursor: pointer; + cursor: pointer; } div.DTTT_collection { - width: 150px; - background-color: #f3f3f3; - overflow: hidden; - z-index: 2002; - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + width: 150px; + background-color: #f3f3f3; + overflow: hidden; + z-index: 2002; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } div.DTTT_collection button.DTTT_button, div.DTTT_collection div.DTTT_button, div.DTTT_collection a.DTTT_button { - float: none; - width: 100%; - margin-bottom: -0.1em; + float: none; + width: 100%; + margin-bottom: -0.1em; } div.DTTT_collection_background { - background: black; - z-index: 2001; + background: black; + z-index: 2001; } .DTTT_print_info { - position: absolute; - top: 50%; - left: 50%; - width: 400px; - height: 150px; - margin-left: -200px; - margin-top: -75px; - text-align: center; - background-color: #3f3f3f; - color: white; - padding: 10px 30px; - opacity: 0.9; - border-radius: 5px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + position: absolute; + top: 50%; + left: 50%; + width: 400px; + height: 150px; + margin-left: -200px; + margin-top: -75px; + text-align: center; + background-color: #3f3f3f; + color: white; + padding: 10px 30px; + opacity: 0.9; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } .DTTT_print_info .DTTT_print_info h6 { - font-weight: normal; - font-size: 28px; - line-height: 28px; - margin: 1em; + font-weight: normal; + font-size: 28px; + line-height: 28px; + margin: 1em; } .DTTT_print_info .DTTT_print_info p { - font-size: 14px; - line-height: 20px; + font-size: 14px; + line-height: 20px; } From 3f60ba40936a52d9fdce5f0b5b62f5c5225d67b2 Mon Sep 17 00:00:00 2001 From: null-d3v Date: Thu, 30 Oct 2014 11:19:32 -0500 Subject: [PATCH 3/5] Utilize widgets, improve style integration --- integration/jqueryui/dataTables.jqueryui.js | 395 +++++++++++++------- 1 file changed, 250 insertions(+), 145 deletions(-) diff --git a/integration/jqueryui/dataTables.jqueryui.js b/integration/jqueryui/dataTables.jqueryui.js index 21ad7b5..1fa65c8 100644 --- a/integration/jqueryui/dataTables.jqueryui.js +++ b/integration/jqueryui/dataTables.jqueryui.js @@ -1,5 +1,5 @@ /*! DataTables jQuery UI integration - * ©2011-2014 SpryMedia Ltd - datatables.net/license + * ©2011-2014 SpryMedia Ltd - datatables.net/license */ /** @@ -7,150 +7,255 @@ * 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/jqueryui + * controls using jQuery UI. See http://datatables.net/manual/styling/jqueryui * for further information. */ -(function(window, document, undefined){ - -var factory = function( $, DataTable ) { -"use strict"; - - -var sort_prefix = 'css_right ui-icon ui-icon-'; -var toolbar_prefix = 'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-'; - -/* Set the defaults for DataTables initialisation */ -$.extend( true, DataTable.defaults, { - dom: - '<"'+toolbar_prefix+'tl ui-corner-tr"lfr>'+ - 't'+ - '<"'+toolbar_prefix+'bl ui-corner-br"ip>', - renderer: 'jqueryui' -} ); - - -$.extend( DataTable.ext.classes, { - "sWrapper": "dataTables_wrapper dt-jqueryui", - - /* Full numbers paging buttons */ - "sPageButton": "fg-button ui-button ui-state-default", - "sPageButtonActive": "ui-state-disabled", - "sPageButtonDisabled": "ui-state-disabled", - - /* Features */ - "sPaging": "dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi "+ - "ui-buttonset-multi paging_", /* Note that the type is postfixed */ - - /* Sorting */ - "sSortAsc": "ui-state-default sorting_asc", - "sSortDesc": "ui-state-default sorting_desc", - "sSortable": "ui-state-default sorting", - "sSortableAsc": "ui-state-default sorting_asc_disabled", - "sSortableDesc": "ui-state-default sorting_desc_disabled", - "sSortableNone": "ui-state-default sorting_disabled", - "sSortIcon": "DataTables_sort_icon", - - /* Scrolling */ - "sScrollHead": "dataTables_scrollHead "+"ui-state-default", - "sScrollFoot": "dataTables_scrollFoot "+"ui-state-default", - - /* Misc */ - "sHeaderTH": "ui-state-default", - "sFooterTH": "ui-state-default" -} ); - - -DataTable.ext.renderer.header.jqueryui = function ( settings, cell, column, classes ) { - // Calculate what the unsorted class should be - var noSortAppliedClass = sort_prefix+'carat-2-n-s'; - var asc = $.inArray('asc', column.asSorting) !== -1; - var desc = $.inArray('desc', column.asSorting) !== -1; - - if ( !column.bSortable || (!asc && !desc) ) { - noSortAppliedClass = ''; - } - else if ( asc && !desc ) { - noSortAppliedClass = sort_prefix+'carat-1-n'; - } - else if ( !asc && desc ) { - noSortAppliedClass = sort_prefix+'carat-1-s'; - } - - // Setup the DOM structure - $('
') - .addClass( 'DataTables_sort_wrapper' ) - .append( cell.contents() ) - .append( $('') - .addClass( classes.sSortIcon+' '+noSortAppliedClass ) - ) - .appendTo( cell ); - - // Attach a sort listener to update on sort - $(settings.nTable).on( 'order.dt', function ( e, ctx, sorting, columns ) { - if ( settings !== ctx ) { - return; - } - - var colIdx = column.idx; - - cell - .removeClass( classes.sSortAsc +" "+classes.sSortDesc ) - .addClass( columns[ colIdx ] == 'asc' ? - classes.sSortAsc : columns[ colIdx ] == 'desc' ? - classes.sSortDesc : - column.sSortingClass - ); - - cell - .find( 'span.'+classes.sSortIcon ) - .removeClass( - sort_prefix+'triangle-1-n' +" "+ - sort_prefix+'triangle-1-s' +" "+ - sort_prefix+'carat-2-n-s' +" "+ - sort_prefix+'carat-1-n' +" "+ - sort_prefix+'carat-1-s' - ) - .addClass( columns[ colIdx ] == 'asc' ? - sort_prefix+'triangle-1-n' : columns[ colIdx ] == 'desc' ? - sort_prefix+'triangle-1-s' : - noSortAppliedClass - ); - } ); -}; - - -/* - * TableTools jQuery UI compatibility - * Required TableTools 2.1+ - */ -if ( DataTable.TableTools ) { - $.extend( true, DataTable.TableTools.classes, { - "container": "DTTT_container ui-buttonset ui-buttonset-multi", - "buttons": { - "normal": "DTTT_button ui-button ui-state-default" - }, - "collection": { - "container": "DTTT_collection ui-buttonset ui-buttonset-multi" - } - } ); -} - -}; // /factory - - -// Define as an AMD module if possible -if ( typeof define === 'function' && define.amd ) { - define( ['jquery', 'datatables'], factory ); -} -else if ( typeof exports === 'object' ) { - // Node/CommonJS - factory( require('jquery'), require('datatables') ); -} -else if ( jQuery ) { - // Otherwise simply initialise as normal, stopping multiple evaluation - factory( jQuery, jQuery.fn.dataTable ); -} - - -})(window, document); +(function() +{ + var factory = function($, DataTable) + { + "use strict"; + + var originalDataTable = $.fn.DataTable; + $.fn.DataTable = function(options) + { + var dataTable = originalDataTable.apply(this, [ options ]); + + $(dataTable.table().container()).addClass("ui-widget"); + + return dataTable; + }; + + $.extend(true, DataTable.defaults, + { + dom: "<'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr'lfr>" + + "t" + + "<'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br'ip>", + renderer: "jqueryui", + }); + DataTable.defaults.oLanguage.oPaginate.sEllipsis = "..."; // TODO Base DT file needs to be updated with this. + + // Unsure if this is necessary with header and pageButton render functions. + $.extend(DataTable.ext.classes, + { + sFilterInput: "ui-corner-all", + sFooterTH: "ui-state-default", + sHeaderTH: "ui-state-default", + sPageButton: "fg-button ui-button ui-state-default", + sPageButtonActive: "ui-state-highlight", + sPageButtonDisabled: "ui-state-disabled", + sPaging: "dataTables_paginate paging_", + sScrollFoot: "dataTables_scrollFoot ui-state-default", + sScrollHead: "dataTables_scrollHead ui-state-default", + sSortAsc: "sorting_asc ui-state-default", + sSortDesc: "sorting_desc ui-state-default", + sSortable: "sorting ui-state-default", + sSortableAsc: "sorting_asc_disabled ui-state-default", + sSortableDesc: "sorting_desc_disabled ui-state-default", + sSortableNone: "sorting_disabled ui-state-default", + sSortIcon: "DataTables_sort_icon", + sWrapper: "dataTables_wrapper dt-jqueryui", + }); + + DataTable.ext.renderer.header.jqueryui = function(settings, $tableHead, column, classes) + { + var sortClass = ""; + if (column.bSortable) + { + if ($.inArray("asc", column.asSorting) !== -1) + { + if ($.inArray("desc", column.asSorting) !== -1) + { + sortClass = "css_right ui-icon ui-icon-carat-2-n-s"; + } + else + { + sortClass = "css_right ui-icon ui-icon-carat-1-n"; + } + } + else if ($.inArray("desc", column.asSorting) !== -1) + { + sortClass = "css_right ui-icon ui-icon-carat-1-s"; + } + } + + $("
", + { + class: "DataTables_sort_wrapper", + }) + .append($tableHead.contents()) + .append($("", + { + class: classes.sSortIcon + " " + sortClass, + })) + .appendTo($tableHead); + + $(settings.nTable).on("order.dt", function(event, context, sorting, columns) + { + if (context === settings) + { + var $sortIconSpan = $tableHead.find("span." + classes.sSortIcon); + + $tableHead.removeClass(classes.sSortAsc + " " + classes.sSortDesc); + $sortIconSpan.removeClass("css_right ui-icon ui-icon-carat-1-n ui-icon-carat-1-s ui-icon-carat-2-n-s ui-icon-triangle-1-n ui-icon-triangle-1-s"); + + if (columns[column.idx] === "asc") + { + $tableHead.addClass(classes.sSortAsc); + $sortIconSpan.addClass("css_right ui-icon ui-icon-triangle-1-n"); + } + else if (columns[column.idx] === "desc") + { + $tableHead.addClass(classes.sSortDesc); + $sortIconSpan.addClass("css_right ui-icon ui-icon-triangle-1-s"); + } + else + { + $tableHead.addClass(column.sSortingClass); + $sortIconSpan.addClass(sortClass); + } + } + }); + }; + + $.fn.dataTable.ext.renderer.pageButton.jqueryui = function(settings, host, index, buttons, page, pages) + { + // IE9 throws an "unknown error" if document.activeElement is used inside an iframe or frame. + try + { + var activeElement = $(document.activeElement).data("dt-idx"); + + var buttonClickHandler = function(event) + { + settings.oApi._fnPageChange(settings, event.data.action, true); + }; + var $host = $(host).empty(); + var buttonIndex = 0; + var addButton = function($container, button) + { + if ($.isArray(button)) + { + var $buttonDiv = $("<" + (button.DT_el || "div") + ">").appendTo($container); + button.forEach(function(subButton) + { + addButton($buttonDiv, subButton); + }); + } + else + { + var buttonText = ""; + var disabled = false; + var active = false; + switch (button) + { + case "ellipsis": + { + buttonText = settings.oLanguage.oPaginate.sEllipsis; + disabled = true; + break; + } + case "first": + { + buttonText = settings.oLanguage.oPaginate.sFirst; + disabled = page === 0; + break; + } + case "next": + { + buttonText = settings.oLanguage.oPaginate.sNext; + disabled = page === pages - 1; + break; + } + case "previous": + { + buttonText = settings.oLanguage.oPaginate.sPrevious; + disabled = page === 0; + break; + } + case "last": + { + buttonText = settings.oLanguage.oPaginate.sLast; + disabled = page === pages - 1; + break; + } + default: + { + buttonText = button + 1; + active = page === button; + disabled = false; + break; + } + } + + var $buttonAnchor = $("", + { + "aria-controls": settings.sTableId, + class: settings.oClasses.sPageButton + (active ? " " + settings.oClasses.sPageButtonActive : ""), + "data-dt-idx": buttonIndex, + id: index === 0 && typeof(button) === "string" ? settings.sTableId + "_" + button : null, + "tabindex": settings.iTabIndex, + }) + .html(buttonText) + .appendTo($container) + .button( + { + disabled: disabled, + }) + .removeClass("ui-corner-all"); + + settings.oApi._fnBindAction($buttonAnchor, { action: button, }, buttonClickHandler); + + buttonIndex++; + } + }; + buttons.forEach(function(button) + { + addButton($host, button); + }); + + $host.find("a:first").addClass("ui-corner-tl ui-corner-bl"); + $host.find("a:last").addClass("ui-corner-tr ui-corner-br"); + + if (activeElement !== null) + { + $(host).find("[data-dt-idx=" + activeElement + "]").focus(); + } + } + catch (exception) { } + }; + + /* + * TableTools jQuery UI compatibility + * Required TableTools 2.1+ + */ + if (DataTable.TableTools) + { + $.extend(true, DataTable.TableTools.classes, + { + buttons: + { + normal: "DTTT_button ui-button ui-state-default", + }, + collection: + { + container: "DTTT_collection ui-buttonset ui-buttonset-multi", + }, + container: "DTTT_container ui-buttonset ui-buttonset-multi", + }); + } + }; + if (typeof(define) === "function" && define.amd) + { + define([ "jquery", "datatables" ], factory); + } + else if (typeof(exports) === "object") + { + // Node/CommonJS + factory(require("jquery"), require("datatables")); + } + else if (typeof(jQuery) !== "undefined") + { + factory($, $.fn.dataTable); + } +})(); From d7c5601a327ea26c0ca8ba5935bcfc4986abe2af Mon Sep 17 00:00:00 2001 From: null-d3v Date: Thu, 30 Oct 2014 11:19:57 -0500 Subject: [PATCH 4/5] Update dataTables.jqueryui.js --- integration/jqueryui/dataTables.jqueryui.js | 1 - 1 file changed, 1 deletion(-) diff --git a/integration/jqueryui/dataTables.jqueryui.js b/integration/jqueryui/dataTables.jqueryui.js index 1fa65c8..5739917 100644 --- a/integration/jqueryui/dataTables.jqueryui.js +++ b/integration/jqueryui/dataTables.jqueryui.js @@ -35,7 +35,6 @@ }); DataTable.defaults.oLanguage.oPaginate.sEllipsis = "..."; // TODO Base DT file needs to be updated with this. - // Unsure if this is necessary with header and pageButton render functions. $.extend(DataTable.ext.classes, { sFilterInput: "ui-corner-all", From e27580ec3f97cc1ac7342a2c2842d6eaebc192e3 Mon Sep 17 00:00:00 2001 From: null-d3v Date: Thu, 30 Oct 2014 14:54:04 -0500 Subject: [PATCH 5/5] Update dataTables.jqueryui.js --- integration/jqueryui/dataTables.jqueryui.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/integration/jqueryui/dataTables.jqueryui.js b/integration/jqueryui/dataTables.jqueryui.js index 5739917..aca9974 100644 --- a/integration/jqueryui/dataTables.jqueryui.js +++ b/integration/jqueryui/dataTables.jqueryui.js @@ -16,16 +16,6 @@ { "use strict"; - var originalDataTable = $.fn.DataTable; - $.fn.DataTable = function(options) - { - var dataTable = originalDataTable.apply(this, [ options ]); - - $(dataTable.table().container()).addClass("ui-widget"); - - return dataTable; - }; - $.extend(true, DataTable.defaults, { dom: "<'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr'lfr>" + @@ -53,7 +43,7 @@ sSortableDesc: "sorting_desc_disabled ui-state-default", sSortableNone: "sorting_disabled ui-state-default", sSortIcon: "DataTables_sort_icon", - sWrapper: "dataTables_wrapper dt-jqueryui", + sWrapper: "dataTables_wrapper dt-jqueryui ui-widget", }); DataTable.ext.renderer.header.jqueryui = function(settings, $tableHead, column, classes)