nodejs 分页

view ---person.html

  <!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//www.greatytc.com/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      
      <table class="table">
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
          </tr>
        </thead>
        <tbody>
            {% for per in persons %}
            <tr>
            <td>{{per.id}}</td>
            <td>{{per.name}}</td>
            <td>{{per.age}}</td>
          </tr> 
            {% endfor %}
          
          
        </tbody>
      </table>

      <nav>
        <ul class="pagination">
          <li><a href="#">«</a></li>
          <li><a href="/person?page=1">1</a></li>//路径 同router .get('/person')
          <li><a href="/person?page=2">2</a></li>
          <li><a href="#">»</a></li>
        </ul>
      </nav>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/jquery/dist/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/bootstrap/dist/js/bootstrap.js"></script>
  </body>
</html>

服务器部分

var config = {
    port: 3000,
    staticPath: './bower_components',
    viewPath: './views'
}
var koa = require('koa');
var router = require('koa-router')();
var views = require('co-views');
var staticServe = require('koa-static');
var logger=require('koa-logger')
var render = views(config.viewPath, {
    map: { 'html': 'swig' }
});

var app = koa();

router.get('/person', function*(){
    var persons = [
            {
                id: 1,
                name: 'aaa',
                age: 18
            },
            {
                id: 2,
                name: 'vvv',
                age: 18
            },
            {
                id: 3,
                name: 'ccc',
                age: 18
            },
            {
                id: 4,
                name: 'iii',
                age: 18
            },
            {
                id: 5,
                name: 'ppp',
                age: 18
            },   
            {
                id: 6,
                name: ';;;',
                age: 18
            },
        ]
    
    var query = this.request.query;

    var page = query.page;
    var count = 3;
    if(!page){
        page=1;
    }

    persons = persons.slice( (page-1)*count, page*count);


    var context = {
        persons: persons    
    }
    this.body = yield render('person.html', context);
});
app.use(logger())//查看加载的详细信息
app.use( staticServe(config.staticPath) );//找到设置的静态文件
app.use( router.routes() );

app.listen(config.port);

console.log( config.port );

nodejs 分页

推荐阅读更多精彩内容