更改数据表 CSS 功能答案

【问题标题】：Changing Datatables CSS functionality更改数据表 CSS 功能
【发布时间】：2011-07-08 19:42:21
【问题描述】：

我在弄清楚如何使用 jQuery 的 Datatables 插件时遇到了麻烦，因为我需要例如如果有 3 个编号的页面链接，它们也会有第一个、上一个、下一个、最后一个链接。如果您在第 1 页，那么第一个，上一个按钮应该只应用 pagination_button_disabled css，但它也有分页按钮，然后是第一个或上一个 css 样式。如果您在第 1 页，我只希望第一个和最后一个具有 paginate_button_disabled 的 css 样式，并且如果您在第 3 页显然受到尊敬，那么应该禁用 Last 和 Next。

【问题讨论】：

我很确定这已经是 DataTables 的核心功能。你确定你导入了 DataTables 的结构 css 文件吗？ jquery.dataTables.css

标签： jquery datatables

【解决方案1】：

嗯，可能是这样的：

var currentPage = parseInt($(...).text(), 10);
var totalPages = parseInt($(...).text(), 10);
$(".page").removeClass("pagination_button_disabled"); //Enable all initially
if(currentPage == 1){
  $("#first, #previous").addClass("pagination_button_disabled");
}
if(currentPage == totalPages){
  $("#last, #next").addClass("pagination_button_disabled");
}

希望这会有所帮助。干杯

【讨论】：

谢谢，但是应该放在哪里呢？进入他或其他地方的那个主 js 文件？

【解决方案2】：

我认为即使他们有“paginate_button_disabled”类，也没有为该类定义 CSS（实际上所有 CSS 都是从“paging_full_numbers”类继承的）。我认为你应该定义一个 CSS 规则

.paging_full_numbers  .paginate_button_disabled{
    //put your rule for disabled content here
    color: gray;
}

加载数据表 CSS 后

编辑 - 我编辑了你的小提琴（我唯一修改的是我从 datatables.net 网站加载了数据表的源代码，因为你的脚本链接已损坏）。

我添加了这行css

.dataTables_paginate .paginate_button_disabled{
     display:none;   
}

并且禁用的按钮被隐藏。看这里：http://jsfiddle.net/F7GLm/2/

【讨论】：

我已经用这些规则设置了我的 paginate_button_disabled 类，但它仍然没有这样做。 kansasoutlawwrestling.com/manager/css/style.css
你能发布你的代码（css、html和javascript吗？）（如果你在jsfiddle.net上创建一个小提琴更好）。您使用的是什么版本的数据表？
我编辑了你的小提琴，它没有加载数据表的 js 脚本，因为路径是你服务器的本地路径。这有效：jsfiddle.net/F7GLm/2
这样（颜色一样，悬停没有影响）jsfiddle.net/F7GLm/4
元素从许多元素中接收样式“规则”。采用什么风格是通过复杂的评分系统计算出来的。当您有三个将样式应用于元素的类（类应用的所有样式“得分”十分）时，将应用最后一个样式，覆盖先前的声明。 CSS 是一门精确的科学，但很难掌握，有时反复试验是唯一的方法。