jquery - DataTables:更改选择器的框架、字体和对齐方式

标签 jquery html css datatables

我在从 DataTables 调整页面选择器时遇到问题。

我能够将背景颜色更改为黑色，但它周围的框架仍然是蓝色。与未选中页面的字体颜色和“下一步”按钮相同。

你能帮帮我吗？

JSFiddle 

td{
    padding: 3px !important;
}

.selector:checked{
background-color:black !important;
}

.pagination > li.active > a{
      background-color:black !important;
}

最佳答案

您还需要考虑按钮的聚焦状态:

$(document).ready(function() {

  $("#table1").DataTable({
    searching: false
  });
});
td {
  padding: 3px !important;
}

selector:checked {
  background-color: black !important;
}

.pagination>li.active>a {
  background-color: black !important;
}

.pagination>li>a:focus,
.pagination>li.active>a {
  outline-color: red;
  border-color:red;
}

.dataTables_paginate>.pagination>li:not(.active)>a{
  color: green;
}
<div class="dataTables_paginate paging_simple_numbers" id="table1_paginate">
  <ul class="pagination">
    <li class="paginate_button previous disabled" id="table1_previous"><a href="#" aria-controls="table1" data-dt-idx="0" tabindex="0">Previous</a></li>
    <li class="paginate_button active"><a href="#" aria-controls="table1" data-dt-idx="1" tabindex="0">1</a></li>
    <li class="paginate_button "><a href="#" aria-controls="table1" data-dt-idx="2" tabindex="0">2</a></li>
    <li class="paginate_button "><a href="#" aria-controls="table1" data-dt-idx="3" tabindex="0">3</a></li>
    <li class="paginate_button "><a href="#" aria-controls="table1" data-dt-idx="4" tabindex="0">4</a></li>
    <li class="paginate_button "><a href="#" aria-controls="table1" data-dt-idx="5" tabindex="0">5</a></li>
    <li class="paginate_button disabled" id="table1_ellipsis"><a href="#" aria-controls="table1" data-dt-idx="6" tabindex="0">…</a></li>
    <li class="paginate_button "><a href="#" aria-controls="table1" data-dt-idx="7" tabindex="0">20</a></li>
    <li class="paginate_button next" id="table1_next"><a href="#" aria-controls="table1" data-dt-idx="8" tabindex="0">Next</a></li>
  </ul>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>





<title>Table</title>

<body>
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">

      <!--  		<div class="navbar-header">
		<a class="navbar-brand" href="#">Overview</a>
		</div> -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Overview</a></li>
        <li class="inactive"><a href="#">example</a></li>
      </ul>
    </div>
  </nav>

  <div class="container-fluid">
    <table id="table1" class="table table-striped table-bordered" cellspacing="0" width="50">
      <thead class="thead-inverse">

        <tr style="border-width: 1px">
          <th class="text-nowrap">example1</th>
          <th class="text-nowrap">example2</th>
          <th class="text-nowrap">example3</th>
          <th class="text-nowrap">example4</th>
          <th class="text-nowrap">example5</th>
        </tr>
      </thead>
      <tbody>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>
        <tr style="border-width: 1px;">
          <td>1</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Quisque facilisis condimentum massa, mollis interdum dui maximus in.</td>
          <td>Aliquam interdum est vel ligula tempor pellentesque.</td>
          <td> Quisque mattis ligula ultrices libero malesuada pulvinar</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>2</td>
          <td>vel ultrices sem sodales at</td>
          <td>Vestibulum nulla tortor, rhoncus quis quam quis, tempus ultrices leo.</td>
          <td>Cras accumsan accumsan elit sit amet posuere</td>
          <td>Praesent tempus libero lorem, vel ultrices sem sodales at</td>
        </tr>

        <tr style="border-width: 1px;">
          <td>3</td>
          <td>orem ipsum dolor sit amet, consectetur adipiscing elit</td>
          <td>Praesent tristique vitae orci eget interdum.</td>
          <td>Donec eu lorem faucibus, tempor leo a, maximus nibh.</td>
          <td> Sed ut venenatis ligula, eget faucibus sapien</td>
        </tr>





      </tbody>
    </table>
  </div>

</body>

</html>

关于jquery - DataTables:更改选择器的框架、字体和对齐方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45373445/

上一篇：java - 如果程序通过 jar 文件执行，则 html 变音符号无法正确呈现

下一篇：javascript - 更改具有相同功能的多个切换按钮标签之一 - polymer

相关文章：

javascript - partials 中包含的脚本在 ejs 中无法按预期工作

javascript - Bootstrap slider 不工作: slider is not a function

javascript - jQuery .height() 在 div 上输出与 .scrollHeight 相同的值并溢出 :auto (IE8)

html - 为 DIV 内容添加边框

css - *奇怪的行为*为什么字体大小超过宽度/高度

html - 将全屏尺寸图像作为自定义元素中的背景

jquery - 由于 <a> 标签上的显示 block ，fadeToggle() 在 chrome/safari 上失败

jquery - Django django-autocomplete-light 搜索不完整

php - 如果选中，jQuery 启用动态输入文本

javascript - 避免 document.write

©2024 IT工具网  联系我们