nnmware / devoops

DevOOPS Bootstrap 3 Admin theme
GNU General Public License v3.0
852 stars 416 forks source link

DataTables don't import DT CSS #28

Open briansol opened 9 years ago

briansol commented 9 years ago

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 commented 9 years ago

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%)
}