Realizar llamada a controlador mediante AJAX

[detective_jd]

Buenas a todos, al final pude generar el listado desde ajax y hacer click en los botones de paginación realizando los siguientes cambios:

DepartamentoController.php

Código PHP:

public function obtenerTodos(){
        $json = [];
        
        Session::set('pDep', isset($_GET['p']) ? $_GET['p'] : 1);
        
        if(isset($_POST['stEstado'])){
            Session::set('eDep', $this->clean($_POST['stEstado']));
        } else {
            Session::set('eDep', Session::get('eDep'));
        }
        
        if(isset($_POST['txtbuscador'])){
            Session::set('bDep', $this->clean($_POST['txtbuscador']));
        } else {
            Session::set('bDep', Session::get('bDep'));
        }
        
        $params = [
            "criterio"=> "%".Session::get('bDep')."%",
            "estado" => Session::get('eDep')
        ];
        
        $tabla = (new Departamento())->find($params);
        
        $departamentos = $this->getPaginator()->paginar($tabla, Session::get('pDep'));
        $paginador = $this->getPaginator()->getPages();
        
        foreach($departamentos as $dep){
            array_push($json, [
                "id" => $dep->getId(), 
                "nombre" => $dep->getNombre(),
                "activo" => $dep->isActivo()
            ]);
        }
        
        header("Content-Type: application/json");
        echo json_encode([
            "tabla" => $json,
            "paginador" => $paginador
        ]);
    }
 

departamento.js

Código Javascript:

function load_data(page_number = 1){
        $.ajax({
            url: "index.php?c=departamentos&a=obtenerTodos",
            type: "GET",
            dataType: "JSON",
            data: {
                txtbuscador: $("#buscador").val(),
                p: page_number
            },
            success: function(data) {
                var paginador = data.paginador;
                var tabla = data.tabla;
                var vTabla = '';
                var vPaginador = '';
                var i;
 
                for (i = 0; i < tabla.length; i++) {
                    vTabla += '<tr>' +
                    '<td></td>' +
                    '<td>' + tabla[i].nombre + '</td>' +
                    '<td>' + (tabla[i].activo ? "Activo" : "Inactivo") + '</td>' +
                    '</tr>';
                }
 
                if(paginador !== null){
                    vPaginador += "<div class='d-flex justify-content-center'>";
                    vPaginador +="<ul class='pagination' id='pagination'>";
 
                    if(paginador["primero"]){
                        vPaginador += "<li class='page-item'>";
                        vPaginador +="<a class='page-link' id='" + paginador["primero"] +"' title='Primero'>";
                        vPaginador +="<i class='fas fa-angle-double-left'>&nbsp;</i>";
                        vPaginador +="</a>";
                        vPaginador +="</li>";
                    } else {
                        vPaginador +="<li class='page-item disabled'>";
                        vPaginador +="<span class ='page-link'>";
                        vPaginador +="<i class='fas fa-angle-double-left'>&nbsp;</i>";
                        vPaginador +="</span>";
                        vPaginador +="</li>";
                    }
 
                    if(paginador["anterior"]){
                        vPaginador +="<li class='page-item'>";
                        vPaginador +="<a class='page-link' id='" + paginador["anterior"] +"' title='Anterior'>";
                        vPaginador +="<i class='fas fa-angle-left'>&nbsp;</i>";
                        vPaginador +="</a>";
                        vPaginador +="</li>";
                    } else {
                        vPaginador +="<li class='page-item disabled'>";
                        vPaginador +="<span class='page-link'>";
                        vPaginador +="<i class='fas fa-angle-left'>&nbsp;</i>";
                        vPaginador +="</span>";
                        vPaginador +="</li>";
                    }
 
                    for(i = 0; i < paginador["rango"].length; i++){
                        if(paginador["actual"] === paginador["rango"][i]){
                            vPaginador +="<li class='page-item active'>";
                            vPaginador +="<span class='page-link'>";
                            vPaginador += paginador["rango"][i];
                            vPaginador +="</span>";
                            vPaginador +="</li>";
                        } else {
                            vPaginador +="<li class='page-item'>";
                            vPaginador +="<a class='page-link' id='" + paginador["rango"][i]+"' class='page-link'>";
                            vPaginador += paginador['rango'][i];
                            vPaginador +="</a>";
                            vPaginador +="</li>";
                        }
                    }
 
                    if(paginador["siguiente"]){
                        vPaginador +="<li class='page-item'>";
                        vPaginador +="<a class='page-link' id='" + paginador["siguiente"] +"' title='Siguiente'>";
                        vPaginador +="<i class='fas fa-angle-right'>&nbsp;</i>";
                        vPaginador +="</a>";
                        vPaginador +="</li>";
                    } else {
                        vPaginador +="<li class='page-item disabled'>";
                        vPaginador +="<span class='page-link'>";
                        vPaginador +="<i class='fas fa-angle-right'>&nbsp;</i>";
                        vPaginador +="</span>";
                        vPaginador +="</li>";
                    } 
 
                    if(paginador["ultimo"]){
                        vPaginador +="<li class='page-item'>";
                        vPaginador +="<a class='page-link' id='" + paginador["ultimo"] +"' title='Último'>";
                        vPaginador +="<i class='fas fa-angle-double-right'>&nbsp;</i>";
                        vPaginador +="</a>";
                        vPaginador +="</li>";
                    } else {
                        vPaginador +="<li class='page-item disabled'>";
                        vPaginador +="<span class='page-link'>";
                        vPaginador +="<i class='fas fa-angle-double-right'>&nbsp;</i>";
                        vPaginador +="</span>";
                        vPaginador +="</li>";
                    }
 
                    vPaginador +="</ul>";                                
                    vPaginador += "</div>";
                }
 
                $('#DataResult').html(vTabla);
                $('#DataPages').html(vPaginador);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    }
    
    $(window).on("load", function() {
        load_data();
    });
    
    $(document).on("click","#pagination a",function(e) {
        e.preventDefault();
        var page_id = $(this).attr("id");
        load_data(page_id);
    });
    
    [B]$("#buscador").keyup(function(e){
    e.preventDefault();
    load_data();
    });[/B]
    });
 

El único problema es que ahora, al realizar una búsqueda escribiendo en la caja de texto, el filtro no cambia para nada, antes de pasar a ajax, los filtros andaban bien y no sé que necesito para dejar funcional el buscador.

Espero sus respuestas y saludos