Paging inside modal window in bootstrap

Question

I have a modal window in bootstrap, and inside it a pagination, it happens that every time I click on some pagination link, the modal closes. Does anyone know how I keep the modal open?

jQuery:

$.post("busca-usuarios.php", {busca: busca, id_profile: id_profile},function(data) {
  $("#user-data").html(data);
});

PHP:

<?php

include realpath(dirname(__FILE__)) . '/includes/init.php';
include realpath(dirname(__FILE__)) . '/includes/function.php';
include realpath(dirname(__FILE__)) . '/includes/class.paginacao.php';
//include realpath(dirname(__FILE__)) . '/includes/sistema.paginacao.php';


$paginaAtual = fRequest::get('paginaAtual');
if (!isset($paginaAtual)) {
    $paginaAtual = 1;
}

$busca = fRequest::get('busca');
$id_profile = fRequest::get('id_profile');
$profile = listaPerfis($id_profile);
$array = fRecordSet::build('FidUser', array('display_name~' => $busca),     array(), 20, $paginaAtual);
$total = fRecordSet::build('FidUser', array('display_name~' => $busca));

$link = "sistema-edit.php?profile=" . $id_profile . "&busca=" . $busca .     "&paginaAtual=";
$count = $total->count();
echo '<table class="table table-striped table-hover tablesorter table-    instituicao-usuario-list table-obra-list">';
echo '
<thead>
  <th>Nome</th>
  <th>E-mail</th>
  <th>Perfil</th>
  <th class="text-center">Adicionar</th>
</thead>';

echo "<tbody>";

foreach ($array as $key => $nome) {

    echo "<tr>";
    echo "<td><h5><a href='usuario-edit.php'>" . $nome->getDisplayName() . "</a></h5><input type='hidden' name='hidden_id_profile' value='" . $nome->getFidUserId() . "'/>";
    echo "<td>" . $nome->getUserEmail() . "</td>";
    echo "<td><select name='select_profile' id='select_profile' class='form-control'><option value='0' selected='selected'>Selecione</option>";

    for ($i = 0; $i < count($profile); $i++) {
        echo "<option value='" . $profile[$i]['id'] . "'>" . $profile[$i]    ['name'] . "</option>";
    }
    echo "</select></td>";
    echo "<td class='text-center'><a class='btn btn-success btn-xs' href='#'><span class='glyphicon glyphicon-plus'></span></a></td>";
    echo "</tr>";
}

echo "</tbody>";

echo "<table id='pag'><tr><td>" . Paginacao::pagination($count, count($array), 10, $paginaAtual, $link, 20) . "</td></tr></table>";
?>

Class:

class Paginacao {

    static function pagination($count, $total, $max, $current, $link, $size = 0) {

        $total = intval($total);
        $max = intval($max);
        $current = intval($current);
        $size = intval($size);
        $numbers = ceil($count / 20);
        $pages = ceil($total / $max);
        $preview = $current === 1 ? "" : "<li><a href=\"" . $link . ($current - 1) . "\" class=\"previous-link\">Anterior</a></li>";

        if ($total > 0) {
            $next = $current === $pages ? "" : "<li><a href=\"" . $link . ($current + 1) . "\" class=\"next-link\">Próximo</a></li>";
        } else {
            $next = "";
        }

        $return = "<div id=\"pagination\" class=\"text-center\"><ul class=\"pagination\">";
        $return.= $preview;

        for ($i = 1; $i <= $numbers; $i++) {
            $return .= "<li><a href='" . $link . $i . "'>" . $i . "</a></li>";
        }

        $return.=$next;
        $return.= "</ul></div>";

        return $return;
    }
}

Answer 1

Try the following Javascript/jQuery:

$(document).on('click', '.pagination a', function(e){
    e.preventDefault();
    $.get(this.href, function(data) {
         $('table').replaceWith(data);
    });    
});

Answer 2

I managed to solve the problem, maybe not in the best way, but it’s working. Follow:

$("#btn-busca").click(function(e) {
        var busca = $("#busca").val();
        var id_profile = $("#id_profile").val();
        //var str = "busca-usuarios.php?id_profile=" + id_profile + "&busca=" + busca;
        loadTabela(busca, id_profile, "");
        e.preventDefault();
    });

    function loadTabela($busca, $id_profile, $paginaAtual) {
        var busca = $busca;
        var id_profile = $id_profile;
        var paginaAtual = $paginaAtual;
        if (paginaAtual == "") {
            $.post("busca-usuarios.php", {busca: busca, id_profile: id_profile}, function(data) {
                $("#user-data").html(data);
                $(".pagination a").attr('onClick', 'alerta(event,this.href)');
            });
        }
        else{
            $.post("busca-usuarios.php", {busca: busca, id_profile: id_profile, paginaAtual: paginaAtual}, function(data) {
                $("#user-data").html(data);
                $(".pagination a").attr('onClick', 'paginacao(event,this.href)');
            });
        }

    }
    function paginacao(e, link) {
        var url = link;
        if (url.indexOf("?") > 0) {
            query = url.split("?");
            param = query[1].split("&");
            for (i = 0; i < param.length; i++) {
                v = param[i].split("=");
                eval("var " + v[0] + "='" + v[1] + "';");
            }
        }
        var busca = busca;
        var id_profile = profile;            
        var paginaAtual = paginaAtual;
        loadTabela(busca,id_profile,paginaAtual);
        e.preventDefault();
    }