Express.js로 홈페이지를 제작중이다.


HTML으로 테이블을 작성했는데 검색 기능을 추가하고 싶었다.


복잡해서 쉽게 멋진 예제를 검색하던 중,


Jquery를 이용해서 쉽게 검색할 수 있는 라이브러리를 찾았다.


Demo & Download


위 링크를 이용하여 데모 실행과 다운로드 모두 할 수 있다.


다운로드 받은 뒤, 탐색기를 이용하여 해당 디렉토리로 이동한다.


그리고 본인의 Express.js 프로젝트에 


/public/javascripts/ 에 html-table-search.js을 집어넣는다.


그 다음 layout.jade에서 



[layout.jade] 


doctype html

html

  head

    title= title

    link(rel='stylesheet', href='/stylesheets/style.css') 

    script(src='http://code.jquery.com/jquery-latest.min.js')

    script(src='/javascripts/html-table-search.js') 


  body

    block content


와 같이 선언한다. 이것은 HTML에서 head안에 <meta>와 <script> 태그를 사용하던 것과 동일하다.


참고로, layout.jade의 body 밑에 block content 대신 index.jade가 들어간다.


어쨋든, 그 다음 


[index.jade]에서


extends layout

block content

    script.
        $(document).ready(function () {
           $('table.search-table').tableSearch({
                // searchText:'Search Table',
                searchPlaceHolder:'Search...'
            });
        });

jade에서 자바스크립트를 사용하기 위해서는 script.라고 붙여주어야 한다.


그 밑에 Jquery문법을 써주면 input태그를 써주지 않아도 나온다.


물론 search-table은 table의 class명이다


(CSS에서 클래스는 점(.) 이고 id는 #이다)


즉, 

table.search-table
thead
tr ....

이 Table을 호출하는 것이다.

이렇게 되면 테이블 위에 INput Field가 생성된다.



이것의 디자인은 html-table-search.js에서 수정할 수 있다.







Posted by sungho88
,