Verification: a143cc29221c9be0

Pagination in php with ajax

Pagination in php with ajax

Advantages of Pagination


  • Pagination has separate the whole data into different page, so it has reduce load on fetch whole data from database.
  • By using Pagination we can easily go to any number of page data by directly click on navigation link.
  • In pagination we can directly go to last records or first record by directly click on First page or Last page navigation link.

In this tutorial, we have make simple script in which we have fetch dynamic data from a MySQL database with Pagination dynamic navigation links with previous and next link. In this tutorial, we will use pure javaScript function which will send Ajax request to PHP script for fetch data from database and then after in PHP script we will also write PHP script for create pagination link with next and previous button link. So this page link will used for fetch a number of data from database without reload page using JavaScript and Ajax.

Ajax Pagination using PHP with JavaScript

Create Database Table



--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `post`
--

CREATE TABLE `post` (
  `id` mediumint(8) UNSIGNED NOT NULL,
  `post_title` text,
  `post_description` text,
  `author` varchar(255) DEFAULT NULL,
  `datetime` datetime DEFAULT NULL,
  `post_image` varchar(150) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `post`
--
ALTER TABLE `post`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `post`
--
ALTER TABLE `post`
  MODIFY `id` mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT;


Create HTML Page for Display Data from MySQL Database









Ajax Pagination using JavaScript with PHP and MySQL


Ajax Pagination using JavaScript with PHP and MySQL

Sample Data
Total Data -
# Post Title Description

JavaScript & Ajax Code for Retrive Data and Pagination



function load_data(query = '', page_number = 1)
{
	var form_data = new FormData();

	form_data.append('query', query);

	form_data.append('page', page_number);

	var ajax_request = new XMLHttpRequest();

	ajax_request.open('POST', 'process_data.php');

	ajax_request.send(form_data);

	ajax_request.onreadystatechange = function()
	{
		if(ajax_request.readyState == 4 && ajax_request.status == 200)
		{
			var response = JSON.parse(ajax_request.responseText);

			var html = '';

			var serial_no = 1;

			if(response.data.length > 0)
			{
				for(var count = 0; count ';
					html += ''+response.data[count].post_id+'';
					html += ''+response.data[count].post_title+'';
					html += ''+response.data[count].post_description+'';
					html += '';
					serial_no++;
				}
			}
			else
			{
				html += 'No Data Found';
			}

			document.getElementById('post_data').innerHTML = html;

			document.getElementById('total_data').innerHTML = response.total_data;

			document.getElementById('pagination_link').innerHTML = response.pagination;

		}

	}
}