数据表分页按钮出现在第二页但不在第一页答案

【问题标题】：DataTables Pagination buttons appear on 2nd page but not in 1st数据表分页按钮出现在第二页但不在第一页
【发布时间】：2017-07-10 15:11:40
【问题描述】：

我正在使用带有自定义分页按钮的DataTables。我正在使用 CSS 将分页按钮设置为背景属性。按钮在第二页上正确显示，但在第一页上，第一页和上一个按钮消失了，但是当我单击下一个按钮时，第一页和上一个按钮会出现。

首页（页面加载时）

第二页（出现所有按钮）

第三页（按钮再次消失）

我希望他们一直在那里。我怎样才能做到这一点。

jQuery

var table = $('#esignTable').DataTable({"sDom": '<"top"flp>rt<"bottom"i><"clear">',
      pagingType: 'input',
      pageLength: 10,
      language: {
        "sEmptyTable": " ",
        oPaginate: {
            "sNext": ' ',
            "sPrevious": ' ',
            "sFirst": ' ',
            "sLast": ' ',
        }
      }   
    });

CSS

.next {
   background: url(../images/integration/SlowRight.jpg);
}

.previous { 
   background: url(../images/integration/SlowLeft.jpg);
}

.first { 
   background: url(../images/integration/FastLeft.jpg);
}

.last {
   background: url(../images/integration/FastRight.jpg);
}

如果我在 CSS 中做错了什么，请告诉我

谢谢

【问题讨论】：

这在分页中很常见，但如果你想改变它，我认为你必须提供你自己的 html 并使用数据表函数来回/来回。 datatables.net/reference/api/page()

标签： jquery html css datatables

【解决方案1】：

将!important 添加到您的规则或使用更具体的 CSS 规则。

例如：

.next {
   background: url(../images/integration/SlowRight.jpg) !important;
}

.previous { 
   background: url(../images/integration/SlowLeft.jpg) !important;
}

.first { 
   background: url(../images/integration/FastLeft.jpg) !important;
}

.last {
   background: url(../images/integration/FastRight.jpg) !important;
}

有关代码和演示，请参阅this example。

【讨论】：