그누보드 - 테이블정렬기(table sorter)를 달아보자

테이블정렬기(table sorter)를 달아보자 > 그누보드5 팁자료실

그누보드5 팁자료실

테이블정렬기(table sorter)를 달아보자 정보

테이블정렬기(table sorter)를 달아보자

첨부파일

mottie-tablesorter.zip (1.3M) 64회 다운로드 2019-08-22 03:43:53

본문

테이블정렬기(table sorter)를 달아보자

그누보드에서 조회수와 날짜 등에 대한 데이블 데이터 정렬 기능을 이미 기본으로 제공하고 있습니만,

카테고리, 제목, 글쓴이 등 테이블상에 표시되는 모든 데이터들에 대한 정렬(순/역정렬)을 하려면, 테이블정렬기를 달아보는 것도 좋을듯 합니다.

이 제이쿼리는 테마의 head.sup.php에 넣어서 모든 게시판에서 할용하거나, 특정 게시판에 스킨으로 활용할수도 있겠습니다.

특정 게시판에 스킨을 적용하는 것 보다는 테마 전체에 적용하는게 나을듯해서,

여기서는 head.sup.php에 넣어서 사용하는 방법입니다.

위의 zip 파일을 루트의 /js 디렉토리에 풀어주고,

head.sup.php 100 번째줄 주위의 </head>를 찾아서 그 위에 삽입해주면됩니다.

테이블정렬기의 css는 theme.less.css로 지정하면 테이블이 외관상 변화는 없고,

theme.default.css를 지정하면 순/역정렬 아이콘이 나타나고, 정렬시에는 해당 컬럼의 배경이 회색으로 강조됩니다.

원래의 theme.default.css에는 회색이 많아서 눈에 거슬리지 않을 정도로 손을 쪼금만 봤습니다.

*주의: 저는 그누M을 쓰기 때문에 GML인데, 그누보드 사용자는 당연히 잘 아시겠지만, G5로 바꾸는거 잊지 마세요.

head.sup.php


<!--// TableSorter----------------------------->
<!-- choose a theme file -->
<link rel="stylesheet" href="<?php echo GML_JS_URL ?>/mottie-tablesorter/css/theme.default.css">
<script type="text/javascript" src="<?php echo GML_JS_URL ?>/mottie-tablesorter/js/jquery.tablesorter.js"></script>
<!-- tablesorter widgets (optional) -->
<script type="text/javascript" src="<?php echo GML_JS_URL ?>/mottie-tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script>
    $(function(){
        $('table').tablesorter({
            widgets        : ['zebra', 'columns'],
            usNumberFormat : false,
            sortReset      : true,
            sortRestart    : true
        });
    });
    </script>
<!-- TableSorter //------------------------------------>
</head>