Ajax Pagination with Filter

Hi, I have some difficulties with my ajax pagination linked to a filter. Here's how it should work. The user can access via a specific page to a form. When clicking the submit button, a raw sql request is made in JS and a POST ajax request is achieved to get the results at the bottom of the page with a pagination menu. This part works. But I have some issues with the pagination menu because the links don't work. Here's my code: Routes

Route::get('articles/filter', 'ArticleController@filterx');
Route::post('articles/request/ajax/articles/filter', 'ArticleController@filtery');
Route::get('articles/request/ajax/articles/filter', 'ArticleController@filtery');

Controller ArticleController

public function filterx() {   // get filter page
    return view('filter');
}
 
public function filtery(Request $request) {   // filter ajax function
    $articles = Article::paginate(2);
    if($request->ajax()) {
        // partial view returned in html
        return $html = view('filterResults', compact('articles'));
    }
}

Views filter.blade.php

@extends('layouts/app')
 
@section('title')
    Title
@endsection
 
@section('content')
<div class="container">
    <!-- filter -->
    <h2>Filter</h2>
    <div class="content-card content">
        <form method="POST" action="">
            <!-- code du form -->
        </form>
    </div>
    <div id="filter-results">
    </div>
</div>
@endsection

filterResults.blade.php

@foreach($articles as $article)
    <p>{{ $article->name }}</p>
@endforeach
 
{{ $articles->links() }}

Javascript

$("#submit-button").click(function(e) {
    e.preventDefault();
    // ajax request (raw mysql request)
    var requestQuery = ...;    // (assez long)
    console.log(requestQuery);    // Vérification dans la console
    $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        url: '../articles/request/ajax/articles/filter',
        type: 'POST',
        data: {
            request: requestQuery
        },
        success: function(html) {
            //getQuery(page);
            $("#filter-results").empty().html(html);
        }
    });
});

$(window).on('hashchange', function() {
    // si il y a un hash dans l'url
    if (window.location.hash) {
        // var $page contient la valeur du hash et supprime le # de l'url
        var page = window.location.hash.replace('#', '');
        // si $page n'est pas un nombre ou si c'est <= 1, ça retourne false
        if (page == Number.NaN || page <= 0) {
            return false;
        }
        // si c'est ok, la fonction getData() est retournée avec $page en paramètre
        else {
            getData(page);
        }
    }
});
 
$(document).on('click', '.pagination a', function(e) {
    e.preventDefault();
    $('.pagination li').removeClass('active');
    $(this).parent('li').addClass('active');
    var url = $(this).attr('href');
    var page = $(this).attr('href').split('page=')[1];
    getData(page,url);
});
 
function getData(page,url) {
    $.ajax(
    {
        url: url,
        type: 'get',
        datatype: 'html',
        done: function(data) {
            console.log('ok');
            $('#filter-results').empty().html(data);
            location.hash = page;
        },
        fail: function(jqXHR, ajaxOptions, thrownError) {
            console.log('No response from server');
        }
    });
}

I don't understand why it doesn't work, I think I missed or misunderstood something.

Thanks and have a good day