注:不必查看所有HTML代码,因为我要显示很多页面来描述我的问题,所以它很大。
我仅使用数据表的过滤和分页功能,我不需要样式,我想为我自己放置样式。但是我有一个问题,当我单击一些分页链接或标题进行排序时,我放在分页链接上的样式都不见了,我也不知道为什么。
我尝试为样式添加!important关键字以赢得特殊性,但这不起作用。
单击时是否有某些样式无法重置的方法?
这是我的代码,样式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>
问题是您更改了分页按钮的类并将样式应用于此“自定义”类。这只能用一次,因为每次您导航时数据表都会重新绘制按钮,并且自定义类消失。
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)
})
删除整个代码块并将样式应用于默认的.pagination_button
,可以解决您的问题。
$(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>>'
});
// 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*/
span .paginate_button {
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>