Fatal编程技术网

Bootstrap table 引导表设计不起作用

Bootstrap table 引导表设计不起作用,bootstrap-table,Bootstrap Table,我正在尝试创建一个带有表格的网站。。我搜索模板并找到引导表设计。。。这个例子运行得非常好，但是如果我想在我自己的表上使用这个引导表javascript，它就不起作用了 以下是我的jsp代码： <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

我正在尝试创建一个带有表格的网站。。我搜索模板并找到引导表设计。。。这个例子运行得非常好，但是如果我想在我自己的表上使用这个引导表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函数将其所有方法应用于文档中所有具有data toggle=table的表。

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

Du brauchst nur einen引导脚本导入，wenn Du die actuelle Version von Bootstrap benuetzt。Zweitens引导导入kommt nach dem jQuery导入。如果使用的是最新的引导，则只需要一次引导导入。其次，引导引用必须遵循jQuery引用：最后，在table标签中使用Bootstrap table类：class=table.nice这是一个快速的man:D thx dude工作！您还需要对Bootstrap.css文件的引用。@user0815123-如果问题已解决，请接受答案和/或更新问题以包含解决方案使用标记添加粗体或页眉换行，以及--for，以帮助可读性。我也更喜欢更新标题，以包括已解决的问题，但不需要如此等等