devoops icon indicating copy to clipboard operation
devoops copied to clipboard

DataTables don't import DT CSS

Open briansol opened this issue 11 years ago • 1 comments

I'm using a data table plugin feature using the devoops invocation code:

function LoadDataTablesScripts(callback){
    function LoadDatatables(){
        $.getScript('plugins/datatables/jquery.dataTables.js', function(){
            $.getScript('plugins/datatables/ZeroClipboard.js', function(){
                $.getScript('plugins/datatables/TableTools.js', function(){
                    $.getScript('plugins/datatables/dataTables.bootstrap.js', callback);                    
                });
            });
        });
    }
    if (!$.fn.dataTables){
    LoadDatatables();
     }
         else {
       if (callback && typeof(callback) === "function") {       
        callback();
       }
      }
}   

So, all the JS gets loaded, but the style that comes with the direct download, jquery.dataTables.min.css is not even included in the plugins folder.

Was this done on purpose? overlooked? Can we simply use a get call (not getScript ?) to include the css as well ? I'd like to implement some of the table styles that come with the DT package.

briansol avatar Dec 17 '14 16:12 briansol

Update, I see that DT says don't use their css when using bootstrap. I simply brought in the classes from their css file to the devoops.css file, altering them slightly to match the BS naming convention:

.table-compact thead th, .table-compact thead td{
    padding:5px 9px;
}
.table-compact tfoot th, .table-compact tfoot td{
    padding:5px 9px 3px 9px;
}
.table-compact tbody th, .table-compact tbody td{
    padding:4px 5px;
}
.dataTables_wrapper .dataTables_processing{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:70px;
    margin-left:-50%;
    margin-top:-25px;
    padding-top:10px;
text-align:center;
    font-size:1.5em;
    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%)
}

briansol avatar Dec 17 '14 19:12 briansol