File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/fc-4.1.0/fh-3.2.4/sc-2.0.7/datatables.min.css"/>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body style="max-height:800px">
    <div class="container">
      <div class="form-group row">
      <div class="col-lg-12">
      <table id="example" class="dt-table table table-striped table-bordered table-hover t-left">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>example 1</th>
            <th>Example 2</th>
            <th>Example 3</th>
            <th>Commts</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000125,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Mercadeo</td>
            <td>Example</td>
            <td>Example</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125,<br>ORT0000125,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          <tr>
            <td>Tiger Nixon</td>
            <td>ORT0000123,<br>ORT0000125</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>$3,120</td>
            <td>Example</td>
            <td>Example</td>
            <td>Mercadeo</td>
          </tr>
          
        </tbody>
      </table>
                      </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/fc-4.1.0/fh-3.2.4/sc-2.0.7/datatables.min.js"></script>
  </body>
</html>
CSSSaved
 
/* || Reset All */
​
html,
body {
    overflow: scroll !important;
    background-color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}
​
table {
    border-spacing: 0px !important;
    white-space: nowrap !important;
}
​
code {
    background-color: #eff2f3 !important;
}
​
/* || Fix Inspinia / Bootstrap */
​
.gray-bg {
    background: url(../../sources/img/bg/azul-bg.jpg);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
​
h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
​
.row {
    margin: 5px 0px !important;
}
​
.row.border-bottom {
    margin: 0px -10px !important;
}
​
[class^="col-"] {
    padding-right: 5px !important;
    padding-left: 5px !important;
}
​
[class^="col-"] .scroll-y-xs {
    height: 50px !important;
    overflow-y: scroll !important;
}
​
[class^="col-"] .scroll-y {
    height: 100px !important;
    overflow-y: scroll !important;
}
​
[class^="col-"] .scroll-y-lg {
    height: 150px !important;
    overflow-y: scroll !important;
}
​
[class^="col-"] .scroll-y-xl {
    height: 225px !important;
    overflow-y: scroll !important;
}
​
#page-wrapper {
    overflow-y: scroll !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}
