Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataTables don't import DT CSS #28

Open
briansol opened this issue Dec 17, 2014 · 1 comment
Open

DataTables don't import DT CSS #28

briansol opened this issue Dec 17, 2014 · 1 comment

Comments

@briansol
Copy link

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant