add pagination component demo

@@ -6,7 +6,11 @@
 
 'use strict';
 
+
+
 const index = (req, res) => {
+    var pageNum = req.query.page || 1;
+
     res.render('index', {
         module: 'partial',
         page: 'index',
@@ -27,8 +31,18 @@ const index = (req, res) => {
                 {
                     checked: true
                 }
-            ]
+            ],
+            paginationOpts: {
+                page: pageNum,               // current page: http://host/?page=2
+                limit: 10,                // per_page records' number
+                totalRows: 100            // total page number
             }
+        },
+        helpers: {
+            // import component, path depends on your project
+            pagination: require('../../../doraemon/components/pagination/pagination').createPagination
+        }
+
     });
 };
 

@@ -53,5 +53,10 @@
             <p><span class="inline-block" style="height: 30px;border:1px solid #f00;">我是inline-block，我原本是inline元素，现在可以设置高度了</span></p>
             <p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
         </div>
+    
+        <p>9. 分页组件</p>
+        <div style="border: 1px solid #000; height: 40px; padding: 5px;">
+           {{{ pagination paginationOpts }}}
+        </div>
     {{/ content}}
 </div>
\ No newline at end of file

@@ -18,10 +18,11 @@
 
   1. express 服务端路由
         
+        var page = req.query.page || 1;
         res.render('index', {
             helpers: {
                 // 引入组件，注意path，根据项目路径
-                pagination: require('../components/paginator').createPagination
+                pagination: require('../components/pagination/pagination').createPagination
             },
             paginationOpts:  {
                 page: page,               // 当前页 http://host/?page=2

@@ -32,8 +32,8 @@ exports.createPagination = function(pagination, options) {
         n,                                              // page number ?page=n
         queryParams = '',                               // paginate with query parameter
         page = parseInt(pagination.page, 10),           // current page number
-        leftText = '<i class="iconfont">&#xe60e;</i>',  // prev
-        rightText = '<i class="iconfont">&#xe60c;</i>', // next
+        leftText = '<i class="iconfont">&#xe607;</i>',  // prev
+        rightText = '<i class="iconfont">&#xe606;</i>', // next
         paginationClass = 'blk-pagination';             // pagination <ul> default class
 
     var pageCount,

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Wed Jun 29 19:01:07 2016
+Created by FontForge 20120731 at Thu Jun 30 11:48:37 2016
  By admin
 </metadata>
 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Wed Jun 29 19:01:07 2016
     bbox="0 -212 1024 896"
     underline-thickness="50"
     underline-position="-100"
-    unicode-range="U+0078-E604"
+    unicode-range="U+0078-E607"
   />
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -46,5 +46,12 @@ t145 -145t200 -53zM512 100q118 0 201 83t83 201t-83 201t-201 83t-201 -83t-83 -201
     <glyph glyph-name="uniE604" unicode="&#xe604;" 
 d="M512 684q159 0 271.5 -112.5t112.5 -271.5t-112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5zM512 812q-139 0 -257 -68.5t-186.5 -186.5t-68.5 -257t68.5 -257t186.5 -186.5t257 -68.5t257 68.5t186.5 186.5t68.5 257t-68.5 257
 t-186.5 186.5t-257 68.5z" />
+    <glyph glyph-name="uniE605" unicode="&#xe605;" 
+d="M968 -37l-163 164q69 108 69 234q0 119 -57.5 219t-157 158.5t-216 58.5t-216 -58.5t-157 -158.5t-57.5 -218.5t57.5 -219t157 -158.5t216.5 -58q124 0 231 69l163 -164q27 -28 65 -28t65 27.5t27 66t-27 66.5zM443.5 50q-127.5 0 -217.5 91.5t-90 220t90 219.5t217.5 91
+t217.5 -91t90 -219.5t-90 -220t-217.5 -91.5z" />
+    <glyph glyph-name="uniE606" unicode="&#xe606;" 
+d="M387 158l45 -46l272 272l-272 272l-45 -46l226 -226z" />
+    <glyph glyph-name="uniE607" unicode="&#xe607;" 
+d="M704 665l-41 39l-343 -320l343 -320l41 39l-301 281z" />
   </font>
 </defs></svg>

+@import "pagination";

@@ -3,11 +3,15 @@ ul.blk-pagination {
 
     li {
         display: inline-block;
-        padding: 5px;
-        width: 15px;
-        height: 15px;
+        width: 24px;
+        line-height: 24px;
+        height: 24px;
         text-align: center;
 
+        a {
+            display: block;
+        }
+
         &:first-child {
             margin-right: 10px;
             border: 1px solid #333;
@@ -43,4 +47,8 @@ ul.blk-pagination {
             color: #fff;
         }
     }
+
+    i {
+        font-size: 18px;
+    }
 }

 @import "base";
+@import "components/index";