Class
  • 강좌게시판
  • Tip&Tech
  • Download
  • Tip&Tech
  • HOME > Class > Tip&Tech > 동적으로 테이블을 소팅테이블로 만들기
[함수] 동적으로 테이블을 소팅테이블로 만들기
글쓴이 기술레벨커뮤니티레벨노래했던까마귀 날 짜 12-02-13 17:01 조 회 1725
간편URL http://www.phpschool.com/link/tipntech/75037 복사

SyntaxHighlight로 보기

다운로드1 class.tableSort.js (4.6K), Down : 140, 2012-02-14 13:23:37
테이블에 id를 지정하면 해당 테이블의 타이틀부분을 클릭했을때 소팅됩니다.
자료형으로 만들어 놓으신 테이블에 적용해 보시기 바랍니다.  버그는 코멘트 남겨주세요.

숫자형은 숫자만 판별해서 소팅적용됩니다. 숫자에 쉼표와 하이픈 null 이 있더라도 소팅됩니다.

<script type='text/javascript' src='class.tableSort.js'></script>

<table id='test' border='1'>
<tr>
<td>앱</td>
<td>앱갯수</td>
</tr>
<tr>
<td>길순</td>
<td>9</td>
</tr>
<tr>
<td>봉황</td>
<td>-11</td>
</tr>
<tr>
<td>길동</td>
<td>1,12</td>
</tr>
</table>
<script>
sorttable.set('test'); <= 테이블 아이디 지정
</script>

전체댓글수 11

  • 기술레벨커뮤니티레벨언제돈벌어장가가남 12-02-14 10:54

    소스보기

  • 세심하게 신경 쓰신듯.
    감사합니다
  • 기술레벨커뮤니티레벨노래했던까마귀 12-02-14 16:14

    소스보기

  • 감사합니다. 사용하시다 버그를 발견하시면 댓글좀 부탁드립니다.
  • 기술레벨커뮤니티레벨봄ㅤ돌ㅤ 12-02-14 11:26

    소스보기

  • http://phpschool.com/link/tipntech/72342

    옛날에 올라왔던 것과 비교해 보는 것도 재밌겠네요.
    전 귀찮아서 걍 옛날 거 쓸려구요. ㅋㅋ
  • 기술레벨커뮤니티레벨노래했던까마귀 12-02-14 16:13

    소스보기

  • 네 잘보았습니다. 주신 링크와 제가 올린 클래스의 차이는 다음과 같습니다.

    1. 보여주신 링크에서는 소팅을 하기 위해 타이틀부분에 함수를 전부 삽입해야 하지만 제가 올려 드린건 그런 작업이 필요없습니다.

    2. 올려주신건 jquery가 있어야 동작하지만 제가 올려드린건 jquery 없이도 동작합니다.

    3. 주신 링크는 외부에 또다른 함수를 선언했지만 제가 올려드린건 클래스파일을 제외한 외부에 별도의 함수를 두지 않아도 됩니다.

    4. 요건 좀 중요한 부분인데요.  주신 기존 링크의 소팅은 숫자 소팅이 제대로 되지 않습니다. 숫자컬럼을 문자로 인식합니다. 제가 올려드린건 해당컬럼이 숫자형인지 문자형인지 대충 짐작해서 소팅합니다.

    예를 들면 제가 올려드린 링크는
     1,000 혹은 -1000  혹은 10.00 처럼 문자가 포함된 데이터를 숫자로 인식해서 소팅해 줍니다.
  • 기술레벨커뮤니티레벨아이쿠 12-02-14 19:32

    소스보기

  • 아무생각없이 복사해다 붙여넣고 ... 왜안되지 하고있다가 오류메시지 확인 하니까..
    //<= 테이블 아이디 지정  주석처리를 안해서 에러가 나고 있었네요 ㅜ.ㅜ
    사람이 점점 단순해지는 느낌 ㅜ.ㅜ   

    Jquery가 없어도 동작하는게 맘에 드네요 ^^; Jquery는 너무커서 ㅜ.ㅜ 맘에 안듬...

    감사히 사용하겠습니다. ^^;
  • 기술레벨커뮤니티레벨홍콩티켓 12-02-15 10:04

    소스보기

  • 좋은자료 감사합니다^^
  • 기술레벨커뮤니티레벨perfume 12-02-21 18:00

    소스보기

  • 좋은자료 감사합니다. 그런데 td를 추가해보니까 추가한 td의 소트가 처음 td(앱)로 소트가 됩니다.  앱 td 소트결과와 추가한 td의 소트결과가 같습니다.
  • 기술레벨커뮤니티레벨php™사랑 12-02-22 00:54

    소스보기

  • 와,,..감사합니다.
  • 기술레벨커뮤니티레벨마스터쿵 12-02-24 13:27

    소스보기

  • 소스도 간단한것 같고, 멋지네요...^^
    그런데 숫자를 인식하긴하는데  소숫점과 콤마를 구분을 해줘야 할것 같습니다.
    1,000 을 1000으로 인식하는건 맞지만 1.000 은 소숫점인데 같은것으로 나오네요
    이부분만 수정해주시면 좋을것 같습니다!!
  • 기술레벨커뮤니티레벨하랑이짱 12-02-27 11:51

    소스보기

  • 좋은자료 감사합니다.
    테스트를 해보니 날짜형의 경우 앞의 자리만 문자/숫자를 검사하기 때문인지 오류가 있네요.
    가령 2012-02-11 이나 11-58:00 처럼 문자 숫자 조합의 경우가 보완되면 좋을 것 같습니다.
  • 기술레벨커뮤니티레벨닷컴 12-02-29 06:51

    소스보기

  • 특정한 규칙을 정해주고 사용하면 아주 좋을듯 하네요.
    고맙습니다. ^^
  • 게시물 12,480건 RSS
