How to Use jQuery Datatables in React.js using PHP with Server-side Processing

Introduction:

In the dynamic landscape of web development, harnessing the power of React.js along with jQuery DataTables can elevate your project's user interface and functionality. This tutorial will walk you through the seamless integration of jQuery DataTables in React.js, using PHP for efficient server-side processing. Follow these steps to enhance your web application's performance and deliver a smoother user experience.

Download Source Code

Step 1: Setting up Your React.js Project

Start by creating a new React application, so here in this tutorial, we have already describe step by step to install React JS Application under this React JS CRUD Application tutorial.

Step 2: Installing jQuery DataTables

Once we have set up React JS application in our computer, so next we have to download and install necessary dependencies in our React.js Application. So here we have to install jQuery, jQuery DataTables, Bootstrap 5 and Bootstrap 5 theme for DataTables. So for download and install this dependencies, we have goes to terminal and then after goes into our directory and run this NPM command.

npm install jquery
npm install bootstrap
npm install datatables.net
npm install datatables.net-bs5

Step 3: Creating a React Component for DataTables

Create a new component for DataTables integration. This component will serve as the foundation for displaying and managing your data:

src/Component/Datatables.jsx

import React, { useEffect } from 'react';

import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'datatables.net-bs5/css/dataTables.bootstrap5.min.css';
import 'datatables.net-bs5';

const Datatables = () => {

	useEffect(() => {

		const dataTable = $('#datatable').DataTable({
			serverSide : true,
			processing : true,
			ajax : {
				url : 'http://localhost/tutorial/php-react-js-datatables/api/get.php',
				type : 'POST'
			},
			columns : [
				{ title : 'ID', data : 'user_id' },
				{ title : 'Name', data : 'user_name'},
				{ title : 'Email', data : 'user_email' }
			]
		});

		return () => {
			dataTable.destroy();
		};

	}, []);

	return (
		<div className="container">
			<h1 className="mt-5 mb-5 text-center"><b>DataTables in React JS with PHP MySQL Server-Side Processing</b></h1>
			<div className="card">
				<div className="card-header">DataTables in React JS with PHP MySQL Server-Side Processing</div>
				<div className="card-body">
					<table className="table table-bordered" id="datatable">
						<thead>
							<tr>
								<th>ID</th>
          						<th>Name</th>
          						<th>Email</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
		</div>
	);

};

export default Datatables;

Step 4: Import DataTables Component

Let's add the DataTables component to the App.jsx file in your React.js project.

src/App.jsx

import { useState } from 'react'
/*import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'*/
import Datatables from './Component/Datatables';

function App() {
  

  return (
    <div>
        <Datatables />
    </div>
  )
}

export default App

In this tutorial, we import the DataTables and use it within the App component. This way, your DataTables component will be rendered when you run your React application.

Remember to adjust the import path if your DataTables.jsx is in a different directory. After making these changes, your React app should now successfully display the DataTable component.

Step 5: Implementing PHP Server-side Processing

For optimal handling of extensive datasets, implement server-side processing using PHP. Create a dedicated PHP script at api/get.php to fetch and process your data efficiently:

api/get.php

<?php

//get.php

header("Access-Control-Allow-Origin:* ");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");

$connect = new PDO("mysql:host=127.0.0.1;dbname=testing", "root", "password");

$columns = array(
	'user_id',
    'user_name',
    'user_email'
);

$query = "SELECT user_id, user_name, user_email FROM users";

$totalRecordStatement = $connect->prepare($query);
$totalRecordStatement->execute();
$totalRecord = $totalRecordStatement->rowCount();

if(isset($_POST['search']['value']))
{
	$query .= ' WHERE user_id LIKE "%'.$_POST["search"]["value"].'%" ';
	$query .= 'OR user_name LIKE "%'.$_POST["search"]["value"].'%" ';
	$query .= 'OR user_email LIKE "%'.$_POST["search"]["value"].'%" ';
}

if(isset($_POST['order']))
{
	$query .= 'ORDER BY ' . $columns[$_POST['order']['0']['column']] . ' ' . $_POST['order']['0']['dir'] . ' ';
}
else
{
	$query .= 'ORDER BY user_id DESC ';
}

$filteredRecordStatement = $connect->prepare($query);
$filteredRecordStatement->execute();
$filteredRecord = $filteredRecordStatement->rowCount();

if($_POST['length'] != -1)
{
	$query .= 'LIMIT ' .  $_POST['start'] . ', ' . $_POST['length'];
}

$statement = $connect->prepare($query);
$statement->execute();
$data = $statement->fetchAll(PDO::FETCH_ASSOC);

$response = array(
	'draw'				=>	intval($_POST['draw']),
	'recordsTotal'		=>	$totalRecord,
	'recordsFiltered'	=>	$filteredRecord,
	'data'				=>	$data
);

echo json_encode($response);

?>

Conclusion:

You've successfully integrated jQuery DataTables with React.js using PHP for server-side processing. This comprehensive guide empowers you to create data-driven web applications with enhanced user interfaces and optimized performance. Experiment with DataTables options and React.js features to elevate your development projects.

Download Source Code