Aggrid Php Example Updated _hot_ š Full
For datasets containing more than 50,000 records, fetching all data at once degrades frontend performance. Swap out the client-side approach for AG Grid's ServerSideRowModel . This passes the sorting, filtering, and pagination properties directly inside the POST request payload to your PHP file, allowing you to use SQL LIMIT , OFFSET , and WHERE statements dynamically. Protect Your Endpoints
PHP 8.0 or higher (for modern syntax and native type safety) MySQL 8.0+ or MariaDB
CREATE DATABASE IF NOT EXISTS company_db; USE company_db; CREATE TABLE IF NOT EXISTS employees ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100) NOT NULL, role VARCHAR(100) NOT NULL, department VARCHAR(100) NOT NULL, salary INT NOT NULL, join_date DATE NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; INSERT INTO employees (name, role, department, salary, join_date) VALUES ('Alice Smith', 'Senior Developer', 'Engineering', 95000, '2021-03-15'), ('Bob Jones', 'UI Designer', 'Design', 72000, '2022-06-01'), ('Charlie Brown', 'Product Manager', 'Product', 105000, '2020-11-12'), ('Diana Prince', 'QA Engineer', 'Engineering', 68000, '2023-01-10'), ('Evan Wright', 'Data Analyst', 'Analytics', 80000, '2019-08-24'), ('Fiona Gallagher', 'HR Specialist', 'People', 62000, '2021-05-19'), ('George Clark', 'DevOps Engineer', 'Engineering', 98000, '2020-02-05'); Use code with caution. 2. The PHP Backend ( data.php ) aggrid php example updated
, body: JSON.stringify(params.request), headers: 'Content-Type' 'application/json'
: A secure PHP script that handles Server-Side Row Model (SSRM) requests, queries the database using PDO, and returns JSON. For datasets containing more than 50,000 records, fetching
: Responsible for rendering the UI, configuring columns, and fetching data using the Fetch API.
: MySQL/MariaDB utilizing PDO (PHP Data Objects) and prepared statements to eliminate SQL injection risks. Protect Your Endpoints PHP 8
// Function to handle data update (Backend Sync) function onRowValueChanged(event) const newData = event.data;
// app.js const gridOptions = columnDefs: [ field: 'id', sortable: true, filter: 'agNumberColumnFilter' , field: 'name', sortable: true, filter: 'agTextColumnFilter' , field: 'email' , field: 'created_at' ], // Use Server-Side Row Model rowModelType: 'serverSide', pagination: true, paginationPageSize: 20, cacheBlockSize: 20, ; // Initialize Grid document.addEventListener('DOMContentLoaded', () => const gridDiv = document.querySelector('#myGrid'); new agGrid.Grid(gridDiv, gridOptions); // Set up Server-Side Datasource const datasource = getRows: (params) => console.log('Asking for ' + params.request.startRow + ' to ' + params.request.endRow); // Send request to PHP backend fetch('backend.php', method: 'POST', headers: 'Content-Type': 'application/json' , body: JSON.stringify(params.request) ) .then(httpResponse => httpResponse.json()) .then(response => // Return data to grid params.success( rowData: response.rows, rowCount: response.totalRows ); ) .catch(e => params.fail(); ); ; gridOptions.api.setServerSideDatasource(datasource); ); Use code with caution. 4. Backend Implementation (PHP + PDO)
const gridOptions = columnDefs, defaultColDef: resizable: true , pagination: true, paginationPageSize: 20 ;