부트 스트랩 테이블 플러그인이이 예제를 작동하지 않는 이유는 무엇입니까?

이 Bootstrap Table을 부트 스트랩 2.3과 함께 사용하려고합니다. 그러나 나는 웹 사이트의 Demos page에 언급 된 모든 지침을 따르는 동안 내가 가지고있는 테이블에서이 플러그인의 정렬 메커니즘을 얻을 수 없었다.부트 스트랩 테이블 플러그인이이 예제를 작동하지 않는 이유는 무엇입니까?

IE9에서이 정렬 메커니즘을 어떻게 사용할 수 있습니까?

테이블은 첫 번째 열을 통해 정렬되어야합니다.

코드 : (내가 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>

<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 여기

내가 페이지의 머리가 무슨

출처

2014-12-10 Technology Lover

당신은 단지 IE9에 실패하는 건가요? – isherwood

사용자 입력을 기반으로 정렬하려고하는 것처럼 보입니다. 나는 이것이 그 틀의 올바른 적용이라고 생각하지 않는다. – Xogle

사용자 입력을 정렬하려면 사용자가 작업을 마쳤을 때 입력 필드를 일반 텍스트로 변경해야한다고 생각합니다. – lv0gun9

잘 작동합니다. 내 의견으로는, 당신은 테이블 위에 무엇인가 놓쳤습니다. 스크립트 또는 링크 구문 또는 가져 오기 순서 일 수 있습니다.

<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

도움 주셔서 감사합니다. 업데이트 된 질문을 친절하게 확인해 주시겠습니까? 또한, 부트 스트랩 2.3을 사용해야한다는 점에 유의하십시오. –

저는 ASP 개발자가 아닙니다. 브라우저의 실제 런타임 코드를 보여줄 수 있습니까? 그 후에는 함께 해결할 수 있습니다. – lv0gun9

부트 스트랩 테이블 플러그인이이 예제를 작동하지 않는 이유는 무엇입니까?

답변

관련 문제