2017-10-08 6 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') 

내 문제는 내가 바닥에 페이지 매김을 사용하는 경우 나는 뒤에 오는 URL, http://localhost:8080/?page=#2를 얻는다, 그러나 필요한 자료는 없다. 내가 잘못 여기

Pagination Example

어떤 제안 뭐하는 거지 :

나는 내 문제를 잘 설명 바랍니다 최소 실행 가능한 예제의 repo를 만들었습니다?

답장을 보내 주셔서 감사합니다.

답변

1

문제는 '속성 보간'이 Pug에서 더 이상 지원되지 않는 것과 관련이 있습니다 (this link to the Pug docs 참조). 기본적으로이 문제는 더 이상 특성 값에 #{...}을 사용할 수 없다는 것을 의미합니다. 다음과 같이해야합니다.

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

답장을 보내 주시면 기본 코드를 변경했지만 여전히 필요한 페이지 매김 출력을 얻지 못했습니다. 그것이 작동하지 않는 이유는 무엇입니까? – mrquad

+1

특정 오류 출력이 있습니까? 또는 링크의 URL이 여전히 올바르지 않습니까? – gandreadis

+0

링크가'? page = # 2,? page = # 3,? page = # 4 etc.'로 바뀌었지만 데이터에 아무런 변화가 없습니다. 또한 오류 메시지가 없습니다. 나는 repo에 대한 최신 변경 사항을 공개했다 : https://github.com/marcpre/learning_paginat – mrquad