Verification: a143cc29221c9be0

Pagination in php and ajax

Pagination in php and 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;

		}

	}
}

Back-end:

Первым делом нужно нужно сделать back-end, то есть серверную часть, мы её делать будем на языке программирования PHP.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

// Подключаем файл для подключения БД

require "db.php";

// Проверяем есть ли GET запрос с номером страницы

if (isset($_GET['pageno'])) {

    // Перемешаем номер страницы переменную

    $pageno = $_GET['pageno'];

}

// Назначаем количество элементов

$size_page = 10;

// Назначаем с какого элемента начинать отсчёт

$offset = ($pageno-1) * $size_page;

// SQL запрос для получения количество элементов

$pages_sql = "SELECT COUNT(*) FROM `posts`";

// Отправляем SQL запрос

$result = mysqli_query($db, $pages_sql);

// Получаем номер количество элементов

$total_rows = mysqli_fetch_array($result)[0];

// Получаем количество страниц

$total_pages = ceil($total_rows / $size_page);

// SQL запрос для получения элементов

$sql = "SELECT * FROM `posts` LIMIT $offset, $size_page";

// Отправляем SQL запрос

$res_data = mysqli_query($db, $sql);

// Делаем массив

$data = array(

    'posts' => array(), // Массив для хранения элементов

    'next' => true, // есть ли следующая страница

);

// Проверяем следующий страницу

if ($pageno >= $total_pages) {

    // Если нет, то назначаем false

    $data['next'] = false;    

}

// Получаем каждый элемент

while($row = mysqli_fetch_array($res_data)) {

    // Добовляем каждый элемент в массив для элементов

    array_push($data['posts'], ['title' => $row['title'], 'text' => $row['text']]);

}

// кодируем массив в JSON

$data_json = json_encode($data);

// Отправляем  JSON

echo $data_json;

// Закрываем БД

mysqli_close($db);

Тут я не буду особо говорить про код, так как это обычная пагинация на PHP, которую мы уже делали, если вам что-то не понятно, то посмотрите статью по этой ссылке.

Единственное расскажу это про массив $data, в котором мы храним все данные, в первом ключе posts храним элементы или записи в нашем случае, во next, храним boolean тип данных, если true, значит страницы ещё есть, а если false, значит нет, это нужно что бы в JavaScript не отправлял больше запросы, когда выведется все данные.

Также весь этот массив превращаем в JSON формат, это нужно так как JS не способен воспринимать PHP массивы, мы делаем понятно для него.

Client:

Теперь перейдём клиентской части сайта, для начала сделаем не большой HTML блок с классом data, куда будем выводить данные.

class=data>

="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">

="./script/script.js">

Также мы подключаем через CDN библиотеку axios.js, ещё JavaScript файл в котором будет основной код.

Теперь перейдём во файл где весь основной код, в нём первый делом объявляем нужные переменные.

// Получаем элемент для вывода данных

let data = document.querySelector(".data");

// Номер страницы

let numPage = 1;

// Есть ли ещё страницы

let bePages = true;

Тут мы получаем элемент куда будем выводить данные, потом номер страницы, и переменная для обозначения есть ли следующая страница.

// Делаем GET запрос

axios.get('http://testphp/pagination.php?pageno=' + numPage).then(res => {

    // Строим цикл for

    for(let i = 0; i 10; ++i) {

        // Добавляем элемент в дата

        data.innerHTML += `div class="card-body">

                                h5 class="card-title">${res.data.posts[i].title}/h5>

                                p class="card-text">${res.data.posts[i].text}/p>

                           /div>`

    }

});

Тут мы отправляем GET запрос получаем ответ, делаем цикл и добавляем блоки в наш элемент.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// Событие скролл

document.addEventListener('scroll', (e) => {

    // Проверяем условия

    if (document.body.scrollHeight - document.body.scrollTop === document.body.clientHeight && bePages == true) {

        // Увеличиваем номер страницы

        numPage++;

        // Отправляем GET запрос

        axios.get('http://testphp/pagination.php?pageno=' + numPage).then(res => {

            // Проверяем есть ли следующая страница

            if (res.data.next === false) { // Если нет то

                // В переменную кладём false

                bePages = false;

            }

            // Создаём цикл

            for(let i = 0; i 10; ++i) {

                // Кладём новый элемент в наш блок

                data.innerHTML += `div class="card-body">

                                        h5 class="card-title">${res.data.posts[i].title}/h5>

                                        p class="card-text">${res.data.posts[i].text}/p>

                                    /div>`

            }

        });

    }

})

Эта часть кода похожа на предыдущею, только на этот раз мы у документа мы отслеживаем скролл, внутри события проверяем условие, дошёл ли скролл до конца и есть ли ещё страницы, если всё в порядке, то отправляем GET запрос.

Там проверяем, есть ли ещё страницы, если нет, то меняем значение переменной bePages на false, значит страниц больше нет, дальше строим цикл, в нём в наш блог для данных добавляем новые элементы.

Эта вся программа была, таким образом  в js делается подгрузка контента при прокрутке.