关于bootstrap-Paginator在Nodejs中使用的问题

关于bootstrap-Paginator在Nodejs中使用的问题

//页面index.ejs <div class=“span12”> <div id=“page1”></div> </div>

<script type="text/javascript">
//已经确定session里有page对象

        var options ={
            currentPage :page.currentPage,
            totalPages : page/totalPages
        }
    $('#page1').bootstrapPaginator(options);

</script>

！！！！！为什么 options的赋值不成功呢？ 整个分页条就不显示了，直接写入数字的话，是能显示的。

//路由routes/index.js

app.get(’/’, function(req, res){

if(!req.session.user){

res.render(‘index’, { title: ‘首页-Microblog’});

} else { var page = new Page({ currentPage:1, totalPages:0 }); page.getPage(function(totalPages){ page.totalPages = totalPages; }); page.select(function(rows){ var says = []; for(var i in rows){ says.push(rows[i]); } req.session.says = says; req.session.page = page; //这里传送的page res.render(‘index’, { title: ‘首页-Microblog’}); }); } });


3 回复

关于bootstrap-Paginator在Nodejs中使用的问题

问题描述

在使用bootstrap-Paginator时，发现options对象的赋值不成功，导致分页条无法正确显示。希望了解如何正确地在Node.js中使用bootstrap-Paginator。

示例代码

首先，我们需要确保在客户端正确获取分页信息，并将其传递给bootstrap-Paginator插件。以下是完整的示例代码：

1. 页面(index.ejs)

<div class="span12">
    <div id="page1"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-paginator/0.8.5/bootstrap-paginator.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-paginator/0.8.5/bootstrap-paginator.min.css">

<script type="text/javascript">
    $(document).ready(function() {
        var page = <%= JSON.stringify(page) %>;

        var options = {
            currentPage: page.currentPage,
            totalPages: page.totalPages
        };

        $('#page1').bootstrapPaginator(options);
    });
</script>

2. 路由(routes/index.js)

const express = require('express');
const app = express();
const router = express.Router();

router.get('/', (req, res) => {
    if (!req.session.user) {
        res.render('index', { title: '首页-Microblog' });
    } else {
        const page = new Page({
            currentPage: 1,
            totalPages: 0
        });

        page.getPage((totalPages) => {
            page.totalPages = totalPages;

            page.select((rows) => {
                const says = [];
                for (let i in rows) {
                    says.push(rows[i]);
                }
                req.session.says = says;
                req.session.page = page;
                // 将page对象传递给视图
                res.render('index', { title: '首页-Microblog', page: page });
            });
        });
    }
});

app.use('/', router);

module.exports = router;

解释

  1. 页面(index.ejs):

    • 使用<%= JSON.stringify(page) %>将服务器端的page对象传递到客户端。
    • 在$(document).ready函数中初始化bootstrap-Paginator插件，并将page对象中的currentPage和totalPages属性传递给options对象。

  2. 路由(routes/index.js):

    • 获取当前用户会话信息。
    • 初始化Page对象并调用getPage方法获取总页数。
    • 使用select方法获取数据行，并将结果存储在会话中。
    • 渲染index.ejs模板，并将page对象传递给视图。

通过以上步骤，可以确保bootstrap-Paginator插件能够正确接收并显示分页信息。


totalPages : page.totalPages

根据你的描述，options赋值不成功的原因可能是因为你在定义options时使用了totalPages变量，但没有正确地获取到它。同时，currentPage和totalPages应该从后端传递给前端的数据中获取。

示例代码：

后端（Node.js）代码：

确保在渲染页面时将正确的数据传递给前端。

// routes/index.js
const express = require('express');
const router = express.Router();
const Page = require('./models/Page'); // 假设你有一个Page模型

router.get('/', function(req, res) {
  if (!req.session.user) {
    res.render('index', { title: '首页-Microblog' });
  } else {
    const page = new Page({ currentPage: 1, totalPages: 0 });
    
    page.getPage(function(totalPages) {
      page.totalPages = totalPages;

      page.select(function(rows) {
        req.session.says = rows.map(row => row); // 将rows转换为数组
        req.session.page = page;
        
        // 传递page对象给前端
        res.render('index', { 
          title: '首页-Microblog',
          page: JSON.stringify(page)
        });
      });
    });
  }
});

module.exports = router;

前端（EJS模板）代码：

在EJS模板中，使用传递的数据来初始化bootstrap-Paginator。

<!-- views/index.ejs -->
<div class="span12">
  <div id="page1"></div>
</div>

<script type="text/javascript">
  var pageData = <%= page %>;
  var options = {
    currentPage: pageData.currentPage,
    totalPages: pageData.totalPages
  };

  $('#page1').bootstrapPaginator(options);
</script>

解释：

  1. 后端：在路由处理函数中，确保page对象被正确设置并传递给前端。
  2. 前端：在EJS模板中，使用传递的数据来初始化bootstrap-Paginator插件。通过<%= page %>将JSON对象传递给JavaScript变量，并将其用于初始化分页器。

这样可以确保前端能够正确获取并使用分页数据。

回到顶部