번호분류제목글쓴이날짜조회
12,480 브라우저 css browser selector js to css_browser_selector.class.php [1] 링크 새글 기술레벨커뮤니티레벨송효진 13-05-21 126
12,479 브라우저 IE9 이하 jquery placeholder 0.3 [2] 링크 기술레벨커뮤니티레벨송효진 13-05-20 248
12,478 함수 redis_cache (그누보드 함수캐쉬. redis 버젼) 기술레벨커뮤니티레벨아빠불당 13-05-20 220
12,477 설치/설정 redis 설치 [1] 기술레벨커뮤니티레벨아빠불당 13-05-20 271
12,476 알고리즘 [1원팁] php 동적인 상속 [6] 기술레벨커뮤니티레벨RGB255 13-05-18 389
12,475 스크립트 js 함수,메소드 명세, 표준인지 MSIE 지원 되는지... [5] 링크 기술레벨커뮤니티레벨송효진 13-05-15 383
12,474 DBMS 초보자를 위한 mysql에서의 비트연산 활용 [4] 기술레벨커뮤니티레벨전진하는아르고 13-05-13 518
12,473 알고리즘 페이스북이 만든 PHP 가상머신인 HipHop For PHP 를 소개합니다. [6] 링크 기술레벨커뮤니티레벨egoing 13-05-13 656
12,472 브라우저 google chrome high contrast plugin 사이트 고대비화 도구 [3] 링크 기술레벨커뮤니티레벨송효진 13-05-12 333
12,471 알고리즘 Codeigniter 2.1.3 기반 공개보드 [2] 링크 기술레벨커뮤니티레벨마냐 13-05-11 527
12,470 기타 코드가 손에 안 익으신다구요.. 이것 한번 해 보심이. [2] 링크 기술레벨커뮤니티레벨폭스테리어 13-05-09 765
12,469 서버운영 git 을 이용한 서버간 동기화 스크립트. 자동 commit, push, res… [2] 첨부파일 기술레벨커뮤니티레벨송효진 13-05-08 589
12,468 알고리즘 CodeIgniter 에서 캐쉬를 사용하는 방법을 수업으로 만들었습니… [2] 링크 기술레벨커뮤니티레벨egoing 13-05-08 380
12,467 설치/설정 NGINX와 PHP-FPM [19] 링크 인기 기술레벨커뮤니티레벨egoing 13-04-25 1503
12,466 정보 Chart.js - 6가지 종류의 예쁜 차트 [5] 링크 인기 기술레벨커뮤니티레벨킁킁탐정 13-04-24 1277
12,465 정보 List.js - List/Table를 편리하게! [5] 링크 인기 기술레벨커뮤니티레벨킁킁탐정 13-04-23 1031
12,464 정보 Rivets.js - View Logic [2] 링크 기술레벨커뮤니티레벨킁킁탐정 13-04-23 679
12,463 정보 Moment.js - 시간의 모든것 [8] 링크 기술레벨커뮤니티레벨킁킁탐정 13-04-23 795
12,462 정보 Collecting All Cheat Sheets [8] 링크 기술레벨커뮤니티레벨킁킁탐정 13-04-23 565
12,461 스크립트 jQuery.outerHTML() 링크 기술레벨커뮤니티레벨송효진 13-04-22 751
 
12345678910
글쓰기
SEARCH 검색하기