개-발

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]에서

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

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

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

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

즉, 

table.search-table
   thead
      tr ....

이 Table을 호출하는 것이다.

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

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