setembro 2017
D S T Q Q S S
« ago    
 12
3456789
10111213141516
17181920212223
24252627282930

Integrando jQuery dataTables com jPaginator

Algum tempo atrás eu comecei a utilizar o maravilhoso plugin jQuery DataTables para exibir dados em alguns projetos. Por outro lado, o plugin jQuery jPaginator adiciona uma ferramenta de paginação perfeita, com barra de rolagem opcional para longa listagem de conteúdo. Isto é muito útil quando se tem uma lista longa de páginas, por que o usuário utiliza a barra de rolagem para ter uma real dimensão dos dados expostos.
Então, eu imaginei por que não expandir o jQuery DataTables, que possui uma API muito bem escrita e que permite que você faça plugins e extenda a sua funcionabilidade, para utilizar o sistema de paginação do jPaginator.
O resultado foi este script:

/**
 * jQuery DataTables jPaginator plugin v1.0
 * by Ernani Azevedo <azevedo@intellinews.com.br>
 *
 * Licensed under GPL v3.0.
 *
 * You'll need jQuery DataTables (http://datatables.net/) and jPaginator
 * (http://remylab.github.com/jpaginator/) loaded before load this one.
 */

// API method to get paging information (Got idea from Twitter Bootstrap plugin):
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings)
{
  if ( 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)};
  } else {
    return {
      "iStart": 0,          
      "iEnd": 0,        
      "iLength": 0,
      "iTotal": 0,      
      "iFilteredTotal": 0,
      "iPage": 0,
      "iTotalPages": 0
    }
  }
};

// Extends DataTable to support jPaginator pagination style:
$.fn.dataTableExt.oPagination.jPaginator = {
  'paginator': $('<span>').html ( '<nav id="m_left"></nav><nav id="o_left"></nav><div class="paginator_p_wrap"><div class="paginator_p_bloc"><!--<a class="paginator_p"></a>--></div></div><nav id="o_right"></nav><nav id="m_right"></nav><div class="paginator_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>'),
  'fnInit': function ( oSettings, nPaging, fnCallbackDraw) {
    $(nPaging).prepend ( this.paginator);
    $(this.paginator).jPaginator ( {
      selectedPage: 1,
      nbPages: 1,
      nbVisible: 6,
      overBtnLeft: '#o_left',
      overBtnRight: '#o_right',
      maxBtnLeft: '#m_left',
      maxBtnRight: '#m_right',
      minSlidesForSlider: 2,
      onPageClicked: function ( a, num) {
        if ( num - 1 == Math.ceil ( oSettings._iDisplayStart / oSettings._iDisplayLength)) {
          return;
        }
        oSettings._iDisplayStart = ( num - 1) * oSettings._iDisplayLength;
        fnCallbackDraw ( oSettings);
      }
    }).addClass ( 'jPaginator');
  },
  'fnUpdate': function ( oSettings, fnCallbackDraw) {
    if ( ! oSettings.aanFeatures.p) {
      return;
    }
    var oPaging = oSettings.oInstance.fnPagingInfo ();
    $(this.paginator).trigger ( 'reset', { nbVisible: 6, selectedPage: oPaging.iPage + 1, nbPages: oPaging.iTotalPages});
  }
};

Não esqueca, você deve executar a função de inicialização dataTables () passando como parâmetro a opção de paginador desejada, neste caso, jPaginator. Exemplo de código abaixo:

$('#example').dataTable (
{
  'sPaginationType': 'jPaginator'
});

O resultado é uma boa melhoria quando exibido um grande volume de dados com o DataTables. Você pode ver ele em ação aqui.

Você também pode pegar o código aqui.

Comentários estão bloqueados.