Use Backbone.Paginator to create pagination for table layout HTML

我們教會人手非常不夠,也不見得有工程背景的人,所以很多東西都是簡單就好。
像是主日的錄音檔好了,我們的標準流程是用 Dreamweaver 修改表格,一個禮拜就會多上三個錄音檔,簡單算起來,一年就會有 156 個 entry 會放到頁面中。

例如說

<tr onMouseOver="mark(this,'#ECFBD4','#990000')" onMouseOut="mark(this,'#FFFFFF','#333333')" >
  <td align="center" valign="top">2013.01.20</td>
  <td align="center" valign="top">深思天國(一) 心決定一切</td>
  <td align="center" valign="top">徐坤靖牧師<br /></td>
  <td align="center" valign="top"><a href="http://files.ctfhc.org/sermon/130120.mp3"><img src="images/record.jpg" alt="錄音檔下載" width="120" height="28" border="0" /></a></td>
  <td align="center" valign="top"><a href="http://youtu.be/Y1iSbTN07Cc" target="_blank"><img src="images/video.jpg" alt="線上收看" width="120" height="28" border="0" /></a></td>
</tr>

長久下來之下,這個頁面就包含了 300 個 tr 標籤去顯示每個禮拜的影音檔。

剛好在 JSDC 結束之後,就決定想用 Backbone.js 來在前端用 JavaScript 動手腳,把 table 的每一個 tag 處理好當做 model,最後把 collection 做出來丟給 controller 跟 view。

中間也用了 Backbone.Paginator 幫忙做分頁,簡單的使用方式可以看一下他的範例

最後做出來就會像是

source code 放在 https://bitbucket.org/yhchan/ctfhc-media-pagination,其實東西並不難,只是一開始跟 JavaScript 不熟多花了很多時間而已。而且目前是用 JSONP 在後端把東西用 JSON 丟出來,其實應該可以在前端直接做掉的,但是我現在懶惰了…

比起這種方式,我可能還是希望有一天,我們能自己好好使用好的 CMS 去設計網站吧,2010 年想改用 Drupal,也因為人力的關係胎死腹中…

Leave a Reply

Your email address will not be published. Required fields are marked *