DataTables：更改选择器的框架，字体和对齐方式

时间：2017-07-28 12:23:46

标签： jquery html css datatables

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

我能够将背景颜色更改为黑色，但周围的框架仍为蓝色。与未选择的页面的字体颜色相同，＆＃34; Next＆＃34;按钮。

你能帮助我吗？

JSFiddle 

td{
    padding: 3px !important;
}

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

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

1 个答案:

答案 0 :(得分：1)

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

$(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>

相关问题
最新问题