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.
Code:
//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:
hostname/search_data_form?ajax_form=1&_wrapper_format=drupal_ajax&page=1
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?