javascript Paginação com AJAX

[Cesar Masserati Procopio 0]

Pessoal, boa Tarde!
Pode me Ajudar com um probleminha que estou tendo hehehe...
Fiz essa paginação via AJAX completa está tudo funcionando blz, porém quando tiver muitos registros está desconfigurando. 
Gostaria de fazer, conforme pode ver nas imagens abaixo, a Imagem Original ficar igual a Imagem Modificada!
Alguma Dica ou sugestão?

function filtroProc(){
    $('.pagination').html('');
    var filtro = $('input[name=filtro]:checked').val();
    filtros.setFiltro(filtro);
    var offset = getPaginacao.getOffsetAtual();
    var maximo = getPaginacao.getMaximo();
    var links = getPaginacao.getLink();
    $.ajax({
        url:'nav/conf/con_lis_pro_ajax.php',
        type:'POST',
        dataType:'json',
        data:{offset:offset, maximo:maximo, filtro:filtro},
        success:function(json){
            filtros.setTotalFiltro(json.totalFil);
            getPaginacao.setTotal(json.totalItem);
            var totalFiltros = filtros.getTotalFiltro();
            var totalItens = getPaginacao.getTotal();
            $('.tabela tbody').empty();
            $(".contagem").html(totalFiltros);
            $(".total").html(totalItens);
            var verif = 0;
            if(verif === json){
                var html = '<tr>';
                    html += '<td colspan=5><div class="msg_no">Não existe cadastro de Processos de Emissão!</div></td>';
                    html += '</tr>';
                $('.tabela tbody').append(html);
            }else{
                for(var i in json.lista){
                    var html = '<tr>';
                        html += '<td align="center">'+json.lista[i].id+'</td>';
                    if(json.lista[i].status === 'a'){
                        html += '<td align="center"><img src="../image/semaforo/verde.png" data-id="'+json.lista[i].id+'" data-name="i" onclick="atualizaStatus(this)"/></td>';
                    }else{
                        html += '<td align="center"><img src="../image/semaforo/vermelho.png" data-id="'+json.lista[i].id+'" data-name="a" onclick="atualizaStatus(this)" /></td>';
                    }
                    html += '<td align="center">'+json.lista[i].identificador+'</td>';
                    html += '<td>'+json.lista[i].descricao+'</td>';
                    html += '<td><a class="lista_bt2" href="#" data-id="'+json.lista[i].id+'" onclick="editarPro(this)"></a></td>';
                    html += '</tr>';
                    $('.tabela tbody').append(html);
                }
            }
            // ---- PAGINAÇÃO ------ //
            var maximo = getPaginacao.getMaximo();
            var totalPaginas = Math.ceil((totalFiltros / maximo));
            htmlPag = '<a href=\"#" data-id="1" onclick="dispara(this);">Primeira Página</a>&nbsp;&nbsp;&nbsp;';
            for (var i = 1; i <= totalPaginas; i++){
                htmlPag += '<a href="#" data-id="'+i+'" onclick="dispara(this)" class="">'+i+'</a>&nbsp;&nbsp;&nbsp;';
            }
            htmlPag += '<a href=\"#" data-id="'+totalPaginas+'" onclick="dispara(this);">Ultima Página</a>&nbsp;&nbsp;&nbsp;';
            $('.pagination').append(htmlPag);
            $('.pagination').find('.active_pag').removeClass('active_pag');
            $('.pagination').find('a[data-id='+getPaginacao.getPagAtual()+']').addClass('active_pag'); 
        }
    });
}