Remember Pagination and Ordering

[rafaelcorreiapoli]

Hi! I have a table where the user can click on a row to see more about that specific item. He is taken to another route and eventually can come back to the page, but then the table is back to default state (page 0 with no specific ordering) How can I detect the current page to save it to a Session variable and then set the page (when the user comes back) with that value ?

Thanks.

[aldeed]

I've encountered this problem, too, and I will figure out a solution at some point. There is likely a way to do it without any specific support being added. DT API should emit an event when page is changed, which should then update URL/state to add ?page=3 or something similar. Then on route load, that value can also be checked and immediately load that page. That solves the problem of routing back and back button, and also makes it possible to send the URL to someone and they will see the same thing.

[rafaelcorreiapoli]

Hello, i'm trying to do something like this: Listen for changes on page with

    pagamentosDT.on( 'page.dt', function () {
        var info = pagamentosDT.page.info();
        Session.set('currentPage',info.page);
    } );

(this code is placed on onRendered of the table's parent template

Then I call this code to set the page:

var pagamentosDT = $('#pagamentosDT').DataTable();
pagamentosDT.page(Session.get('page')).draw('page');

(also placed on onRendered) The problem is: I think this last code (set page) is running before the datatable is completely loaded, because it only works if I do something like Meteor.setTimeout(fn()...,2000) (where fn() is the function to change the page)

I'm having troubles to listen for a 'ready' callback of the datatable, could you please help me ?

[aldeed]

There may not be an indication of when it's ready due to the way it currently updates. I will look into some solution.

[rafaelcorreiapoli]

Thanks man!! I really need to get this working for a professional project, sorry for bothering =(

[rafaelcorreiapoli]

fnInitComplete:function(){ console.log("FN INIT COMPLET"); this.DataTable().page(2).draw('page'); }

I'm passing this to TabularTables constructor, shouldn't it work? =(

[aldeed]

It should be initComplete. Anything starting with fn is the old datatables API. It might still work, though, I'm not sure. But either way it actually can reload several times for a single page (as data comes down from the server) so it is not reliable.

Edit: Correct new option names are listed here: http://datatables.net/reference/option/

[jordangarside]

:+1: Not sure how I'm going to deal with state not being saved right now.

[rafaelcorreiapoli]

what about afterFlush? is it worth trying ?

[leemarkwood]

Why not use the default datatables state saving?

e.g.

Tabular.Table({
  bStateSave: true,
  allOtherOptionsHere
});

Then just set an ID as a template param. like so:

{{> tabular table=TabularTables.TableName selector=selector id="datatable_1" class="table"}}

This will give you the default state saving of Datatables.

[rafaelcorreiapoli]

because this only works when refreshing the page... and thats not the way meteor change routes

[leemarkwood]

The default method of state saving works for me and my app. it will only work when refreshing the page unless you set the ID on the template.

[rafaelcorreiapoli]

hmm! nice! i will have a look on it, thanks

[rafaelcorreiapoli]

@leemarkwood, im doing exactly what you said and it still does not works =( here is my table:

        {{> tabular table=TabularTables.Cargos class="table table-striped table-bordered table-hover" id="cargosDT" width="100%"}}

Here is my table object:

TabularTables.Cargos = new Tabular.Table({
  sub: new SubsManager(),
  name: "CargosList",
  collection: Cargos,
  extraFields: ['_id','classificacaoId'],
  columns: [
    {
      title:"Nome",
      data:'nome',
      tmpl: Meteor.isClient && Template.nameLink,
      width:"60%"
    },  
    {
      data: "classificacao()", title: "Classificação", width:"20%",
      createdCell: Meteor.isClient && function (cell, cellData, rowData) {
        return Blaze.renderWithData(Template.nameLink, {
          link: cellData.link(),
          nome: cellData.nome
        }, cell);
      }, render: function(){}
    },     
    {title:"Ações",tmpl: Meteor.isClient && Template.cargosAcoes,width:"20%"}
  ],
  bLengthChange:false,
  bPaginate:true,
  bStateSave: true,  
});

[leemarkwood]

Try changing bStateSave to the new way of declaring the options which is "stateSave". Might also be worth putting it first out of all the options.

[joaocarloscabral]

+1