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

时间：2018-02-06 07:00:38

标签： jquery html css datatable

我使用此示例作为参考： 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

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

1 个答案:

答案 0 :(得分：0)

检查下面，在其他js文件之前添加jquery，确保在表标记内添加table-responsive类，确保使用外部文件正确的顺序，最后由于响应功能，加上按钮带有较小的显示。 / p> 

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

相关问题
最新问题