2017-10-08 7 views
0

をロードしない:ページネーション - 連続したページの値が、私は特急のアプリケーションでページネーションを実装しようとしています

私の例では、私はJSON fileからデータをロードしています。私は、さらにデータをロードしようとしています私のパグファイル内

const express = require("express") 
const path = require("path") 
const bodyParser = require("body-parser") 
const cookieParser = require('cookie-parser') 
const fs = require('fs') 
const app = express() 

// view engine setup 
app.set("views", path.join(__dirname, "views")) 
app.set("view engine", "pug") 

app.use(bodyParser.json()) 
app.use(bodyParser.urlencoded({ 
    extended: false, 
})) 
app.use(express.static(path.join(__dirname, "public"))) 
app.use(cookieParser()) 

//Routes 
app.get('/', (req, res) => { 

    const data = JSON.parse(fs.readFileSync('./data/data.json', 'utf8')); 

    //pagination 
    const totalRec = Object.keys(data).length 
    const pageSize = 6 
    const pageCount = Math.ceil(totalRec/pageSize) 
    const start = 0 
    const currentPage = 1 

    if (currentPage > 1) { 
     start = (currentPage - 1) * pageSize; 
    } 

    console.log("pageCount: " + pageCount + " totalRec: " + totalRec + " start: " + start) 

    const postList = data.slice(start, start+pageSize) 
    console.log("postList: " + postList)  

    res.render("index", { 
     postList, 
     totalRec, 
     pageSize, 
     pageCount, 
     start, 
     currentPage 
    }) 
}) 

//Server 
const port = process.env.APP_PORT || 8080 
const host = process.env.APP_HOST || "localhost" 

app.listen(port, function() { 
    console.log("Listening on " + host + ":" + port) 
}) 

module.exports = app 

app.jsファイルは次のようになります

body 
    .container-fluid 
     .row 
     .col-md-12 
      h3 
      | Mentoring 1 
      a.btn.btn-primary(href='/new', role='button') 
      | Create Post 
      table.table 
      thead.thead-inverse 
       tr 
       th Titel 
       th Description 
       th Created At 
       th Tags 
       th Action 
      tbody 
       //TODO: If post is empty 
       each post in postList 
       tr 
        td= post.titel 
        td= post.description 
        td= post.createdAt 
        td= post.tags 
        td 
        a.btn.btn-primary(href='/edit', role='button') Edit      
      if pageCount > 1 
      ul.pagination 
       if currentPage > 1 
       li 
        a(href='/?page=1') « 
       - var x = 1 
       if currentPage > 5 
       - x = x + (currentPage - 4) 
       if (x !== 1) 
       li.disabled 
        a(href='#') ... 
       - for (x; x <= pageCount; x++) 
       if(currentPage == x) 
        li.active 
        span.sr_only 
         = currentPage 
       else 
        li 
        a(href= "/?page=#" + x) 
         = x 
       if x == (currentPage + 4) 
        li.disabled 
        a(href="#") ... 
        - break 
       if currentPage != pageCount 
       li 
        a(href= "/?page=" + Math.floor(pageCount)) &raquo; 

     script(src='https://code.jquery.com/jquery-3.1.1.min.js') 
     script.   

     script(src='/js/bootstrap.min.js') 

私の問題は、私は、下部にページネーションを使用する場合私はhttp://localhost:8080/?page=#2のURLを取得しましたが、必要なデータはありません。私はここで間違っ

Pagination Example

任意の提案をしています何:

私は私が私の問題よりよく説明を願っ最小実行可能な例レポを作成していますか?

返信いただきありがとうございます。

答えて

1

この問題は、Pugでもうサポートされていない '属性補間'に関連している可能性があります(this link to the Pug docs参照)。基本的に、これは、属性値に#{...}を使用できなくなるということです。あなたはこのような何かをする必要があります:

a(href= "/?page=" + Math.floor(pageCount)) &raquo; 
+0

あなたの返信のためのThx!基礎となるコードを変更しましたが、依然として必要なページ分割出力が得られません。なぜそれが動作していないすべての提案? – mrquad

+1

具体的なエラー出力はありますか?または、リンクのURLがまだ間違っていますか? – gandreadis

+0

リンクは '?page =#2、?page =#3、?page =#4 etc.'に変更されましたが、データに変更はありません。さらに、エラーメッセージはありません。私はレポに最新の変更を加えました:https://github.com/marcpre/learning_paginat – mrquad

関連する問題