[Debug Mode] Ajax Javascript Pagination in Nodejs MySQL Server RestAPIs - Express + Sequelize ORM
#nodejsmysqlpaginationexample
#ajaxnodejspaginationexample #nodejspagination #ajaxpagination
#nodejsmysqlpagination #nodejsrestapipagination #nodejs #ajax #mysql
[Debug Mode] Ajax Javascript Pagination in Nodejs MySQL Server RestAPIs - Express + Sequelize ORM
https://loizenai.com/ajax-client-side...
In the real life, we always meet a large dataset and we want to present it to the user in smaller chunks, pagination and sorting is often helpful solution. So in the tutorial, I introduce how to build an Ajax Pagination in Node.js Application with very clearly steps and running sourcecode.
I. Overall Node.js Sequelize MySQL Pagination
To handling Pagination RestAPI requests and do Paging Filtering and Sorting queries with MySQL database, we create a backend web Node.js application with 4 main points:
To handle pagination RestAPI requests with Node.js, We use Express framework.
To do pagination filtering and sorting queries with MySQL database, We use Sequelize ORM.
We define all RestAPI URLs in router.js.
We implement code how to process each paging filtering and sorting RestAPI request in controller.js file.
II. Pagination Ajax Javascript with Bootstrap Table
We define the view page with 4 parts:
Bootstrap Table is used to display Customer list with table format
Pagination Bar is used to list all data pages
Filtering Selection is used to select a specific salary to do the pagination with filtering
Sorting Checkboxes is used to determine whether the sorting with age field or Not and sorting with descending or ascending(default value) direction
Signature of the function: function fetchCustomers(page, size, salary, agesorting, desc)
1. page: number of page for requesting
2. size: a size of a data page for requesting
3. salary: a selected salary for filtering
4. agesorting: a flag to determine to do the sorting by age field or not
5. desc: a flag to determine the direction for sorting, desc = true for descending sorting direction and desc = false for ascending sorting direction (default value)
III. Video Structure:
0:0 Demo Overview Nodejs Pagination RestAPI
0:26 Overview Article for the video
0:58 - Download Nodejs Sourcecode
1:11 - Install Nodejs Dependencies
1:28 - Import Nodejs Project to Visual Studio Code
1:37 - Review coding of Nodejs Project
1:39 - Review env.js file for MySQL environment
1:47 - Review router.js file for define RESTAPI endpoints
1:52 - Review controller.js file - Implement RestAPIs with Sequelize ORM
1:57 - Review index.html file for implement pagination client
2:18 - Review table.js file - Implement Ajax javascript to fetch data from Nodejs RestAPIs
2:53 - Review server.js file - Implement Express application
3:02 - review package.json file - Review needed dependencies for Nodejs project
3:06 - Run Debug Mode Nodejs application
3:14 - Check MySQL database - prepare data for created table customers
3:44 - DEBUG pagination RESTAPI with nodejs project
5:12 - Debug GET Salaries of Nodejs Application
6:04 - Check Ajax Pagination Client in Browser
7:20 - Start Debug with Ajax Client - FullStack Debug
7:47 - Start Debug the first time fetching of Ajax Client Pagination
9:43 - Start Debug with Pagination and Filtering Age - Full Start from Ajax Client to Nodejs Coding
11:08 - Start Debug with Pagination Filtering and Sorting by Age Asc - Full Start Debug from Frontend to Backend
11:35 - Start Debug with Pagination Filtering and Sorting with Age by DESC direction - Full flow frontend to backend
12:51 - Debug the NEXT button of Pagination Bar with Full Flow from Frontend to Backend
IV. Related Posts
1. Angular 10 Nodejs Pagination RestAPIs + Filtering Sorting Example – Fullstack: Angular + Nodejs RestAPIs+ MySQL Tutorial
https://loizenai.com/angular-10-nodej...
2. Angular Nodejs Fullstack CRUD Application with MySQL/PostgreSQL – Angular 10-9-8 HttpClient + Nodejs Express, Sequelize ORM
https://loizenai.com/angular-nodejs-f...
3. Angular 10 Spring Boot JWT Authentication Example – Angular 6, 8, 9, 10 + Spring Security + MySQL/PostgreSQL
https://loizenai.com/angular-spring-b...
4. Django RestAPIs Tutorial – Build Post/Get/Put/Delete request Examples to MySQL/PostgreSQL databases
https://loizenai.com/python-django-re...
Article for the video:
https://loizenai.com/ajax-client-side...
V. Sourcecode
https://loizenai.com/ajax-client-side...
--------------------------------
@Copyright by https://loizenai.com
Youtube loizenai
