title: bootstrap-table design not working
body: <p>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.</p>
  
  <p>Here is my jsp code:</p>
  
  <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;Test&lt;/title&gt;
  
          &lt;!-- Scriptimporte: --&gt;
          &lt;script src="${pageContext.request.contextPath}/js/bootstrap-table.js"&gt;&lt;/script&gt;
          &lt;script src="${pageContext.request.contextPath}/js/bootstrap.js"&gt;&lt;/script&gt;
          &lt;script src="${pageContext.request.contextPath}/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  
  
          &lt;!-- Tabellenpflege mit XML-Datei --&gt;
          &lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %&gt;
          &lt;%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %&gt;
          &lt;c:import var="bookInfo" url="tables/xml_doc.xml"/&gt;
          &lt;x:parse xml="${bookInfo}" var="output"/&gt;
  
          &lt;!-- css-Dateien --&gt;
          ...
  
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="start_header"&gt;
  
              &lt;div id="start_logo"&gt;&lt;img src="icons/logo.jpg" alt="" /&gt;&lt;/div&gt;
  
  
          &lt;/div&gt;
          &lt;h1&gt;Test&lt;/h1&gt;
          &lt;div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main"&gt;           
          &lt;div class="row"&gt;
              &lt;ol class="breadcrumb"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;svg class="glyph stroked home"&gt;&lt;use xlink:href="#stroked-home"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="active"&gt;Icons&lt;/li&gt;
              &lt;/ol&gt;
          &lt;/div&gt;&lt;!--/.row--&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;h1 class="page-header"&gt;Tables&lt;/h1&gt;
              &lt;/div&gt;
                  &lt;/div&gt;&lt;!--/.row--&gt;
                  &lt;div class="row"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="panel panel-default"&gt;
                                      &lt;div class="panel-heading"&gt;&lt;h2&gt;Testlist&lt;/h2&gt;&lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;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"&gt;
  
                                                      &lt;thead&gt;
                                                      &lt;tr&gt;
                                                          &lt;th data-field="id" data-sortable="true"&gt;ID&lt;/th&gt;
                                                          &lt;th data-field="name"  data-sortable="true"&gt;Name&lt;/th&gt;
                                  &lt;th data-field="price" data-sortable="true"&gt;Durchwahl&lt;/th&gt;
                                                          &lt;th data-field="present" data-sortable="true"&gt;Anwesend&lt;/th&gt;
                              &lt;/tr&gt;
                                                      &lt;/thead&gt;
  
                                                      &lt;tbody&gt;
  
  
                                                          &lt;x:forEach var="test" select="$output/books/book"&gt;
                                                              &lt;tr&gt;
  
                                                                  &lt;td&gt;
                                                                     1
                                                                  &lt;/td&gt;
                                                                  &lt;td&gt;
                                                                      &lt;x:out select="name" /&gt;
                                                                  &lt;/td&gt;
                                                                  &lt;td&gt;
                                                                      &lt;x:out select="nr" /&gt;
                                                                  &lt;/td&gt;
                                                                  &lt;td&gt;
                                                                      ja
                                                                  &lt;/td&gt;    
                                                              &lt;/tr&gt;   
                                                          &lt;/x:forEach&gt;
                                                      &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                  &lt;/div&gt;&lt;!--/.row--&gt;  
          &lt;/div&gt;&lt;!--/.main--&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I thought the bootstrap-table.js-function applys all his methods on all tables in the document which have the data-toggle="table".</p>