Alphabet input search - stateSave

pchDatatables

I implemented Alphabet input search plugin from the blogs
https://datatables.net/blog/2014-09-22

But can't figure how to modify it so it can store the search in savestate.
My table has stateSave on and it saves items in the search and pagination information but it will not store th letter clicked on. Any ideas how to make that work?

colin

Hi @pchDatatables ,

This here will do the trick. It's keeping a record of the active selection, then stores it in the saved info.

Hope that works for you,

Cheers,

Colin

pchDatatables

This is perfect, except I am now combining it with everything else so if you leave the page and come back it also auto jumps top the right row. The problem is if I put

$('div.alphabet span:eq(' + savedSelected + ')').click();
at the top it will not jump to the row in the line
var row = api.row(function ( idx, data, node ) { return data[1] === 'JUMPHERE'; } );
but if I move it to the top the screen jumps to the right row but won't remember the last letter pressed.

Any thoughts?

$(document).ready( function () {
                var savedSelected;
                var table = $('#tabledisplay').DataTable( {
                stateSaveParams: function(settings, data) { data.selected = $('span.active').index() },
                stateLoadParams: function(settings, data) { savedSelected = data.selected; },
                initComplete: function(settings, json) {
                    var api = this.api();
                    var row = api.row(function ( idx, data, node ) { return data[1] === 'JUMPHERE'; } );
                    if (row.length > 0) { row.select().show().draw(false); }
                    $('html, body').animate({ scrollTop: ($('.selected').offset().top-100) },500);                  
                    $('div.alphabet span:eq(' + savedSelected + ')').click();                       <!-- move this line top remembers letter but not scroll leave bottom remembers location but not letter clicked-->
                    api().state.save();
                },
                dom:  "BfpAtil",                
                pageLength: -1,
                lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
                paging: true,
                scroller: false,
                ordering: true,
                pagingType: "simple",
                stateSave: true,
                stateDuration: 60 * 60 * 24 *7,
                order: [[ 2, "asc" ]],
                info: true,
                language: {
                    paginate: {
                        previous: "Prev"
                        }
                },
                
  }); 
  } 
  );

pchDatatables

I should clarify that it doesn't jump to the correct row if the pagination is set to not ALL and the the row to jump to is not on page 1 (it does work if the row is on the initial page).

If I take out $('div.alphabet span:eq(' + savedSelected + ')').click(); it will jump to the correct page of the selected row in the pagination (i.e. page 2, 3, etc...)

colin

Hi @pchDatatables ,

As there's so much going on, to get it back to the same state, you'll need to backstep through the stages that got you to that display to begin with.

Given the filter would need to be done before the scroll, you would need to filter first (click on the alphabet search) before anything else.

Cheers,

Colin

pchDatatables

I am trying to at least restore the pagination page left off on. Any thoughts on how to modify the example you have at http://live.datatables.net/lunuwixo/1/edit to have it save the pagination too
If you pull out:

'stateSaveParams': function(settings, data) {
  data.selected = $('span.active').index()
},
'stateLoadParams': function(settings, data) {
  savedSelected = data.selected;
},
'initComplete': function() {
  $('div.alphabet span:eq(' + savedSelected + ')').click();
  this.api().state.save();
}  

The pagination (i.e. I am on page 4) is remembered on reload. once this code is in there it forgets that and goes back to page 1

colin

Yep, as I mentioned, you need to repeat the steps in the order that they would occur - see this updated fiddle here. It needs a bit more work if you want to include searches or change to the page length, but that's a good starting point here.

Cheers,

Colin