Question

我正在尝试创建一个带有表格的网站..我搜索模板并找到了bootstrap-table设计......示例工作得很好但是如果我想使用这个bootstrap-table-javascript在我自己的桌子上它不起作用。

这是我的jsp代码：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test</title>

        <!-- Scriptimporte: -->
        <script src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script>
        <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
        <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>


        <!-- Tabellenpflege mit XML-Datei -->
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
        <c:import var="bookInfo" url="tables/xml_doc.xml"/>
        <x:parse xml="${bookInfo}" var="output"/>

        <!-- css-Dateien -->
        ...


    </head>
    <body>
        <div id="start_header">

            <div id="start_logo"><img src="icons/logo.jpg" alt="" /></div>


        </div>
        <h1>Test</h1>
        <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">           
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="#"><svg class="glyph stroked home"><use xlink:href="#stroked-home"></use></svg></a></li>
                <li class="active">Icons</li>
            </ol>
        </div><!--/.row-->

        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Tables</h1>
            </div>
                </div><!--/.row-->
                <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                                    <div class="panel-heading"><h2>Testlist</h2></div>
                    <div class="panel-body">
                        <table data-toggle="table"  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">

                                                    <thead>
                                                    <tr>
                                                        <th data-field="id" data-sortable="true">ID</th>
                                                        <th data-field="name"  data-sortable="true">Name</th>
                                <th data-field="price" data-sortable="true">Durchwahl</th>
                                                        <th data-field="present" data-sortable="true">Anwesend</th>
                            </tr>
                                                    </thead>

                                                    <tbody>


                                                        <x:forEach var="test" select="$output/books/book">
                                                            <tr>

                                                                <td>
                                                                   1
                                                                </td>
                                                                <td>
                                                                    <x:out select="name" />
                                                                </td>
                                                                <td>
                                                                    <x:out select="nr" />
                                                                </td>
                                                                <td>
                                                                    ja
                                                                </td>    
                                                            </tr>   
                                                        </x:forEach>
                                                    </tbody>
                        </table>
                    </div>
                </div>
            </div>
                </div><!--/.row-->  
        </div><!--/.main-->

    </body>
</html>

我认为bootstrap-table.js-function将所有方法应用于文档中具有data-toggle =“table”的所有表。

Answer 1

如果您使用的是最新的Bootstrap，则只需要一个Bootstrap导入。其次，您的Bootstrap引用必须遵循jQuery引用。 :)最后在表标记中使用Bootstrap表类：class =＆＃34; table＆＃34;。您需要引用Bootstrap.css文件。

bootstrap-table设计不起作用

1 个答案: