Have a simple form with few inputs as a filter criteria. Selecting these and clicking on a submit button executes a callback function that returns a table and a pager.


//submit button
$form['action'] = [
'#prefix' => '<div id = "ajax_submit">',
'#name' => 'ajax_action',
'#type' => 'button',
'#value' => $this->t('Submit'),
'#ajax' => [
'callback' => '::setMessage',
'wrapper' => 'scrollable',
'method' => 'replace',
'effect' => 'fade',     
'#suffix' => '</div></div></div>',

//table element
    $form['table'] = array(
   '#prefix' => '<div id="scrollable" class = "col-md-8"><h4>View Data</h4>',
   '#type' => 'tableselect',
   '#header' => $header,
   '#options' => $options,
   '#disabled' => $disabled,
   '#attributes' => array('id' => 'sort-table'),
   '#empty' => t('Select criteria and search data'),

//pager element    
  $form['pager'] = array(
  '#type' => 'pager',
 '#suffix' => '</div>',

 //function to obtain #options          
    if ($form_state->getTriggeringElement()['#name'] == 'ajax_action') {        
        $options = array();
        $header = [
            'subject_id' => t('Subject ID'),
            'ct_availability' => t('CT Availability'),
             'sex' => t('Sex'),
             'race' => t('Race'),
             'cardiovascular_disease' => t('Cardiovascular Disease'),
             'registration_age' => t('Registration_Age'), 
        $options = $this->getOptions($form_state); //function to get #options 
        $form['table']['#header'] = $header;
        $form['table']['#options'] = $options;

//callback function

public function setMessage(array $form, FormStateInterface $form_state) {
return (array($form['table'], $form['pager']));


This gives the ajax response including a table with the data and a pager The pager has rendered fine but the problem here is that, clicking on it would redirect leading to an error:

"An unrecoverable error occurred. The uploaded file likely exceeded the maximum file size (125 MB) that this server support."

Which I believe is due to the url leading to invalid redirection as below:


I've referred to a similar problem form this post

But here I'm not theming the form in any twig file and have a challenge to understand how to make the pagination work within the area having table as an ajax response.

Have also referred to another post

which suggests to replace the url but the whole page gets reloaded with such approach.

Is there a suitable working approach to have a table with pagination as an ajax response?

enter image description here

enter image description here

  • The error seems same form the other question and I have also included that I have referred to it while posting this question. In the solution from other question, the user seems to have themed the form in a twig file and thus had included the formid. Here in my case, its a custom module php file including the code and I guess the form is themed based on the default theme. Appreciate any suggestions regarding where this form id needs to be included in my case.
    – Abhi
    Jun 20, 2018 at 23:41
  • (quoted from drupal.org) "a list of results is being build that has a pager. The results are updated using ajax callback. The pager is built using a render element of #type 'pager'. When the pager is built, it pulls all the query parameters, including 'wrapper_format' and 'ajax_form'. So when the user clicks on a page, they are redirected to an ajax result, rather than the next page of results. There is no way to override this, as the URLs are built automatically based on the current GET parameters, and these values are included in the GET parameter of an #ajax call" .
    – Abhi
    Jun 22, 2018 at 23:56


Browse other questions tagged or ask your own question.