JAKARTAPROJECT
JAKARTA TIPJSP TIPJSP 질문&답변DATABASE TIPJAVASCRIPT TIPWEBHACKING TIP기타 TIP
자바스크립트 팁
자바스크립트 팁
자바스크립트 및 CSS 팁 게시판입니다
Sortable HTML table
GoodBug http://www.jakartaproject.com
이미지 슬라이더 보기

Sortable HTML table

Overview

This JavaScript code can be used to convert tables in ordinary HTML into sortable ones. This script is unobtrusive. No additional coding is necessary. All you need to do is put header (sorting) row in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, include the webtoolkit.sortabletable.js file and create SortableTable() object after each table.

Tested in IE5.0+, OP8.0+, FF1.0+

 

Source code for index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Scrollable HTML table</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="webtoolkit.sortabletable.js"></script>

    <style>
        table {
            text-align: left;
            font-size: 12px;
            font-family: verdana;
            background: #c0c0c0;
        }

        table thead {
            cursor: pointer;
        }

        table thead tr,
        table tfoot tr {
            background: #c0c0c0;
        }

        table tbody tr {
            background: #f0f0f0;
        }

        td, th {
            border: 1px solid white;
        }
    </style>
</head>

<body>

<table cellspacing="1" cellpadding="2" class="" id="myTable" width="400">
    <thead>
        <tr>
            <th class="c1">Name</th>
            <th class="c2">Surename</th>
            <th class="c3">Age</th>
        </tr>
    </thead>

    <tbody>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">30</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">31</th>
        </tr>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">32</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">33</th>
        </tr>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">34</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">35</th>
        </tr>
        <tr class="r1">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">36</th>
        </tr>
        <tr class="r2">
            <td class="c1">John</th>
            <td class="c2">Smith</th>
            <td class="c3">37</th>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th class="c1">Name</th>
            <th class="c2">Surename</th>
            <th class="c3">Age</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
var t = new SortableTable(document.getElementById('myTable'), 100);
</script>

</body>
</html>

 

Source code for webtoolkit.sortabletable.js

/**
*
* Sortable HTML table
* http://www.webtoolkit.info/
*
**/

function SortableTable (tableEl) {

    this.tbody = tableEl.getElementsByTagName('tbody');
    this.thead = tableEl.getElementsByTagName('thead');
    this.tfoot = tableEl.getElementsByTagName('tfoot');

    this.getInnerText = function (el) {
        if (typeof(el.textContent) != 'undefined') return el.textContent;
        if (typeof(el.innerText) != 'undefined') return el.innerText;
        if (typeof(el.innerHTML) == 'string') return el.innerHTML.replace(/<[^<>]+>/g,'');
    }

    this.getParent = function (el, pTagName) {
        if (el == null) return null;
        else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
            return el;
        else
            return this.getParent(el.parentNode, pTagName);
    }

    this.sort = function (cell) {

     var column = cell.cellIndex;
     var itm = this.getInnerText(this.tbody[0].rows[1].cells[column]);
        var sortfn = this.sortCaseInsensitive;

        if (itm.match(/\d\d[-]+\d\d[-]+\d\d\d\d/)) sortfn = this.sortDate; // date format mm-dd-yyyy
        if (itm.replace(/^\s+|\s+$/g,"").match(/^[\d\.]+$/)) sortfn = this.sortNumeric;

        this.sortColumnIndex = column;

     var newRows = new Array();
     for (j = 0; j < this.tbody[0].rows.length; j++) {
            newRows[j] = this.tbody[0].rows[j];
        }

        newRows.sort(sortfn);

        if (cell.getAttribute("sortdir") == 'down') {
            newRows.reverse();
            cell.setAttribute('sortdir','up');
        } else {
            cell.setAttribute('sortdir','down');
        }

        for (i=0;i<newRows.length;i++) {
            this.tbody[0].appendChild(newRows[i]);
        }

    }

    this.sortCaseInsensitive = function(a,b) {
        aa = thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]).toLowerCase();
        bb = thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]).toLowerCase();
        if (aa==bb) return 0;
        if (aa<bb) return -1;
        return 1;
    }

    this.sortDate = function(a,b) {
        aa = thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]);
        bb = thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]);
        date1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
        date2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
        if (date1==date2) return 0;
        if (date1<date2) return -1;
        return 1;
    }

    this.sortNumeric = function(a,b) {
        aa = parseFloat(thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]));
        if (isNaN(aa)) aa = 0;
        bb = parseFloat(thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]));
        if (isNaN(bb)) bb = 0;
        return aa-bb;
    }

    // define variables
    var thisObject = this;
    var sortSection = this.thead;

    // constructor actions
    if (!(this.tbody && this.tbody[0].rows && this.tbody[0].rows.length > 0)) return;

    if (sortSection && sortSection[0].rows && sortSection[0].rows.length > 0) {
        var sortRow = sortSection[0].rows[0];
    } else {
        return;
    }

    for (var i=0; i<sortRow.cells.length; i++) {
        sortRow.cells[i].sTable = this;
        sortRow.cells[i].onclick = function () {
            this.sTable.sort(this);
            return false;
        }
    }

}

 

