JQuery 플러그 인 tablesorter 표 정렬 실현 과정 분석
9904 단어 JQuery플러그 인tablesorter
Tablesorter 는 브 라 우 저 에서 표 데 이 터 를 직접 정렬 하 는 jQuery 플러그 인 입 니 다.페이지 를 다시 새로 고 칠 필요 가 없습니다.수치,문자열,날짜,사용자 정의 정렬 등 다양한 셀 데이터 형식 을 지원 합 니 다.
사용 설명
jquery.tablesorter 도입
사용 한 파일 다운로드:
jquery-2.0.2.min.js
jquery.tablesorter.min.js tablesorert 홈 페이지
http://tablesorter.com
표 수정
html 는 다음 과 같다.
<table class="table table-striped table-bordered table-hover tablesorter" id="tbList">주:table 에 id 와 class 를 추가 합 니 다.class 는 tablesorter 가 있어 야 합 니 다.id 는 있어 도 되 고 없어 도 됩 니 다.css:(문장 말미 상세 코드 참조)
표 스타일 정의:표 머리,오름차,내림차 등 스타일.
정렬 실현
표 머리 를 클릭 하면 해당 열 을 정렬 할 수 있 습 니 다.
js 코드 는 다음 과 같 습 니 다:
<script type="text/javascript">
$("#tbList").tablesorter();
// id ， $(".tablesorter").tablesorter();
</script>내림차 순
오름차 순
데이터 뒤에 한자
그림 에서 보 듯 이 번호,연령,진도 등 각종 디지털 유형의 데이터 에 대해 정렬 기능 은 틀림 이 없다.
그러나 그림 에서 보 듯 이 과정 수,시간,점수 등 데이터 뒤에 한자 가 있 는 데이터 에 대해 정렬 은 효과 가 없다.예 를 들 어 다음 그림 과 같다.
내림차 순:
오름차 순:
이런 상황 에 대해 다음 과 같이 처리 할 수 있다.
js 코드
//
$.tablesorter.addParser({
id: "num", // ID
is: function(s){
return false;
},
format: function(s){
return s.substring(0,s.length-2);//
},
type: "numeric" //
});
$("#tbList").tablesorter({headers:{5:{sorter:"num"}，6:{sorter:"num"},7:{sorter:"num"}}}); // 、 、 
위의 그림 에서 보 듯 이 시간 에 따라 정렬 해 야 하 는데 이런 데 이 터 는 비교적 번거롭다.
이런 상황 에 대해 다음 과 같이 처리 할 수 있다.
js 코드
$.tablesorter.addParser({
id: "num", // ID
is: function(s){
return false;
},
format: function(s){
// xx xx xx
var hourNum= parseInt(s.substring(0,2));//xx
var minuteNum= parseInt(s.substring(4,6));//xx
var secondsNum= parseInt(s.substring(7,9));//xx
//
var seconds=hourNum*3600+minuteNum*60+secondsNum;
return seconds;
},
type: "numeric" //
});
$(".tablesorter").tablesorter({headers:{6:{sorter:"num"}}});// 내림차 순
오름차 순
코드
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tablesorter</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="css/tablesorterStyle.css" rel="external nofollow" >
</head>
<body>
<table class="table table-striped table-bordered table-hover tablesorter" id="tbList">
<thead>
<tr >
<th width="8%"class="header"> </th>
<th width="15%"class="header"> </th>
<th width="11%"class="header"> </th>
<th width="11%"class="header"> </th>
<th width="11%"class="header"> </th>
<th width="11%"class="header"> </th>
<th width="11%"class="header"> </th>
<th width="11%"class="header"> </th>
<th width="11%"class="header"> </th>
</tr>
</thead>
<tbody id="tbody-member-course-summary">
<tr>
<td>1</td>
<td>111test1</td>
<td> </td>
<td> </td>
<td>23</td>
<td>20 </td>
<td>32 </td>
<!--<td>05 32 47 </td>-->
<td>86 </td>
<td>79%</td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
<td> </td>
<td>24</td>
<td>4 </td>
<td>102 </td>
<!--<td>03 02 00 </td>-->
<td>68 </td>
<td>91%</td>
</tr>
<tr>
<td>3</td>
<td>zhaoliu</td>
<td> </td>
<td> </td>
<td>30</td>
<td>18 </td>
<td>57 </td>
<!--<td>10 57 00 </td>-->
<td>84 </td>
<td>37%</td>
</tr>
<tr>
<td>4</td>
<td>iii</td>
<td>aiaia</td>
<td> </td>
<td>20</td>
<td>14 </td>
<td>92 </td>
<!--<td>00 34 00 </td>-->
<td>79 </td>
<td>9%</td>
</tr>
</tbody>
<tfoot id="tfoot-member-course-summary">
<tr>
<td> ：</td>
<td> -- </td>
<td> </td>
<td> </td>
<td> </td>
<td> -- </td>
<td> -- </td>
<td> -- </td>
<td> -- %</td>
</tr>
</tfoot>
</table>
<script type="text/javascript" src='js/jquery-2.0.2.min.js'></script>
<script type="text/javascript" src='plugin/tablesorter/jquery.tablesorter.min.js'></script>
<!-- <script type="text/javascript" src='plugin/tablesorter/jquery.tablesorter.js'></script>-->
<script type="text/javascript" src='js/mytablesorter.js'> </script>
</body>
</html>
table.tablesorter{
font-family: arial;
font-size: 8pt;
width: 100%;
text-align: left;
}
/* */
thead{
background:#ccc;
color:#ff0000;
}
.header{
background-image: url('../plugin/tablesorter/themes/blue/bg.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
/* */
th.headerSortDown{
color:#00ff00;
background-color: #aaa;
background-image: url('../plugin/tablesorter/themes/blue/desc.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
/* */
th.headerSortUp{
color:#0000ff;
background-color: #aaa;
background-image: url('../plugin/tablesorter/themes/blue/asc.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
// $("#tbList").tablesorter();
//
$.tablesorter.addParser({
id: "num", // ID
is: function(s){
return false;
},
format: function(s){
return s.substring(0,s.length-2);
},
type: "numeric" //
});
$("#tbList").tablesorter({headers:{6:{sorter:"num"},7:{sorter:"num"},8:{sorter:"num"}}});
// //
// $.tablesorter.addParser({
// id: "num", // ID
// is: function(s){
// return false;
// },
// format: function(s){
// // xx xx xx
// var hourNum= parseInt(s.substring(0,2));//xx
// var minuteNum= parseInt(s.substring(4,6));//xx
// var secondsNum= parseInt(s.substring(7,9));//xx
// //
// var seconds=hourNum*3600+minuteNum*60+secondsNum;
// return seconds;
// },
// type: "numeric" //
// });
// $("#tbList").tablesorter({headers:{6:{sorter:"num"}}}); // 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
RPG 유닛 MZ에서 그림의 원점을 오른쪽 위 구석에 지정하는 방법오른쪽 위 구석에 원점을 지정하는 경우(예: 공식 플러그인 "TextPicture.js"를 사용하는 경우 다음 그림과 같이 문자를 오른쪽 정렬로 표시할 수 있습니다. "rmz sprites.js"를 엽니다 "Spri...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
