使用数据表 api 未显示隐藏和显示按钮答案

【问题标题】：Hide and show button are not showing up using datatable api使用数据表 api 未显示隐藏和显示按钮
【发布时间】：2018-02-06 07:00:37
【问题描述】：

我使用这个例子作为参考： https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

但该按钮未显示。我已经尝试了许多数据表 API 的示例，但无法获得 + - 按钮。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" 
/> 

<link rel="stylesheet"
href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" 
/> 

<link rel="stylesheet"
href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.m
in.css" /> 




<meta name="description" content="Child Rows">
<title>ABC</title>
<style>

</style>


</head>
<body>



<div class="table-responsive">
    <table id="example" class="table table-striped table-bordered dt-
responsive nowrap" cellspacing="0" width="60%" align=center>
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
        </tr>


        <tr>
            <td>Lael</td>
            <td>Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
            <td>6733</td>
            <td>l.greer@datatables.net</td>
        </tr>
        <tr>
            <td>Jonas</td>
            <td>Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$86,500</td>
            <td>8196</td>
            <td>j.alexander@datatables.net</td>
        </tr>
        <tr>
            <td>Shad</td>
            <td>Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$183,000</td>
            <td>6373</td>
            <td>s.decker@datatables.net</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td>Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
            <td>5384</td>
            <td>m.bruce@datatables.net</td>
        </tr>
        <tr>
            <td>Donna</td>
            <td>Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
            <td>4226</td>
            <td>d.snider@datatables.net</td>
        </tr>
    </tbody>
 </table>
 </div>
 </body>
 <!-- /.modal -->

 <script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js">
 </script>
 <script type="text/javascript"
 src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

 <script type="text/javascript"  
 src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js">
  </script>

 <script 

 src="https://cdn.datatables.net/responsive/2.2.1/js/dataTa
 bles.responsive.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/responsive/2.2.1/js/responsive.bootstrap.min
.js"></script>

 <script>

 $(document).ready(function() {

$('#example').DataTable();
} );

    </script>

</html>

我已经包含了这个示例所需的所有 Javascript 库和 css，但仍然是同样的问题enter image description here

所有其他分页功能都可以正常工作，但无法显示子行的按钮。有人可以建议吗？

【问题讨论】：

+ 按钮带有响应式设计。您是否提到了响应式插件？
尝试给你的数据表一个width: 100px;

标签： jquery html css datatable

【解决方案1】：

检查下面，在其他 js 文件之前添加 jquery，确保在 table 标签内添加 table-responsive 类，确保使用外部文件正确的顺序，最后加号按钮由于响应特性而具有较小的显示。

$('#example').DataTable();

<!--External Js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>

<!--External CSS-->
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.min.css" rel="stylesheet"/>


<!--Table-->
<table id="example" class="table table-striped table-responsive table-bordered dt-
responsive nowrap" cellspacing="0" width="60%" align=center>
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
        </tr>


        <tr>
            <td>Lael</td>
            <td>Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
            <td>6733</td>
            <td>l.greer@datatables.net</td>
        </tr>
        <tr>
            <td>Jonas</td>
            <td>Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$86,500</td>
            <td>8196</td>
            <td>j.alexander@datatables.net</td>
        </tr>
        <tr>
            <td>Shad</td>
            <td>Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$183,000</td>
            <td>6373</td>
            <td>s.decker@datatables.net</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td>Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
            <td>5384</td>
            <td>m.bruce@datatables.net</td>
        </tr>
        <tr>
            <td>Donna</td>
            <td>Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
            <td>4226</td>
            <td>d.snider@datatables.net</td>
        </tr>
    </tbody>
 </table>

【讨论】：

感谢您的回答。我试过你提到的，但它仍然无法正常工作。我需要任何其他 Javascript 库
你能把准确的代码复制到新文件之一并测试
当我检查元素时，我的 responsive.bootstrap.min.js 似乎没有加载。
你好，我尝试在其他 js 文件之前添加 jquery，但是分页也失败了。
嗨，它现在开始工作，但是当我尝试最小化窗口时，只出现按钮。当我最大化它消失时，似乎是一些页面响应问题。