FacetWP Bootstrap 4 Pagination (facetwp_pager_html)

facetwp_pager_html.php

<?php
/**
 * FacetWP Pager Bootstrap 4 Pagination
 * @source https://gist.github.com/MWDelaney/ce9e523b3f1bdf57b3180c9b24b73170
 * @source https://fellowtuts.com/bootstrap/wordpress-pagination-bootstrap-4-style/
 */
add_filter('facetwp_pager_html', function ($output, $params) {
    $range = 2; // +/- pages from the current page
    $showitems = ($range * 2) + 1;
    $page = $params['page'];
    $pages = $params['total_pages'];
    $prev_disabled = ($page == 1) ? 'disabled' : '';
    $next_disabled = ($page >= $pages) ? 'disabled' : '';

    $output = '<nav class="page-navigation" aria-label="Pagination">';
    $output .= '<ul class="pagination">';
    $output .= '<li class="page-item ' . $prev_disabled . '"><a class="facetwp-page page-link" href="#" data-page="' . ($page - 1) . '"><i class="far fa-angle-left"></i><span class="d-none d-md-inline-block ml-1">Previous</span></a></li>';
    for ($i = 1; $i <= $pages; $i++) {
        if (1 != $pages && (!($i >= $page + $range + 1 || $i <= $page - $range - 1) || $pages <= $showitems))
        $output  .= ($page == $i) ?
            '<li class="page-item active"><span class="page-link"><span class="sr-only">Current Page </span>' . $i . '</span></li>' :
            '<li class="page-item"><a class="page-link facetwp-page" href="#" data-page="' . $i . '"><span class="sr-only">Page </span>' . $i . '</a></li>';
    }
    $output .= '<li class="page-item ' . $next_disabled . '"><a class="facetwp-page page-link" href="#" data-page="' . ($page + 1) . '"><span class="d-none d-md-inline-block mr-1">Next</span><i class="far fa-angle-right"></i></a></li>';
    $output .= '</ul></nav>';
    return $output;
}, 10, 2);

Thanks for posting!

Update to the current version of FacetWP below:

<?php
add_filter(
	'facetwp_render_output',
	function ( $out, $params ) {
		$pager_args    = FWP()->facet->pager_args;
		$range         = 2; // +/- pages from the current page
		$showitems     = ( $range * 2 ) + 1;
		$page          = $pager_args['page'];
		$pages         = $pager_args['total_pages'];
		$prev_disabled = ( $page == 1 ) ? 'disabled' : '';
		$next_disabled = ( $page >= $pages ) ? 'disabled' : '';

		$output  = '<nav class="page-navigation" aria-label="Pagination">';
		$output .= '<ul class="pagination">';
		$output .= '<li class="page-item ' . $prev_disabled . '"><a class="facetwp-page page-link" href="#" data-page="' . ( $page - 1 ) . '"><i class="far fa-angle-left"></i><span class="d-none d-md-inline-block ml-1">Previous</span></a></li>';
		for ( $i = 1; $i <= $pages; $i++ ) {
			if ( 1 != $pages && ( ! ( $i >= $page + $range + 1 || $i <= $page - $range - 1 ) || $pages <= $showitems ) ) {
				$output .= ( $page == $i ) ?
					'<li class="page-item active"><span class="page-link"><span class="sr-only">Current Page </span>' . $i . '</span></li>' :
					'<li class="page-item"><a class="page-link facetwp-page" href="#" data-page="' . $i . '"><span class="sr-only">Page </span>' . $i . '</a></li>';
			}
		}
		$output      .= '<li class="page-item ' . $next_disabled . '"><a class="facetwp-page page-link" href="#" data-page="' . ( $page + 1 ) . '"><span class="d-none d-md-inline-block mr-1">Next</span><i class="far fa-angle-right"></i></a></li>';
		$output      .= '</ul></nav>';
		$out['pager'] = $output;
		return $out;
	},
	99,
	2
);