Envolva todo o conteúdo que deseja paginar em um elemento com a classe ui_page
Envolva cada item da paginação em um elemento com a classe ui_pageItem
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
A paginação terá 10 itens por página
Para alterar esse padrão, use em ui_page o atributo data-perpage e informe o valor desejado, ex: data-perpage="20"
Se achar necessário, gere o permalink para cada item da paginação:
Para isso, insira o atributo data-link="true" no elemento com a classe ui_page. Dessa forma, é possível indicar qual página será aberta ou capturar a URL após clicar em delas, seja para compartilhar ou abrir através de um endereço específico
Caso queira, altere o nome do parâmetro por meio do atributo data-link-name e informe o valor desejado no elemento com a classe ui_page.
A navegação será desabilitada para os botões de paginação que porventura receberem a classe disabled.
Após a paginação, usuários avançados podem implementar funções do tipo callbefore e callback
Para isso, crie as funções callbefore_pagination(pageNum,totalPages) e/ou callback_pagination(pageNum,totalPages) e implemente as ações que irão ocorrer antes e/ou após a paginação
pageNum é número da página de destino e totalPages é o número de páginas. Já a página de origem pode ser obtida pela função $.getUrlVar("parametro"), se data-link="true", ou pelo botão active de .ui_pageItemNavPages.
Se callbefore_pagination(pageNum,totalPages) retornar return false, a páginação será interrompida.
Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callbefore e callback em arquivos específicos, presentes nas respectivas páginas finais, já que os seus objetivos não são genéricos.
A função de paginação pode ser usada mais de uma vez no mesmo documento