Paginated ajax form with non-sql data

Question

Using Drupal 8 I created a form to load data from a webservice with ajax below the form. Now i'm trying to add pagination to result, but the paginator is not been loaded, i'm doing something wrong?. I've tried to follow the guide from https://www.drupal.org/docs/7/creating-custom-modules/howtos/paging-non-sql-data but it's for Drupal 7. Thanks in advance.

Here's my code:

$response contains an array with data from webservice.

$total contains the record of results

//number of records per page
$num_per_page = 3;
//get current page
$current_page = pager_default_initialize($total, $num_per_page);
$chunks = array_chunk($response, $num_per_page);
$current_page_items = $chunks[$current_page];
foreach ($current_page_items as $i => $item) {
  $current_page_items[$i] = array(
    '#theme' => 'ajax_search',
    '#item' => $item,
  );
}

// Generate the render array for our page
$render_array['page'] = array (
  '#theme' => 'item_list',
  '#items' => $current_page_items,
);
// Calls Drupal standard pager theme and set 5 page links on pager
$render_array['pager'] = array (
  '#theme' => 'pager',
  '#quantity' => 5,
);

$response = new AjaxResponse();
$response->addCommand(
  new HtmlCommand(
    '.result_message',
    $render_array)
  );
return $response;

Answer 1

Old question but I've spent a lot of time to find the solution so decided to share it here.

So I have some table inside some $form and list of rows - need to init pager for this.

  // Number of items on the one page.
  $per_page = 10;
  $pager = $this->pagerManager->createPager(count($rows), $per_page);
  $current_page = $pager->getCurrentPage();
  $chunks = array_chunk($rows, $per_page, TRUE);

  // Add a wrapper to the $form
  $form['#prefix'] = '<div id="form-wrapper-for-ajax-pager">';
  $form['#suffix'] = '</div>';

Next - create a table and pager render elements.

    'table' => [
      '#type' => 'table',
      '#header' => [
        $this->t('bla-bla'),
        $this->t('bla-bla'),
        $this->t('bla-bla'),
        '...',
      ],
      '#rows' => $chunks[$current_page],
    ],
    'ajax_pager' => [
      '#type' => 'pager',
      '#element' => 0,
      '#route_name' => 'example_module.ajax.pager', // Rout to update table by ajax.
    ],

Next - need to create the route.

 example_module.ajax.pager:
  path: '/ajax/example/pager'
  defaults:
    _controller: '\Drupal\example_module\Form\BlaBlaForm::updatePager'
  requirements:
    _access: 'TRUE'

Create updatePager Ajax callback. Just rerender the form and replace it.

  /**
   * Ajax callback for the pager.
   */
  public function updatePager(): AjaxResponse {
    $response = new AjaxResponse();
    $form = $this->formBuilder->getForm('\Drupal\example_module\Form\BlaBlaForm');
    $response->addCommand(new ReplaceCommand('#form-wrapper-for-ajax-pager', $form));
    return $response;

}

In the theme create new suggestions.

  if ($hook === 'pager' && $variables['pager']['#route_name'] === 'example_module.ajax.pager') {
    $suggestions[] = 'pager__ajax';
  }

And create a template pager--ajax.html.twig (Just need to copy the original pager.html.twig from the system module)

Inside this template to all links need to add the class "use-ajax"

example:

<a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev" class="use-ajax">

Thats all.