Html

<table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Salary</th>
                <th scope="col">Age</th>
            </tr>
        </thead>
        <tbody class="page-data">


        </tbody>
    </table>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li onclick="prePage()" class="page-item page-list">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>

            <li onclick="nextPage()" class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                </a>
            </li>
        </ul>
    </nav>

JS Code

<script>
        let userData = null;
        $.ajax({
            url: "http://dummy.restapiexample.com/api/v1/employees",
            type: "get",
            async: false,
            success: function(users) {
                userData = users.data;
            }
        });
        var currentPage = 0;
        let pages = "";
        let page_size = 5;
        pages = paginate(userData, page_size);
        pageLi = "";
        pages.forEach((element, index) => {
            if (index != 0)
                pageLi += '<li onclick="pageChange(' + index + ')" id="page_' + index + '" class="page-item list-item" id="page_' + index + '"><a class="page-link" href="javascript:void(0)">' + index + '</a></li>';
        });
        $(".page-list").after(pageLi);
        page = pages[currentPage];
        printRows(page);

        function nextPage() {
            if (pages.length - 1 > currentPage)
                page = currentPage + 1;
            pageChange(page);
        }

        function prePage() {
            if (currentPage < pages.length && currentPage != 0)
                page = currentPage - 1;
            pageChange(page);
        }

        function pageChange(page) {
            currentPage = page;
            $(".list-item").removeClass("active");
            $("#page_" + page).addClass("active");
            $(".page-data").html("");
            page = pages[page];
            printRows(page);
        }

        function printRows(arr) {
            arr.forEach(element => {
                $(".page-data").append("<tr><td>" + element.id + "</td><td>" + element.employee_name + "</td><td>" + element.employee_salary + "</td><td>" + element.employee_age + "</td></tr>");

            });
        }

        function paginate(arr, size) {
            return arr.reduce((acc, val, i) => {
                let idx = Math.floor(i / size)
                let page = acc[idx] || (acc[idx] = [])
                page.push(val)
                return acc
            }, [])
        }
    </script>

When I navigate the pages with the arrows (not the numbers), the numbers dont get the "active" class, and I couldnt figurate how to make it.

You should first check which "number" is actualy active, then add active class the next number (if pag_next is clicked) or to the previous number (if pag_prev is clicked).

$(".pagination li.pag_prev").click(function() {
    // ...
    // instead of this (as "this" is the arrow):
    // $(this).addClass("active");
    // remove active class of the current number and add the class to previous number:
    $('.numeros.active').removeClass('active').prev().addClass('active');

    // ...
});

$(".pagination li.pag_next").click(function() {
    // ...
    // instead of this (as "this" is the arrow):
    // $(this).addClass("active");
    // remove active class of the current number and add the class to next number:
    $('.numeros.active').removeClass('active').next().addClass('active');

    // ...
});

Im showing 5 pages, but you can navigate to infinite foward and backward, i don't know how to tell to stop when reach the last and the first page.

You should simply check if the first or last pagination number already has class active, then return (do nothing) if one of them has:

$(".pagination li.pag_prev").click(function() {
    // make sure that the active pagination number is not the first.
    // we want to return here (do nothing) if the first number is already active:
    if($(this).next().is('.active')) return;
    // ...
    // continue executing if the first number isn't yet active:
    currentPage--;
    showPage();
});

$(".pagination li.pag_next").click(function() {
    // make sure that the active pagination number is not the last.
    // we want to return here (do nothing) if the last number is already active:
    if($(this).prev().is('.active')) return;
    // ...
    // continue executing if the last number isn't yet active:
    currentPage++;
    showPage();
});

Is there a way to automatic generate a new Nº and the respective page with JS when the page reach the amount of news setting (e.x. pageSize = 5)?

Yes.

First, we need some more variables:

// news per page:
var pageSize = 1;
// total news (count elements with "content" class):
var pagesCount = $(".content").length;
// calculate total pages:
var totalPages = Math.ceil(pagesCount / pageSize);

// I have replaced "i" variable with "currentPage" (more details at the bottom)
var currentPage = 1;

We already know the totalPages and pageSize, so we can create pagination dynamically based on total amount of news and the number of news per page:

HTML:

<ul class="pagination">
    <li class="pag_prev">
        <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
    <!-- our dynamic pagination content goes here -->
    <li class="pag_next">
        <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</ul>

JS:

var nav = '';
for (var s=0; s<totalPages; s++){
    nav += '<li class="numeros"><a href="#">'+(s+1)+'</a></li>';
}
// append pagination numbers after "prev" button:
$(".pag_prev").after(nav);
// add "active" class to the first pagination number:
$(".numeros").first().addClass("active");

As a side note, your i variable is set in a global scope, so you don't have to pass it every time to the showPage() method and you can use it direclty.
I renamed this variable to something more "readable" - currentPage:

var currentPage = 1;

showPage = function() {
    $(".content").hide().each(function(n) {
        if (n >= pageSize * (currentPage - 1) && n < pageSize * currentPage)
            $(this).show();
    });
}

showPage();

Whole code on JSFiddle