Code set specific Alphabet div Letter

jdadwilson

I have a dataTable that contains rows of names of individuals. Each entry is a link to a another page containing additional information on the selected individual. After viewing the individuals information I want to return to the table page and specifically to the alphabet letter from which I left.

Specifically, if from the table page I selected the Letter M and then an individual's name from the M list, which then takes me to the individuals record, I want to be able to return to the table page Letter M.

Given that the selected letter is the first letter of the individuals last name, I would include a menu item on the individual page that would return to the table page and pass the letter parameter.

I have tried the following code in the initComplete function but it does not work.

$('div.myAlphabet.alphabet span:eq(' + thisLetter + ')').click();

Where thisLetter is previous defined as 'M'

Any help is greatly appreciated.

jdadwilson

colin

Hi @jdadwilson ,

You could try implementing stateSave, see example here.

Cheers,

Colin

jdadwilson

Colin, thanks for the reply.

I looked at the example you suggested. Added the stateSave line to my code. Didn't work.

I noticed below the example a box identifying what versions of jQuery and dataTables were loaded with the example. I set both of them in my code. Got an error message... "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3."

Changed the jQuery version to 2.2.4. Still didn't work.

Maybe I am not understanding what the stateSave really does. Follow this example

Load the following page... www.msholmes.org
Select Cemeteries from the menu at the top
On the Cemeteries page select the number 375 on the second line of the table
On the Memorials page select the letter M of the alphabet bar.
From the M list select the first name in the list... Mangum, Ann Diggs
On the Memorial page select the browser back arrow
Memorials page loads to the beginning (All) of the table.

I would like the table to reload to the previously Selected letter (M in this case, and even to the selected page number).

If the stateSave will not do this then might it be possible to set the letter and page number via parameters passed to the page via the URL. I tried this...

$('div #myAlphabet.alphabet span:eq(' + thisLetter + ')').click();

but, that didn't work either. I just defined thisLetter = 'M' for a test.

Note: I am running version 1.10.11 of dataTables. I tried 1.10.18 but the site blows up. With over 60 tables on the site upgrading to a new version is a major endeavor. One that I may soon have to bite the bullet and do.

Again, thanks for your assistance. Your help is greatly appreciated.

jdadwilson

colin

Hi @jdadwilson ,

It's hard to diagnose without seeing it in action. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

jdadwilson

I implemented the code of this example. It does what I want it to do! BUT, on the first pass through the table load it gets an error on this line...

if (state.selected !== undefined) { $('div.alphabet span:eq(' + state.selected + ')').click(); }

Here is the complete table code...

    var oTable = $('#mainTable').DataTable({
        ajaxSource: window.SERVER_PATH + 'files_ajax/ajax_Memorials.php' + sParam,
        stateSave: true,
        columns: [{
 data: 'per_name',
      className: 'udatal',
 orderable: false,
 visible: true,
 searchable: true
 },
                  {
 data: 'per_birthdate',
 className: 'udatar',
 orderable: false,
 visible: true,
 searchable: true
 },
                  {
 data: 'per_deathdate',
 className: 'udatar',
 orderable: false,
 visible: true,
 searchable: true
 },
                  {
 data: 'per_available',
 className: 'udatal',
 orderable: false,
 visible: true,
 searchable: false
 },
                  {
 data: 'cem_name',
      className: 'udatal',
 orderable: false,
 visible: true,
 searchable: false
 }
 ],
        dom: 'A<"top"lfp>rt<"bottom"pi><"clear">',
        stateSaveParams: function(settings, data) { data.selected = $('span.active').index() },
        stateLoadParams: function(settings, data) { savedSelected = data.selected; },
        language: { "paginate": { "previous": "Prev" } },
        lengthMenu: [15, 30, 60],
        order: [],
        paging: true,
        pagingType: 'full_numbers',
        select: { style: 'single', info: false },
        initComplete: function() {
            if ( isNaN(cemId)) { oTable.column(4).visible(true); } else { oTable.column(4).visible(false); } // Don't show cem-column if single cemetery
            doHideAlphaLtrs( this, oTable );
            var api = this.api();
            var state = api.state.loaded();
            if (state.selected !== undefined) { $('div.alphabet span:eq(' + state.selected + ')').click(); }
            if (state.start !== 0) { api.page(state.start / state.length).draw(false); }
            api.state.save();
        },
        drawCallback: function() {
 doHideInfoAreas(this);
 }
    });

Thanks for your help!

jdadwilson

colin

BUT, on the first pass through the table load it gets an error on this line...

Yep, you're close. The error is because there's no saved state on the first pass through, so the code should check for state === null before referencing state.selected.

Colin

jdadwilson

I modified the code as follows...

if ( state !== null ) {
    if (state.selected !== undefined) { $('div.alphabet span:eq(' + state.selected + ')').click(); }
    if (state.start !== 0) { api.page(state.start / state.length).draw(false); }
}

Works great... no error!

Thanks, for your work help.

jdadwilson