CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvc
Dimitri
Dimitri

Reputation: 95

How to save status of a jQuery table with pagination after relaoding the page

I have an jQuery Table with dynamic number of rows. I've made a pagination and it works good, but after every reload it starts wit a page #1, what i want to do is to save a status of my table and get the current page what i had befor reloading. I've heard about $('#example').DtaTable({saveState:true}); but in my case it doesn't really work, because I'm using my own pagination. Maybe somebody knows how to integrate it to my code. Thanks in advance.

my code:

creation of the Table:

     function LoadData() {




      var tab = $('<table  id=calendar class=MyTable border=1 ></table>');
      var thead = $('<thead><tr></tr></thead>');
      var tbody = $('<tbody id="paginate"></tbody>')
      thead.append('<th style="padding:5px">FSE' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Monday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Tuesday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Wednesday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Thursday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Friday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Saturday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Sunday' + "&nbsp;" + '</th>');
      tab.append(thead);


      for (var i = 1; i < 51; i++) {
      var trow = $('<tr/>').data("id",i);

    trow.append('<td>FSE' + i + '</td>');
    trow.append('<td>Monday' + i + '</td>');
    trow.append('<td>Tuesday' + i + '</td>');
    trow.append('<td>Wednesday' + i + '</td>');
    trow.append('<td> Thursday' + i + '</td>');
    trow.append(' <td>Friday' + i + '</td>');
    trow.append('<td>Saturday' + i + '</td>');
    trow.append('<td>Sunday' + i + '</td>');
    tbody.append(trow);


       }
        $('#calendar').dataTable({ stateSave: true })
        tab.append(tbody);
        $("#Tabledta").html(tab);


    }

and my pagination:

  $(document).ready(function () {

      LoadData(); 
//number of pages and items length
var show_per_page = 10;
var number_of_items = $('#paginate tr').length;

//navigation bar
var navigation_html = '<a class="previous_link" href="">Prev</a>' + '&nbsp';
var current_link = 1;
for (var i = 0; i < number_of_items; i = i + show_per_page) {
    navigation_html += '<a class="page_link" href="" data-start="' + i + '" data-end="' + (i + show_per_page) + '">' + (current_link) + '</a>' + '&nbsp';
    current_link++;
}
navigation_html += '<a class="next_link" href="">Next</a>';
$('#page_navigation').html(navigation_html);
rowDisplay(0, show_per_page);

//Activating of the first page
function rowDisplay(startIndex, endIndex) {
    $('#paginate tr').hide().slice(startIndex, endIndex).show();
}

//Pagination functionylity
     $('.page_link').click(function (e) {
          e.preventDefault();
          $('.active').removeClass('active');
          $(this).addClass('active');
          var IndexData = $(this).data();
          rowDisplay(IndexData.start, IndexData.end);
       }).first().addClass('active');

                 //"Next" & "Previous" functionality
              $('.previous_link, .next_link').click(function (e) {
              e.preventDefault();
              var traverse = $(this).is('.previous_link') ? 'prev' : 'next';
              $('.page_link.active')[traverse]('.page_link').click();
          });


      });

Upvotes: 0

Views: 409

Answers (1)

Borka
Borka

Reputation: 803

You can do something like this to set the active page

// use the id of the table, in case multiple tables present
function savePage(tableId, pageId) {
    localStorage.setItem(tableId, pageId);
}

function loadPage(tableId) {
    return localStorage.getItem(tableId);
}

Then in your code after everything is initialized

function setPageId(tableId) {
    var pageId = loadPage(tableId);

    if(!pageId) {
        return;
    }

    $('.active').removeClass('active');
    var $pageButton = $('div:contains("' + pageId + '")');

    if(!pageButton) {
        return;
    }

    var pageData = $pageButton.data();
    rowDisplay(pageData .start, pageData .end);
}

As for saving the page data 

$('.page_link').click(function(e) {
        e.preventDefault();
        $('.active').removeClass('active');
        $(this).addClass('active');
        var IndexData = $(this).data();
        var pageNumber = $(this).text().trim();
        savePage(tableId, pageNumber)
        rowDisplay(IndexData.start, IndexData.end);
    })
    .first()
    .addClass('active');

You can set the tableId, maybe on top of the page, so you can have an easier access to it in your functions.

Hope it helps

EDIT:

Here's a codepen with implementation

Upvotes: 1

Related Questions