-
-
Save jonathasrochadesouza/709ae6f8aa5adfa28924f738c38af75b to your computer and use it in GitHub Desktop.
Example of how you can implement datatables in your project. Visit the official datatables page: https://datatables.net/manual/installation (Full Getting Started Guide)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title> Title </title> | |
| <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> | |
| </head> | |
| <body> | |
| <main> | |
| <table id="table_id" class="display datatable" > | |
| <thead> | |
| <tr> | |
| <th> Info_1 </th> | |
| <th> Info_2 </th> | |
| <th> Info_3 </th> | |
| <th> Info_4 </th> | |
| </tr> | |
| </thead> | |
| <tr> | |
| <td> Content </td> | |
| <td> Content </td> | |
| <td> Content </td> | |
| <td> Content </td> | |
| </tr> | |
| </table> | |
| </main> | |
| </body> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| $('table').DataTable({ | |
| language: { | |
| url: 'https://cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json' | |
| } | |
| }); | |
| }); | |
| </script> | |
| </html> |
datatables dark
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
body {
color: #fff;
text-align: center;
}
.modal-content {
background-color: #4E4E4E;
}
.modal-title {
color: #fff;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 750px;
}
}
input[type="search"] {
background-color: #0000006c;
color: #fff;
border-radius: .4rem;
margin-bottom: .4rem;
width: 15rem;
padding: .1rem .4rem;
}
th {
background-color: #257fb3;
}
th,
td,
tr {
font-family: 'Courier New', Courier, monospace;
text-align: center;
background-color: #212121;
color: #ffffffd7;
}
th:hover,
td:hover,
tr:hover {
background-color: #2b2a2a;
}
th {
color: #fff;
}
tr:nth-child(even) {
background-color: lightgray !important;
}
tr:hover {
background-color: #98dbbf !important;
}
table.dataTable {
margin: 0 auto;
}
table.dataTable tbody th,
table.dataTable tbody td {
padding: 8px 10px
}
table.dataTable.row-border tbody th,
table.dataTable.row-border tbody td,
table.dataTable.display tbody th,
table.dataTable.display tbody td {
border-top: 1px solid #fdfdfd79
}
table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
background-color: #212121
}
table.dataTable.display tbody tr.even>.sorting_1,
table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
background-color: #212121
}
table.dataTable.display tbody tr.even>.sorting_2,
table.dataTable.order-column.stripe tbody tr.even>.sorting_2 {
background-color: #212121
}
table.dataTable.display tbody tr.even>.sorting_3,
table.dataTable.order-column.stripe tbody tr.even>.sorting_3 {
background-color: #212121
}
table.dataTable.display tbody tr:hover>.sorting_1,
table.dataTable.order-column.hover tbody tr:hover>.sorting_1 {
background-color: #3f3f3f
}
table.dataTable.no-footer {
border-bottom: 1px solid #111
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
border: .5px solid #181818;
border-radius: .5rem;
margin-bottom: 2rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
color: #ffffff !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: #ffffff
}
.dataTables_wrapper .dataTables_info {
color: #e6e6e6;
}
@media screen and (max-width: 767px) {
html {
font-size: .74rem;
}
}