How to implement Data Table on Table

walteragortey · 2025-02-27T06:24:06+0000

Getting Started

If you want to read the documentation about Data Table, you may visit their official site using this link.

I've used CDN for Bootstrap, jQuery and Font Awesome so you need internet connection for them to work especially jQuery since its a dependency of Data Table.

Data Table used in this tutorial is available in the downloadable file of this tutorial.

Creating our Database

First, we are going to create our database as well as insert sample data into our database to show in our table.

1. Open phpMyAdmin.
2. Click databases, create a database and name it as datatable.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE

TABLE

`members`

(
`memid`

int

(

11

)

NOT

NULL

AUTO_INCREMENT

,
`firstname`

varchar

(

30

)

NOT

NULL

,
`lastname`

varchar

(

30

)

NOT

NULL

,
`address`

text

NOT

NULL

,
PRIMARY KEY

(

`memid`

)
)

ENGINE

=

InnoDB

DEFAULT

CHARSET

=

latin1;

INSERT

INTO

`members`

(

`memid`

,

`firstname`

,

`lastname`

,

`address`

)

VALUES
(

1

,

'Neovic'

,

'Devierte'

,

'Silay City, Negros Occidental'

)

,
(

2

,

'Julyn'

,

'Divinagracia'

,

'Mun. of E.B. Magalona, Negros Occidental'

)

,
(

3

,

'Lee Ann'

,

'Apilinga'

,

'Silay City, Negros Occidental'

)

,
(

4

,

'Gemalyn'

,

'Cepe'

,

'Bilar, Bohol'

)

;

index.php

Lastly, we're gonna create our index which contains our html table, php code in fetching data from our database and Data Table script.

<!DOCTYPE html>
<html>
<head>
<title>How to implement Data Table on Table</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="datatable/dataTables.bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="page-header text-center">How to implement Data Table on Table</h1>
<div class="col-md-8 col-md-offset-2">
<table class="table table-bordered table-striped" id="example1">
<thead>
<th>Member ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Address</th>
</thead>
<tbody>
<?php
//database connection
$conn

=

new

mysqli(

'localhost'

,

'root'

,

''

,

'datatable'

)

;
if

(

$conn

->

connect_error

)

{
die

(

"Connection Failed"

.

$conn

->

connect_error

)

;
}
$sql

=

"select * from members"

;
$query

=

$conn

->

query

(

$sql

)

;
while

(

$row

=

$query

->

fetch_array

(

)

)

{
?>
<tr>
<td><?php

echo

$row

[

'memid'

]

;

?>

</td>
<td><?php

echo

$row

[

'firstname'

]

;

?>

</td>
<td><?php

echo

$row

[

'lastname'

]

;

?>

</td>
<td><?php

echo

$row

[

'address'

]

;

?>

</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="datatable/jquery.dataTables.min.js"></script>
<script src="datatable/dataTables.bootstrap.min.js"></script>
<script>
$(function () {
$('#example1').DataTable()
$('#example2').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
})
})
</script>
</body>
</html>

That ends this tutorial. Happy Coding :)

Download

You must upgrade your account or reply in the thread to view hidden text.

How to implement Data Table on Table

More options

walteragortey

450,270

322,965

322,974