jquery datatable 美化

2019独角兽企业重金招聘Python工程师标准>>>

效果图

部分less代码

@pinet-screen-width: 2880;

.mixin-sorting(@bg) {
    &.sorting_1 {
        background-color: @bg;
        color: #3d8dc6;
        a {
            color: #3d8dc6;
        }
    }
    &.sorting_2 {
        background-color: @bg;
        color: #3d8dc6;
        a {
            color: #3d8dc6;
        }
    }
    &.sorting_3 {
        background-color: @bg;
        color: #3d8dc6;
        a {
            color: #3d8dc6;
        }
    }            
}

.datatable_res(@width) {
    .dataTables_wrapper.no-footer {
        border: 1px solid #eff0f2;
        border-radius: 7px;
        background: #ffffff;
        .dataTables_length {
            display: none;
        }
        .dataTables_filter {
            display: none;
        }
        .dataTables_paginate {
            padding-top: 20px / @pinet-screen-width * @width;
            padding-bottom: 20px / @pinet-screen-width * @width;
            padding-right: 10px / @pinet-screen-width * @width;
        }
    }

    table.dataTable {
        thead,tbody {
            tr {
                th,td {
                    padding-top: 0;
                    padding-bottom: 0;
                    height: 80px / 2880 * @width;
                    line-height: 126px / 2880 * @width;
                }
                th {
                    line-height: 126px / 2880 * @width;
                }
            }
            tr.datatable-iframe-container {
                padding: 0;
                height: 0;
                td {
                    padding: 0;
                    height: 0;
                    border: 0;
                    iframe {
                        display: none;
                        width: 100%;
                        height: 450px;
                        background: transparent;
                    }                
                }
                border: 0;
            }            
        }
    }    

    table.dataTable.no-footer {
        border-bottom: 1px solid #e3e3e3; 
    }

    table.dataTable.display {
        thead {
            .sorting,
            .sorting_asc,
            .sorting_desc,
            .sorting_asc_disabled,
            .sorting_desc_disabled {
                background: none;
            }
            .sorting_asc,
            .sorting_desc {
                color: #3d8dc6;
            }                        
            th {
                background-color: #ffffff;
                text-align: center;
                  border-bottom: 1px solid #e3e3e3;                
            }
        }
        tbody {
            tr {
                td {
                    text-align: center;
                    color: #777d85;                    
                    a {
                        color: #777d85;
                    }
                    &:first-child {
                        text-align: left;
                    }
                }
            }
            tr.odd, tr.even {
                td { 
                    background-color: #fafafa;
                    .mixin-sorting(#fafafa);    
                }
                &:hover {
                    td {
                        background-color: #ffffff;
                        .mixin-sorting(#ffffff);    
                    }                    
                }
            }
            tr.ui-selected {
                td { 
                    background-color: #21bbe8;
                    .mixin-sorting(#21bbe8);
                }
                &:hover {
                    td {
                        background-color: #5fd3f4;
                        .mixin-sorting(#5fd3f4);                    
                    }                    
                }
            }                
        }    
    }

    .datatable-toggle {
        margin-left: 20px;
        border-radius: 50%;
        border-color: transparent;
        background: #e7eaeb;
        .glyphicon {
            color: #ffffff;
            margin-top: 4px;
            font-size: 18px;
        }
        &:hover {
            border-color: transparent;
        }
    }
}

@media screen and (min-width: 1440px) {
    .datatable_res(1440px);
}

@media screen and (min-width: 1920px) {
    .datatable_res(1920px);
}

转载于:https://my.oschina.net/u/1421356/blog/308480