Merge pull request #23 from challgren/datatables1.10.4

Updating datatables to 1.10.4 and new DataTables bootstrap

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 {
+table.dataTable thead .sorting { background: url('../images/sort_both.png') no-repeat center right; }
-    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 {
+table.dataTable thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
-    background: url('../images/sort_asc.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 {
+table.dataTable thead > tr > th {
-    background: url('../images/sort_desc.png') no-repeat center right;
+    padding-left: 18px;
-}
+    padding-right: 18px;
-
-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 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.dataTable tbody tr.active td,
-.table tbody tr.active td,
+.table.dataTable tbody tr.active th {
-.table tbody tr.active th {
-    color: white;
     background-color: #08C;
+    color: white;
 }
 
-.table tbody tr.active:hover td,
+.table.dataTable tbody tr.active:hover td,
-.table tbody tr.active:hover th {
+.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.dataTable 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) th {
     background-color: #017ebc;
 }
 
@@ -136,11 +174,6 @@ table.DTTT_selectable tbody tr {
     cursor: pointer;
 }
 
-div.DTTT .btn {
-    font-size: 12px;
-    color: #333 !important;
-}
-
 div.DTTT .btn:hover {
     text-decoration: none !important;
 }
@@ -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 {
-div.DTTT_print_info.modal {
+    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_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;
+    margin-top: 0 !important;
+}
+
+
+/*
+ * FixedHeader styles
+ */
+div.FixedHeader_Cloned table {
+    margin: 0 !important
 }

js/plugins/dataTables/dataTables.bootstrap.js

@@ -1,25 +1,42 @@
+/*! 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, {
+$.extend( true, DataTable.defaults, {
-    "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>" + "t" + "<'row'<'col-sm-6'i><'col-sm-6'p>>",
+    dom:
-    "oLanguage": {
+        "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
-        "sLengthMenu": "_MENU_ records per page"
+        "<'row'<'col-sm-12'tr>>" +
-    }
+        "<'row'<'col-sm-6'i><'col-sm-6'p>>",
+    renderer: 'bootstrap'
 } );
 
 
 /* Default class modification */
-$.extend($.fn.dataTableExt.oStdClasses, {
+$.extend( DataTable.ext.classes, {
-    "sWrapper": "dataTables_wrapper form-inline",
+    sWrapper:      "dataTables_wrapper form-inline dt-bootstrap",
-    "sFilterInput": "form-control input-sm",
+    sFilterInput:  "form-control input-sm",
-    "sLengthSelect": "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
+/* Bootstrap paging button renderer */
-if ($.fn.dataTable.Api) {
+DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
-    $.fn.dataTable.defaults.renderer = 'bootstrap';
+    var api     = new DataTable.Api( settings );
-    $.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;
@@ -28,7 +45,7 @@ if ($.fn.dataTable.Api) {
         var i, ien, node, button;
         var clickHandler = function ( e ) {
             e.preventDefault();
-                if (e.data.action !== 'ellipsis') {
+            if ( !$(e.currentTarget).hasClass('disabled') ) {
                 api.page( e.data.action ).draw( false );
             }
         };
@@ -38,7 +55,8 @@ if ($.fn.dataTable.Api) {
 
             if ( $.isArray( button ) ) {
                 attach( container, button );
-                } else {
+            }
+            else {
                 btnDisplay = '';
                 btnClass = '';
 
@@ -84,7 +102,9 @@ if ($.fn.dataTable.Api) {
                             'class': classes.sPageButton+' '+btnClass,
                             'aria-controls': settings.sTableId,
                             'tabindex': settings.iTabIndex,
-                            'id': idx === 0 && typeof button === 'string' ? settings.sTableId + '_' + button : null
+                            'id': idx === 0 && typeof button === 'string' ?
+                                settings.sTableId +'_'+ button :
+                                null
                         } )
                         .append( $('<a>', {
                                 'href': '#'
@@ -94,9 +114,7 @@ if ($.fn.dataTable.Api) {
                         .appendTo( container );
 
                     settings.oApi._fnBindAction(
-                            node, {
+                        node, {action: button}, clickHandler
-                                action: button
-                            }, clickHandler
                     );
                 }
             }
@@ -107,113 +125,16 @@ if ($.fn.dataTable.Api) {
         $(host).empty().html('<ul class="pagination"/>').children('ul'),
         buttons
     );
-    }
-} else {
-    // Integration for 1.9-
-    $.fn.dataTable.defaults.sPaginationType = '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).append(
-                    '<ul class="pagination">' +
-                    '<li class="prev disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' +
-                    '<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </a></li>' +
-                    '</ul>'
-                );
-                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);
-
-                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;
-                }
-
-                for (i = 0, ien = an.length; i < ien; i++) {
-                    // Remove the middle elements
-                    $('li:gt(0)', an[i]).filter(':not(:last)').remove();
-
-                    // Add the new list items and their event handlers
-                    for (j = iStart; j <= iEnd; j++) {
-                        sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
-                        $('<li ' + sClass + '><a href="#">' + j + '</a></li>')
-                            .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');
-                    }
-                }
-            }
-        }
-    });
-}
 
 
 /*
  * 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 btn-default",
@@ -227,7 +148,7 @@ if ($.fn.DataTable.TableTools) {
             }
         },
         "print": {
-            "info": "DTTT_print_info modal"
+            "info": "DTTT_print_info"
         },
         "select": {
             "row": "active"
@@ -235,7 +156,7 @@ if ($.fn.DataTable.TableTools) {
     } );
 
     // Have the collection use a bootstrap compatible drop down
-    $.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
+    $.extend( true, DataTable.TableTools.DEFAULTS.oTags, {
         "collection": {
             "container": "ul",
             "button": "li",
@@ -243,3 +164,22 @@ if ($.fn.DataTable.TableTools) {
         }
     } );
 }
+
+}; // /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);