Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to return the specific page in jQuery Datatables paging?

Tags:

jquery

I have a datable and "Edit" button in each row. When I click that button, /edit/ url opens. Everything is Ok until now. But if I need to go back to the datatable, it starts from the first page. What can I do for that?

 $('#table').dataTable({
        "sDom" : 'rtFip>',
        'fnDrawCallback' : function() {
            $('input:checkbox, input:radio').checkbox();
        },
        'sPaginationType' : 'full_numbers',
        "bServerSide" : true,
        "sAjaxSource" : "{% url 'get_menu_list' %}"
  });
like image 919
Burak Avatar asked Jul 09 '12 17:07

Burak


3 Answers

DataTables has option to store state in a cookie.

$(document).ready(function() {
    $('#example').dataTable( {
        "stateSave": true
    } );
} );

http://datatables.net/examples/basic_init/state_save.html

like image 199
dotjoe Avatar answered Oct 11 '22 01:10

dotjoe


Storing the state in a cookie fails for large tables. This local storage solution works for large tables.

$(document).ready(function() {
    $('#example').dataTable( {
        "bStateSave": true,
        "fnStateSave": function (oSettings, oData) {
            localStorage.setItem( 'DataTables', JSON.stringify(oData) );
        },
        "fnStateLoad": function (oSettings) {
            return JSON.parse( localStorage.getItem('DataTables') );
        }
    } );
} );

Source: http://datatables.net/blog/localStorage_for_state_saving

like image 39
tponthieux Avatar answered Oct 11 '22 02:10

tponthieux


How to return the specific page in jQuery Datatables paging?

Use fnPagingInfo

Get information about the paging settings that DataTables is currently using to display each page, including the number of records shown, start and end points in the data set etc.

      $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
      {
        return {
          "iStart":         oSettings._iDisplayStart,
          "iEnd":           oSettings.fnDisplayEnd(),
          "iLength":        oSettings._iDisplayLength,
          "iTotal":         oSettings.fnRecordsTotal(),
          "iFilteredTotal": oSettings.fnRecordsDisplay(),
          "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
          "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
        };
      };


      $(document).ready(function() {
      $('#example').dataTable( {
      "fnDrawCallback": function () {
      alert( 'Now on page'+ this.fnPagingInfo().iPage );
      }
      } );
      } );

Source: http://datatables.net/plug-ins/api

like image 40
Control Freak Avatar answered Oct 11 '22 03:10

Control Freak