¿单击分页按钮或标题栏时如何停止JQuery数据表重置样式?

问题描述 投票:0回答:1

注:不必查看所有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>
javascript jquery html css datatables
1个回答
0
投票

问题是您更改了分页按钮的类并将样式应用于此“自定义”类。这只能用一次,因为每次您导航时数据表都会重新绘制按钮,并且自定义类消失。

    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>
© www.soinside.com 2019 - 2024. All rights reserved.