http://www.webtoolkit.info/sortable-html-table.html

 

2008-01-16 00:28:37
220.70.88.***

 

좋은생각 ^^

첨부파일 (총 2개)
  1. index.html 2.02 KB (113 다운로드)
  2. webtoolkit_sortabletable.js 2.89 KB (112 다운로드)
0점 (0명)
덧글 0개 | 태그 2개 | 관련글보기
태그입력
쉽표(,)구분으로 한번에 여러 태그를 입력할수 있습니다
정렬 (3) sort (1)
이름 비밀번호
자바스크립트 팁
자바스크립트 및 CSS 팁 게시판입니다
! 번호 제목 글쓴이 일자 조회
220 img 이미지 부드럽게 줄이기 1 GoodBug 2009-12-18 8,145
219 rss xml 파싱하는 모듈 입니다. 1 고고싱 2009-11-27 7,597
218 트리 입니다 . 1 고고싱 2009-11-27 5,828
217 에러처리 1 kaiser 2009-05-11 6,042
216 웹페이지 복사 방지 해지 하는 법 kaiser 2009-05-03 11,630
215 javascript 한글 짜르기 1 1 kaiser 2008-08-14 7,938
214 rolling 롤링 스크립트 1 2 GoodBug 2008-07-11 10,085
213 alert 메시지를 print 처럼 사용하기 2 고고싱 2008-06-10 8,621
212 onload onload 펑션이 정의되어 있는 상황에서 onload에 추가하기 1 GoodBug 2008-04-11 8,403
211 javascript 자바스크립트 개발가이드 4 1 kaiser 2008-04-09 8,847
210 escape HTML escpae code 1 GoodBug 2008-04-02 6,455
209 optgroup SELECT 목록 그룹별로 묶기 1 1 GoodBug 2008-03-06 8,178
208 동적 테이블 테이블에 동적 TR 삽입 및 삭제 IE, FF 공용 1 GoodBug 2008-01-18 11,703
207 drag Javascript drag and drop 1 1 GoodBug 2008-01-16 8,123
sort Sortable HTML table 2 GoodBug 2008-01-16 7,358
205 scrollable table Scrollable HTML table 1 GoodBug 2008-01-16 7,038
204 CSS CSS centered layout 1 1 GoodBug 2008-01-16 6,643
203 utf8 Javascript UTF-8 1 GoodBug 2008-01-16 7,871
202 encode Javascript url decode, encode 2 GoodBug 2008-01-16 8,084
201 암호화 Javascript MD5 2 GoodBug 2008-01-15 7,321
copyright 2005-2018 by Unicorn