테이블 정렬 함수가 바이올린 외부에서 작동하지 않습니다.

아래의 바이올린은 완벽하게 작동하지만 빈 테스트 문서에서 이것을 다시 만들려고하면 아무 일도 일어나지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까?테이블 정렬 함수가 바이올린 외부에서 작동하지 않습니다.

여기 내 피들입니다. https://jsfiddle.net/1djad595/2/

위 코드의 성공을 모방 할 수있는 업데이트 된 코드입니다. .

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="css/custom.css" /> 

</head> 


<body> 
<script> 

$(document).ready(function() 
    { 
     $("#myTable").tablesorter(); 
    } 
); 

    </script> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js"> 
</script> 
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html>

출처

2016-10-09 brett

당신이 라이브러리 (jQuery를 +의 tablesorter에)를 포함하는 것을 잊었다 [jsFiddle 업데이트 (https://jsfiddle.net/1djad595/2/) – gaetanoM

내가 간과 한 바보처럼 느껴지 셨습니다. 화살표가 정렬 가능하다는 것을 어떻게 알 수 있습니까? – brett

스타일 시트를 추가하기 만하면이 링크가 도움이 될 것입니다. http://stackoverflow.com/questions/11763352/jquery-tablesorter-the-sorting-arrows-dont-show – Geeky

나는 다음과 같은 코드를 복사 할 경우 당신을 위해 일을해야

처음의 jQuery libarary 다음 tablesorter에를 올바른 순서로 코드 스크립트 라이브러리를 포함 할 필요가 있다고 생각 :

$(document).ready(function() 
 
    { 
 
     $("#myTable").tablesorter(); 
 
    } 
 
);

table.tablesorter { 
 
\t font-size: 12px; 
 
\t background-color: #4D4D4D; 
 
\t width: 100%; 
 
\t border: 1px solid #000; 
 
} 
 
table.tablesorter th { 
 
\t text-align: left; 
 
\t padding: 5px; 
 
\t background-color: #6E6E6E; 
 
\t color: #fff; 
 
} 
 
table.tablesorter td { 
 
\t color: #FFF; 
 
\t padding: 5px; 
 
} 
 
table.tablesorter .even { 
 
\t background-color: #3D3D3D; 
 
} 
 
table.tablesorter .odd { 
 
\t background-color: #6E6E6E; 
 
} 
 
table.tablesorter .header { 
 
\t background-image: url(bg.png); 
 
\t background-repeat: no-repeat; 
 
\t border-left: 1px solid #FFF; 
 
\t border-right: 1px solid #000; 
 
\t border-top: 1px solid #FFF; 
 
\t padding-left: 30px; 
 
\t padding-top: 8px; 
 
\t height: auto; 
 
} 
 
table.tablesorter .headerSortUp { 
 
\t background-image: url(asc.png); 
 
\t background-repeat: no-repeat; 
 
} 
 
table.tablesorter .headerSortDown { 
 
\t background-image: url(desc.png); 
 
\t background-repeat: no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js"></script> 
 

 
<table id="myTable" class="tablesorter"> 
 
<thead> 
 
<tr> 
 
    <th>Last Name</th> 
 
    <th>First Name</th> 
 
    <th>Email</th> 
 
    <th>Due</th> 
 
    <th>Web Site</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
    <td>Smith</td> 
 
    <td>John</td> 
 
    <td>[email protected]</td> 
 
    <td>$50.00</td> 
 
    <td>http://www.jsmith.com</td> 
 
</tr> 
 
<tr> 
 
    <td>Bach</td> 
 
    <td>Frank</td> 
 
    <td>[email protected]</td> 
 
    <td>$50.00</td> 
 
    <td>http://www.frank.com</td> 
 
</tr> 
 
<tr> 
 
    <td>Doe</td> 
 
    <td>Jason</td> 
 
    <td>[email protected]</td> 
 
    <td>$100.00</td> 
 
    <td>http://www.jdoe.com</td> 
 
</tr> 
 
<tr> 
 
    <td>Conway</td> 
 
    <td>Tim</td> 
 
    <td>[email protected]</td> 
 
    <td>$50.00</td> 
 
    <td>http://www.timconway.com</td> 
 
</tr> 
 
</tbody> 
 
</table>

출처

2016-10-09 20:30:05 mbadeveloper

@brett 올바른 순서로 jquey와 tablesorter 라이브러리를 포함시켜야한다고 생각합니다. – mbadeveloper

이것은 나를위한 것입니다. 나는 모든 것이 달려있는 한 질서가 중요하다는 것을 몰랐다. 이 답변에 감사드립니다. – brett

테이블 정렬 함수가 바이올린 외부에서 작동하지 않습니다.

답변

관련 문제