Estoy usando el plugin datatable de jquery
Nota: no hace falta ver todo el marcado HTML, agregue varias files a mi tabla con el objetivo de mostrar mas de un numero de pagina.
Solo estoy usando la funcionalidad de ordenado y filtro, por mi cuenta estoy estilizando el datatable, los link de paginacion, la tabla y los filtros.
El problema que tengo es que cuando hago click en un link de paginacion, los estilos que he agregado a los links de paginacion desaparecen.
He intentado usar !important para que mis estilos ganen en especificidad pero no funciona y deseo estilizar yo el datatable.
Aquí esta mi código, si hacen click en un enlace de paginacion o en los encabezados de las columnas, los estilos de mis enlaces de paginacion desaparecen.
¿Como puedo hacer que mis estilos puedan seguir aplicándose incluso cuando se da la situacion en la que se hace click en los enlaces de paginacion o en los encabezados de columna?
body {
display: flex;
margin: 0;
padding: 0;
padding-left: 1rem;
padding-right: 1rem;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffffff;
font-family: san-serif;
}
.table-box {
width: 890px;
height: 400px;
overflow-y: scroll;
box-shadow: 0 10px 100px rgba(0, 0, 0, 0.5);
margin-left: auto;
margin-right: auto;
}
table {
width: 100%;
}
table,
th,
td {
border: 1px solid #005277;
border-collapse: collapse;
}
tr th:nth-child(1) {
backround-color: pink;
}
th {
background-color: #1e305b;
color: white;
}
th,
td {
padding: 10px;
}
thead {
position: sticky;
top: 0;
}
.news-section {
display: grid;
grid-template-rows: ""
}
.filter-controls-wrapper {
margin-bottom: 16px;
display: flex;
justify-content: flex-end;
}
input[type="search"] {
border: 1px solid transparent;
border-radius: 2rem;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 16px;
padding-top: 16px;
padding-bottom: 16px;
transition: 0.2s border-color ease-in-out;
}
* {
font-family: 'Source Sans Pro', sans-serif;
}
label {
font-size: 24px;
}
input[type="search"]:focus {
border-color: navy;
}
/*PAgination here*/
.label-page {
width: 80px ;
height: 25px ;
margin: 0 10px ;
border-radius: 999px ;
background: crimson ;
cursor: pointer;
box-shadow:
0 5px 5px -5px rgba(crimson, 0.15),
0 10px 10px -5px rgba(crimson, 0.15),
0 15px 15px -5px rgba(crimson, 0.15),
0 20px 20px -5px rgba(crimson, 0.15) ;
transition: 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
padding: 10px;
}
[id*="toggle-"]:hover{
width: 120px;
}
.dataTables_paginate {
margin-top: 16px;
display: flex;
justify-content: center;
align-items: center;
}
.dataTables_paginate span{
display: flex;
justify-content: center;
align-items: center;
}
<table id="news">
<thead>
<tr>
<th>Titulo</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>
<a href="#"><span class="fa fa-edit"></span></a>
<a href="#"><span class="fa fa-eye-slash"></span></a>
<a href="#"><span class="fa fa-trash"></span></a>
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>
<a href="#"><span class="fa fa-edit"></span></a>
<a href="#"><span class="fa fa-eye-slash"></span></a>
<a href="#"><span class="fa fa-trash"></span></a>
</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>6</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>41</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>55</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>6</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>2</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js"></script>
<script>
$(document).ready(function () {
$.fn.DataTable.ext.pager.numbers_length = 5
$('#news').DataTable({
rowReorder: true,
dom: '<<"filter-controls-wrapper"f><"table-box" t><"pagination-wrapper"p>>'
});
let paginationElements = document.querySelectorAll("#news_paginate > span .paginate_button");
paginationElements.forEach(function (value, key, nodeList) {
value.setAttribute("class", "label-page")
value.setAttribute("id","toggle-" + key)
})
// window.filterControls.appendChild(window.filterOptions);
// window.paginationControl.appendChild(window.paginationOptions);
});
</script>