1. дома
  2. Вопрос и ответ
  3. Почему плагин Bootstrap Table не работает в этом примере?

Почему плагин Bootstrap Table не работает в этом примере?

2014-12-10 2 views
0

Я пытаюсь использовать это Bootstrap Table с Bootstrap 2.3. Тем не менее, я не мог получить механизм сортировки этого плагина в таблице, которую я здесь, в то время как я выполнил все инструкции, упомянутые в Demos page своего веб-сайта.Почему плагин Bootstrap Table не работает в этом примере?

Так как я могу получить этот механизм сортировки, работающий в IE9?

Таблица должна сортироваться по первой колонке.

Код:

<table data-toggle="table" data-sort-name="id" data-sort-order="desc" > 
       <thead> 
        <tr> 
         <th data-field="id" data-sortable="true">Exercise</th> 
         <th class="text-center">Exercise Code</th> 
         <th class="text-center">Initiated by</th> 
         <th class="text-center">Initiated on</th> 
         <th class="text-center">Done by</th> 
         <th class="text-center">Q1</th> 
         <th class="text-center">Q2</th> 
         <th class="text-center">Q3</th> 
         <th class="text-center">Q4</th> 
         <th class="text-center"></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td> 
          John 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini" /> 
         </td> 
         <td>For Action 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Maria 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini" /> 
         </td> 
         <td>For Action 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini" /> 
         </td> 
         <td>For Action 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini" /> 
         </td> 
         <td>For Action 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini" /> 
         </td> 
         <td>For Action 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini" /> 
         </td> 
         <td>For Action 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini" /> 
         </td> 
         <td>For Action 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini" /> 
         </td> 
         <td>For Action 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini" /> 
         </td> 
         <td>For Action 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Sam 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini span1" /> 
         </td> 
         <td> 
          <input type="text" class="input-mini" /> 
         </td> 
         <td>For Action 
         </td> 
        </tr> 
       </tbody> 
      </table>

UPDATE

Вот что у меня в голове страницы: (Обратите внимание, что я занимаюсь разработкой приложений ASP.NET):

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" /> 
    <link href="bootstrap/css/custom_style.css" rel="stylesheet" /> 
    <link href="bootstrap/css/bootstrap-table.min.css" rel="stylesheet" /> 
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/bootstrap/js/jquery.min.js") %>"></script> 
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/bootstrap/js/bootstrap.js") %>"></script> 
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/bootstrap/js/bootstrap-table.min.js") %>"></script>

источник

2014-12-10 Technology Lover

+0

Вы говорите, что он не только в IE9? – isherwood

+0

Похоже, что они пытаются сортировать на основе пользовательского ввода. Я не думаю, что это правильное применение структуры. – Xogle

+0

, если вы хотите отсортировать вход пользователя, я думаю, вы измените поле ввода на обычный текст, когда пользователь закончил свою работу. – lv0gun9

ответ

0

Это хорошо работает. На мой взгляд, вы должны пропустить что-то за столом. Синтаксис сценария или ссылки или, возможно, заказ на импорт.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.4.0/bootstrap-table.min.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.4.0/bootstrap-table.min.js"></script> 
 

 
<table data-toggle="table" data-sort-name="id" data-sort-order="desc"> 
 
    <thead> 
 
    <tr> 
 
     <th data-field="id" data-sortable="true">Exercise</th> 
 
     <th class="text-center">Exercise Code</th> 
 
     <th class="text-center">Initiated by</th> 
 
     <th class="text-center">Initiated on</th> 
 
     <th class="text-center">Done by</th> 
 
     <th class="text-center">Q1</th> 
 
     <th class="text-center">Q2</th> 
 
     <th class="text-center">Q3</th> 
 
     <th class="text-center">Q4</th> 
 
     <th class="text-center"></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     John 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini" /> 
 
     </td> 
 
     <td>For Action 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Maria 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini" /> 
 
     </td> 
 
     <td>For Action 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini" /> 
 
     </td> 
 
     <td>For Action 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini" /> 
 
     </td> 
 
     <td>For Action 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini" /> 
 
     </td> 
 
     <td>For Action 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini" /> 
 
     </td> 
 
     <td>For Action 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini" /> 
 
     </td> 
 
     <td>For Action 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini" /> 
 
     </td> 
 
     <td>For Action 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini" /> 
 
     </td> 
 
     <td>For Action 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Sam 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini span1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="input-mini" /> 
 
     </td> 
 
     <td>For Action 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

источник

2014-12-10 21:03:00 lv0gun9

+0

Спасибо за помощь. Не могли бы вы проверить мой обновленный вопрос? Кроме того, обратите внимание, что я должен использовать Bootstrap 2.3 –

+0

Я не разработчик ASP. Можете ли вы показать код для моего фактического времени выполнения в браузере? После этого мы сможем решить это вместе. – lv0gun9

 Смежные вопросы

  • Нет связанных вопросов^_^