bootstrap-table design not working

I'm trying to create a website with a table on it.. I search for templates and found the bootstrap-table design... the example is working perfectly fine but if I want to use this bootstrap-table-javascript on my own table its not working.

Here is my jsp code:

<%@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>

I thought the bootstrap-table.js-function applys all his methods on all tables in the document which have the data-toggle="table".

Solution

You need only one Bootstrap import if you are using the latest Bootstrap. Secondly, your Bootstrap reference must follow the jQuery reference. :) Lastly use the Bootstrap table class in the table tag: class="table". And you need a reference to the Bootstrap.css file.