Примечание: Не обязательно видеть весь код HTML, большой, потому что я хочу показать много страниц для описания моей проблемы.
Я использую только фильтр и функциональность разбивки на страницы для datatables, мне не нужны стили, я хочу поставить стили для себя. Но у меня есть проблема: когда я нажимаю на некоторые ссылки на страницы или заголовок для сортировки, стили, которые я ставлю на ссылки на страницы, исчезают, и я не знаю, почему.
Я пытался установить! важное ключевое слово для моих стилей выигрывает специфика, но это не работает.
Есть ли какой-нибудь метод для моих стилей, который не может быть сброшен при нажатии на него?
Вот мой код, стили html и инициализация плагина:
$(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);
});
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>
<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>
<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>
<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>
<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>
<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> <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>
<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>
<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>
<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>