​
.loginColumns {
    padding-top: 10% !important;
}
​
.navbar-brand-img > img {
    height: 100%;
    max-height: 50px;
    display: inline-block;
    vertical-align: middle;
}
​
.soft-menu > li > a {
    color: #000000 !important;
    padding: 20px 20px !important;
}
​
.soft-menu .dropdown-menu li a {
    padding: 3px 5px !important;
    min-height: 0;
}
​
.soft-menu .dropdown-menu a {
    padding: 3px 5px !important;
    min-height: 0;
    border-radius: 3px;
    color: inherit;
    line-height: 25px;
    margin: 4px;
    text-align: left;
    font-weight: normal;
    display: block;
}
​
.su-menu {
    min-width: 12rem !important;
}
​
.on-fav {
    color: #ff9900 !important;
}
​
body.fixed-nav #wrapper .navbar-static-side,
body.fixed-nav #wrapper #page-wrapper {
    margin-top: 62px !important;
    margin-bottom: 40px !important;
}
​
.metismenu#side-menu {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
​
body.canvas-menu.mini-navbar nav.navbar-static-side {
    width: 350px !important;
}
​
.nav > li > a {
    padding: 14px 14px 14px 14px;
}
​
.nav.nav-tabs li {
    background-color: #2f4f55 !important;
}
​
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
    color: #fff;
}
​
.sidebar-collapse > .nav > li > a {
    padding: 5px 10px 5px 10px !important;
}
​
.canvas-menu.mini-navbar .nav-second-level li a,
.fixed-sidebar.mini-navbar .nav-second-level li a {
    padding: 7px 10px 7px 30px;
}
​
.p-search {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}
​
.page-heading {
    border-top: 0;
    padding: 0;
    height: 40px;
}
​
#areatitle {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
​
#areatitle i {
    overflow: visible !important;
}
​
.wrapper-content {
    padding: 10px 0px 20px !important;
}
​
.title-action {
    padding: 0px !important;
    margin: 2px !important;
}
​
​
.ibox {
    margin-bottom: 5px !important;
}
​
.ibox-content {
    padding: 10px !important;
}
​
.form-group {
    margin-bottom: 0.5rem !important;
}
​
.form-control {
    font-size: 1rem;
}
​
.dropdown-menu-right {
    left: auto !important;
}
​
.footer.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2002;
    padding: 5px 10px;
    background: white;
    border-top: 1px solid #e7eaec;
}
​
.container-footer {
    max-width: none !important;
    width: 100% !important;
    height: 30px !important;
    line-height: 30px !important;
    vertical-align: middle !important;
    margin-right: unset;
    margin-left: unset;
    padding-right: unset;
    padding-left: unset;
}
​
.dropdown-divider {
    height: 1px;
    margin: 5px 15px 5px 15px;
    overflow: hidden;
    background-color: #2f4050;
    border-top: 1px solid #2f4050;
}
​
/* || Fix CSS Pluging */
​
.popover {
    z-index: 9999 !important;
}
​
/* || Add New Element and CSS */
​
.charging-lo {
    position: absolute;
    top: 3px;
    width: 100%;
    height: 100%;
    background-color: white;
    /*
    background: url(../../sources/img/bg/full-bg.jpg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    */
    z-index: 999999;
}
​
/* || Add New CSS and Pluging CSS */
​
.t-center {
    text-align: center !important;
}
​
.t-left {
    text-align: left !important;
}
​
.t-right {
    text-align: right !important;
}
​
.t-hover:hover {
    font-style: italic !important;
    text-decoration: underline !important;
    font-weight: 600
}
​
.pull-right {
    float: right !important;
}
​
.pull-right-f {
    float: right !important;
}
​
.pull-left {
    float: left !important;
}
​
.hidden {
    display: none !important;
}
​
.limit-text-xxxs {
    max-width: 15ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
​
.limit-text-xxs {
    max-width: 25ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
​
.limit-text-xs {
    max-width: 50ch !important;
    text-overflow: ellipsis !important;
}
​
.limit-text {
    max-width: 75ch !important;
    text-overflow: ellipsis !important;
}
​
.limit-text-md {
    max-width: 100ch !important;
    text-overflow: ellipsis !important;
}
​
.limit-text-lg {
    max-width: 150ch !important;
    text-overflow: ellipsis !important;
}
​
.print-box,
.close-link,
.calculator-link,
.gen-print {
    /*display: none;*/
}
​
.bad-pattern {
    border-width: 3px !important;
    background-color: #FF5733 !important;
    border-color: #da291c !important;
    color: white !important;
    font-weight: bold !important;
}
​
.bad-pattern::placeholder {
    color: white !important;
}
​
/* pluging calendar */
​
div.calendar-plug-bs td {
    /* background-color: #FF5733; */
    /* color:white; */
    font-weight: bold;
}
​
td.checked {
    background-color: #1ab394 !important;
    color: white;
    font-weight: bold;
}
​
​
/* || Fix Elemetos de Formularios y Botones */
​
select, select option {
    background: #000000 !important;
    color: #ffffff !important;
}
​
​
input:read-only,
input:disabled {
    color: #fc0000 !important;
    font-weight: bold !important;
}
​
input:not([readonly]):not([name="input_search"]):not([type='button']):not(.bad-pattern) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-width: 3px;
    border-color: #000000 !important;
}
​
input:not([readonly]):not([name="input_search"]):not([type='button']):focus {
    border-color: #1ab394 !important;
}
​
input[name="input_search"] {
    border-color: #1c84c6 !important;
    font-size: 1rem !important;
}
​
input[name="input_search"],
input[name="input_search"]:focus {
    background-color: #1c84c6 !important;
    color: #ffffff !important;
}
​
input[name="input_search"]::placeholder {
    font-weight: bold !important;
    color: #ffffff !important;
}
​
input.s-xs {
    max-width: 50px !important;
}
​
input.s-md {
    max-width: 75px !important;
}
​
input.s-lg {
    max-width: 125px !important;
}
​
[class^="col-"] > .i-checks {
    margin-top: 6px !important;
}
​
[class^="col-"] > .i-checks > label {
    margin-bottom: 0 !important;
}
​
.i-checks {
    display: inline-block !important;
    float: left !important;
    padding-right: 0.2rem !important;
}
​
.hr-custom {
    border-top: 1px solid #e7eaec !important;
    color: #ffffff;
    background-color: #ffffff
}
​
.hr-custom::before,
.hr-custom::after {
    content: '' !important;
    flex: 1 !important;
    border-top: 1px solid #e7eaec !important;
    color: #ffffff;
    background-color: #ffffff
}
​
.hr-custom::before {
    margin-right: .25em !important;
}
​
.hr-custom::after {
    margin-left: .25em !important;
}
​
.hr-dashed {
    border-top: 1px dashed #e7eaec !important;
    color: #ffffff;
    background-color: #ffffff
}
​
.hr-dashed::before,
.hr-dashed::after {
    content: '' !important;
    flex: 1 !important;
    border-top: 1px dashed #e7eaec !important;
    color: #ffffff;
    background-color: #ffffff
}
​
.hr-dashed::before {
    margin-right: .25em !important;
}
​
.hr-dashed::after {
    margin-left: .25em !important;
}
​
/* FIX Select2 - Bootstrap theme (Form and Table) */
td > .select2-container {
    /*display: flex !important;*/
}
​
td > .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 1.8rem !important;
    color: #ffffff !important;
}
​
td > .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + .75rem - 3px) !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}
​
[class^="col-"] > .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 35px !important;
}
​
[class^="col-"] > .select2-container--bootstrap4 .select2-selection--single {
    height: 35px !important;
}
​
.select2-container--bootstrap4 .select2-dropdown {
    border: 1px solid #aaa !important;
}
​
.select2-results__options {
    /*.mySelect2 .select2-container--classic .select2-results > .select2-results__options {*/
    max-height: 200px !important;
    overflow-y: scroll !important;
    /*}*/
}
​
.modal-content {
    border-radius: 0.4rem;
}
​
.modal {
    overflow-y: auto !important;
}
​
.inmodal .modal-header {
    padding: 15px 15px !important;
}
​
.bounceInRight {
    animation-duration: 0.25s;
}
​
/* || Fix Custom de Tabla */
​
.table > tbody > tr > td {
    padding: 2px 2px 2px 4px !important;
    line-height: 30px !important;
    vertical-align: middle !important;
}
​
.html5buttons button {
    border: 1px solid #e7eaec;
    background: #fff;
    color: #000000;
    box-shadow: none;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: bold !important;
}
​
.html5buttons button:hover,
.html5buttons button:focus:active {
    background-color: #eee;
    color: inherit;
    border-color: #d2d2d2;
}
​
div.dt-button-collection .dropdown-menu,
div.dt-button-collection .dropdown-menu .dropdown-item {
    min-width: 125% !important;
}
​
/* Fix Select Datatable */
​
label > select.custom-select.custom-select-sm.form-control.form-control-sm {
    width: 75px !important;
    line-height: 1.5 !important;
    background-clip: padding-box !important;
    -webkit-appearance: menulist !important;
    font-size: 0.9rem !important;
}
​
/* || Fix Elementos de formularios en Tablas */
​
.t-input {
    height: calc(1.5em + .75rem - 1px) !important;
    min-width: 110px !important;
    padding: 6px 3px !important;
    float: left !important;
    display: flex !important;
}
​
.t-input-hxs {
    min-width: 50px !important;
}
​
.t-input-hsm {
    min-width: 75px !important;
}
​
.t-input-hlg {
    min-width: 300px !important;
}
​
.t-input-mxs {
    max-width: 50px !important;
}
​
.t-input-msm {
    max-width: 75px !important;
}
​
.t-input-mlg {
    max-width: 300px !important;
}
​
.tf-hidde {
    display: none !important;
}
​
td > .input-group {
    flex-wrap: nowrap !important;
}
​
td > div.date > input {
    min-width: 120px !important;
    width: 120px !important;
    padding: 6px 8px !important;
}
​
td > div.time > input {
    min-width: 90px !important;
    width: 90px !important;
    padding: 6px 8px !important;
}
​
td > button {
    position: flex !important;
    line-height: 0.95 !important;
    width: 100% !important;
}
​
td > .i-checks {
    display: flex !important;
}
​
td > .i-checks > label {
    margin-bottom: 0 !important;
}
​
td > .i-checks > label > .icheckbox_square,
td > .i-checks > label > .iradio_square {
    display: flex !important;
}
​
.t-label {
    margin-bottom: 0 !important;
}
​
.text-green {
    color: #405824 !important;
}
​
​
/* || Elementos Nuevos */
​
.blink-xs {
    color: red !important;
    animation: blinker 2s linear infinite !important;
}
​
.blink {
    color: red !important;
    font-size: 26px !important;
    animation: blinker 2s linear infinite !important;
}
​
.hammer {
    animation: hammer 2s linear !important;
}
​
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
​
@keyframes hammer {
    0% {
        transform: rotateY(0deg);
    }
​
    100% {
        transform: rotateY(360deg);
    }
}
​
.section {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    border: 3px solid #428bca;
}
​
.ibox-column {
    border: 2px solid black;
}
​
.ibox-title-column,
.ibox-content-column,
.ibox-footer-column {
    padding: 4px 4px 4px 4px;
    min-height: 30px;
}
​
.ibox-footer-column {
    font-size: 12px;
}
​
.ibox-footer-column > .form-group.row {
    margin: 0px 0px !important;
}
​
.ibox-footer-column > .form-group.row > [class^="col-"] > input {
    font-size: 0.80rem !important;
    height: 28px !important;
}
​
/* fix file plugin elements */
​
.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}
​
.custom-file-label::after {
    content: "Buscar";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0;
    text-align: center;
    vertical-align: middle;
}
JavaScriptSaved
 
