Missing helper "paginate"

[benbagley]

I'm trying to implement this currently and I'm getting the following

Missing helper "paginate"

I have the following code.

router.get('/dashboard', ensureAuthenticated, (req, res) => {
  User.find({}, function(err, users) {
    res.render('dashboard/index.hbs', {
      pageTitle: 'Dashboard',
      users: users,
      pagination: {
        page: 1,
        limit: 6,
        // totalRows: TotalNoOfROWS,
        queryParams: users
      }
    });
  });
});

const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const hbs = require('hbs');
const expressValidator = require('express-validator');
const flash = require('connect-flash');
const session = require('express-session');
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const mongoose = require('mongoose');
const fs = require('fs');
const paginateHelper = require('express-handlebars-paginate');

hbs.registerHelper('paginateHelper', paginateHelper.createPagination);

{{paginate pagination limit="6"}}

What am I doing wrong here?

[babiz]

@benbagley

Please change this

{{paginate pagination limit="6"}}

to

{{paginateHelper pagination limit="6"}}

The message says paginate helper not found

[benbagley]

Quick update @babiz

I now have the following

router.get('/dashboard', ensureAuthenticated, (req, res) => {
  const limit = parseInt(req.query.limit) || 6;
  const page = parseInt(req.query.page) || 0;

  User.find({}, function(err, users) {
    res.render('dashboard/index.hbs', {
      pageTitle: 'Dashboard',
      users: users,
      pagination: {
        page: page,
        limit: limit
      }
    });
  });
});

const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const hbs = require('hbs');
const expressValidator = require('express-validator');
const flash = require('connect-flash');
const session = require('express-session');
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const mongoose = require('mongoose');
const fs = require('fs');
const paginateHelper = require('express-handlebars-paginate');

// Pagination
hbs.registerHelper('paginateHelper', paginateHelper.createPagination);

{{paginateHelper pagination rightText="Next" leftText="Prev" limit="6" paginationClass="pagination"}}

and now I'm getting https://gyazo.com/5aea2ff5a126fe08127d0d3bbd0f3bc4 it doesn't seem to be rendering correctly. Here is how the code is rendering like https://gyazo.com/2357eb928850f145ac0908b2a39c9cd6 seems to be rendering out as a string.

If I do

{{{paginateHelper pagination rightText="Next" leftText="Prev" limit="6" paginationClass="pagination"}}}

It renders but it doesn't render the page numbers.

https://gyazo.com/6dce36a7cbb5c5a5750be31a3ccde2e9

Also I would like to note all records are being displayed here, there not getting limited to 6 records a page.

[babiz]

@benbagley Are you still having this problem?

[eXifreXi]

Hello there, I seem to have the same or at least a similar issue. I also saw that plain text and I've yet to actually see the pagination ui. Currently I only get two dots: https://puu.sh/CAhyI/ef67b9a19b.png

I pasted {{{paginateHelper pagination}}} below my table. The screenshot above shows that end of the table. Here are my settings:

res.render('infractions/listInfractions', {
infractionList: infractionList,
    pagination: {
        page: page,
        pageCount: 10,
        totalRows: 10
    }
});

And here is how I set things up:

this.app.engine('hbs', hbs({
    extname: 'hbs',                             // Extension (*.hbs Files)
    defaultLayout: 'layout',                    // Main layout -> layouts/layout.hbs
    layoutsDir: __dirname + '/layouts',         // Layouts directory -> layouts/
    partialsDir: __dirname + '/views/partials', // Partials directory -> /views/partials
    helpers: {
        paginateHelper: require('express-handlebars-paginate').createPagination
    }
}));

I'm using the Material Design Light stuff, maybe that causes it? Really not sure what I'm doing wrong. This is what I see if I inspect the page: https://puu.sh/CAhEl/23ee81271d.png

Thanks for your time (:

[babiz]

@eXifreXi It seems that the material design is creating this conflict. This was built for using twitter bootstrap and may not support the material design. Seems like from the inspect element screenshot the HTML is present but not reflecting the correct styling. It also uses font-awesome.

[eXifreXi]

Hm, alright, would make sense. Can't check right now, but would manually setting the classes that your system uses be an option? I do like the Material Design stuff. If not I might have to look into using Bootstrap.