​
/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#bs4/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-html5-1.6.1/b-print-1.6.1/fc-3.3.0/fh-3.1.6/sc-2.0.1
 *
 * Included libraries:
 *   JSZip 2.5.0, pdfmake 0.1.36, DataTables 1.10.20, Buttons 1.6.1, Column visibility 1.6.1, HTML5 export 1.6.1, Print view 1.6.1, FixedColumns 3.3.0, FixedHeader 3.1.6, Scroller 2.0.1
 */
​
$(document).ready( function () {
  var table = $('#example').DataTable({
    paging: false,
                                ordering: false,
                                info: false,
                                searching: true,
                                autoWidth: false,
                                scrollCollapse: true,
                                responsive: false,
                                scrollY: true,
                                scrollX: "50vh",
                                fixedColumns: {
                                    leftColumns: 0,
                                    rightColumns: 0,
                                },
                                dom: '<\"html5buttons\"B>lTfgitp',
                                "columnDefs": {searchable: false, targets: [10,11]},
                                "language": {
                                    "decimal": ".",
                                    "emptyTable": "No hay datos disponibles en la tabla",
                                    "info": "Mostrando _START_ a _END_ de _TOTAL_ Registros",
                                    "infoEmpty": "Mostrando 0 a 0 de 0 Registros",
                                    "infoFiltered": "(Filtrado a Partir de _MAX_ Registros)",
                                    "infoPostFix": "",
                                    "thousands": ",",
                                    "lengthMenu": "_MENU_",
                                    "loadingRecords": "Cargando...",
                                    "processing": "Procesando...",
                                    "search": "",
                                    "searchPlaceholder": "Search",
                                    "zeroRecords": "No Encontrado - lo siento",
                                    "paginate": {
                                        "first": "Inicio",
                                        "last": "Ultimo",
                                        "next": "Siguiente",
                                        "previous": "Anterior"
                                    },
                                    "aria": {
                                        "sortAscending": ": activar para ordenar la columna ascendente",
                                        "sortDescending": ": activar para ordenar la columna descendente"
                                    }
                                },
                                "iDisplayLength": -1,
                                "lengthMenu": [
                                    [5, 10, 25, 50, 100, 250, 500, 1000, -1],
                                    [5, 10, 25, 50, 100, 250, 500, 1000, "All"]
                                ],
                                buttons: [{
                                    extend: 'collection',
                                    text: '<i class="fas fa-cog"></i> Options',
                                    buttons: [{
                                        extend: 'copy',
                                        text: '<i class="fas fa-copy"></i> Copiar',
                                        title: function () {
                                            return window.GenFileNameExport();
                                        },
                                        exportOptions: {
                                            columns: ':visible',
                                            format: {
                                                body: function (data, row, column, node) {
                                                    data = $(node).clone('td');
                                                    data = CleanCellData(data);
                                                    return data;
                                                }
                                            }
                                        },
                                    }, {
                                        extend: 'excelHtml5',
                                        title: function () {
                                            return GenFileNameExport();
                                        },
                                        text: '<i class="fas fa-file-excel"></i> Excel',
                                        filename: function () {
                                            return GenFileNameExport();
                                        },
                                        exportOptions: {
                                            columns: ':visible',
                                            stripNewlines: false,
                                            format: {
                                                body: function (data, row, column, node) {
                                                    data = $(node).clone('td');
                                                    data = CleanCellData(data);
                                                    console.log(data);
                                                    return data;
                                                }
                                            }
                                        },
                                        customize: function (xlsx) {
                                            var styles = $('cellXfs', xlsx.xl['styles.xml']);
                                            styles.append('<xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyFont="1" applyFill="1" applyBorder="1" applyAlignment="1">' + '<alignment vertical="top" wrapText="1" />' + '</xf>');
                                            var sheet = xlsx.xl.worksheets['sheet1.xml'];
                                            var oxf = $('xf', xlsx.xl['styles.xml']);
                                            var styleIndex = oxf.length;
                                            $('row c', sheet).each(function () {
                                                var value = $('is t', this).text();
                                                //console.log(value);
                                                var count = (value.match(/\n/g) || []).length;
                                                console.log(count, value, styleIndex);
                                                if (count === 0) {
                                                    $(this).attr('s', styleIndex - 2);
                                                } else {
                                                    //['51', '56']
                                                    $(this).attr('s', [55, 50]);
                                                }
​
                                            });
                                            $('row:first c', sheet).attr('s', 32);
                                        }
                                    }, {
                                        extend: 'pdfHtml5',
                                        title: function () {
                                            return GenFileNameExport();
                                        },
                                        filename: function () {
                                            return GenFileNameExport();
                                        },
                                        text: '<i class="fas fa-file-pdf"></i> PDF',
                                        orientation: 'landscape',
                                        pageSize: 'LEGAL',
                                        exportOptions: {
                                            columns: ':visible',
                                            stripNewlines: false,
                                            format: {
                                                body: function (data, row, column, node) {
                                                    data = $(node).clone('td');
                                                    data = CleanCellData(data);
                                                    return data;
                                                }
                                            }
                                        },
                                    }, {
                                        extend: 'print',
                                        text: '<i class="fas fa-print"></i> Imprimir',
                                        title: function () {
                                            return GenFileNameExport();
                                        },
                                        customize: function (win) {
                                            $(win.document.body).addClass('white-bg');
                                            $(win.document.body).css('font-size', '10px');
                                            $(win.document.body).find('table').addClass('compact').css('font-size', 'inherit');
                                        },
                                        exportOptions: {
                                            columns: ':visible',
                                            format: {
                                                body: function (data, row, column, node) {
                                                    data = $(node).clone('td');
                                                    data = CleanCellData(data);
                                                    return data;
                                                }
                                            }
                                        },
                                    }, {
                                        text: '<i class="fas fa-question-circle"></i> Ayuda',
                                        action: function (e, dt, node, config) {
                                          
                                            console.log("Show HELP");
                                        }
                                    },]
                                }, {
                                    extend: 'colvis',
                                    text: '<i class="fas fa-eye-slash"></i> Ver Col.',
                                }],
                                "initComplete": function (oSettings) {
                                    var oTable = this;
                                    oTable.fnPageChange('last');
                                },
  });
  $('#example').DataTable().draw();
  $('#example').DataTable().columns.adjust();
} );
                                          
function CleanCellData(data)
{
    data = data.html();
    if (~data.indexOf(",<br> ")) {
        data = data.replace(/\,<br> /g, ",\r\n");
    }
    if (~data.indexOf(",<br>")) {
        data = data.replace(/\,<br>/g, ",\r\n");
    }
    if (~data.indexOf("<br> ")) {
        data = data.replace(/<br> /g, "\r\n");
    }
    if (~data.indexOf("<br>")) {
        data = data.replace(/<br>/g, '\r\n');
    }
    data = data.replace(/<[^>]*>/g, '');
    data = data.replace(/  +/g, ' ');
    data = data.replace(/(\r\n|\r|\n){2}/g, '$1').replace(/(\r\n|\r|\n){3,}/g, '$1\n');
    data = data.replace(/\&nbsp;/g, '');
    data = data.trim();       
    return data;
}
                                          
function GenFileNameExport(){
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers