Today, We want to share with you DataTables Column Search Server side processing in PHP.In this post we will show you DataTables example – Server-side processing, hear for Column Search in DataTables using Server-side Processing we will give you demo and example for implement.In this post, we will learn about How add filter column with server side processing with an example.
DataTables Column Search Server side processing in PHP
There are the Following The simple About DataTables Column Search Server side processing in PHP Full Information With Example and source code.
As I will cover this Post with live Working example to develop DataTables example – Individual column searching, so the some major files and Directory structures for this example is following below.
- index.php
- server.php
- style.css
Step 1 : Database Script in Mysql
tbl_memberlist
Table structure for table `tbl_memberlist` as well as Dumping data for table `tbl_memberlist`
CREATE TABLE `tbl_memberlist` ( `id` int(11) NOT NULL, `member_fname` varchar(255) NOT NULL, `member_lname` varchar(255) NOT NULL, `address` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `phone` varchar(20) NOT NULL, `member_dob` date NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `tbl_memberlist` -- INSERT INTO `tbl_memberlist` (`id`, `member_fname`, `member_lname`, `address`, `email`, `phone`, `member_dob`) VALUES (1, 'jaydeep', 'Infinityknow', '970 bhvanath St.\r\n\r\nPiqua, OH 45356', '[email protected]', '4455664455', '1999-04-11'), (2, 'krunal', 'w3free', '976 arity char rasta \r\nSaint jaydeepssburg, FL 33702', '[email protected]', '2211335566', '1983-02-02'), (3, 'Ankit', 'Gondaliya', '69 menshai char rasta \r\nBrooklyn, NY 11201', '[email protected]', '7788995566', '1987-04-14'), (4, 'Ankit', 'kathiriya', '896 East chandni Store Dr. \r\Ganesh Sejal, TX 77566', '[email protected]', '8877887744', '1991-11-15'), (5, 'Chirag', 'sojitra', '35 rameshwer zone \r\nNakilake, IN 46060', '[email protected]', '9988774445', '1999-11-01'), (6, 'Dhaval', 'sisodariya', '31 Edgewater Court \r\nNAgarPipaliyya, MA 02148', '[email protected]', '8899886655', '1984-11-05'), (7, 'Mayur', 'dhameliya', '70 Ankit St.\r\n\r\nsurat, OL 356444', '[email protected]', '9966554488', '1980-01-25'), (8, 'Vijay', 'bhanderi', '76 modi char rasta \r\n\r\nSt. jaydeepsburg, FN 33711', '[email protected]', '7744114411', '2000-11-15'), (9, 'Shital', 'pakainfo', '88 silver char rasta \r\n\r\nRajkot, LS 11204', '[email protected]', '8745554413', '2011-11-15'), (11, 'jaydeep', 'kotadiya', '86 chandni Road\r\n\r\Ganesh Sejal, TQ 77566', '[email protected]', '9089094445', '2013-11-15'); -- -- Indexes for table `tbl_memberlist` -- ALTER TABLE `tbl_memberlist` ADD PRIMARY KEY (`id`); COMMIT;
Step 2 : HTML DataTable Interfaces
index.php
Integrating display DataTables into HTML files – pakainfo.com
This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.php.
<!DOCTYPE html>
<head>
<script src="admin/vendor/jquery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="admin/vendor/DataTables/jquery.datatables.min.css">
<script src="admin/vendor/DataTables/jquery.dataTables.min.js" type="text/javascript"></script>
<link href="admin/style.css" rel="stylesheet" type="text/css" />
<title>Column Search in DataTables using Server-side Processing - pakainfo.com</title>
<script>
$(document).ready(function ()
{
$('#tbl-member thead th').each(function () {
var title = $(this).text();
$(this).html(title+' <input type="text" class="col-search-input" placeholder="Search ' + title + '" />');
});
var table = $('#tbl-member').DataTable({
"scrollX": true,
"pagingType": "numbers",
"processing": true,
"serverSide": true,
"ajax": "server.php",
order: [[2, 'asc']],
columnDefs: [{
targets: "_all",
orderable: false
}]
});
table.columns().every(function () {
var table = this;
$('input', this.header()).on('keyup change', function () {
if (table.search() !== this.value) {
table.search(this.value).draw();
}
});
});
});
</script>
</head>
<body>
<div class="datatable-container">
<h2>datatables individual column filtering server side</h2>
<table name="tbl-member" id="tbl-member" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Member Name</th>
<th>Member Last Name</th>
<th>Member Address</th>
<th>Member Phone</th>
<th>Member Date Of Birth</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Step 3 : Server-Side Processing – DataTables
server.php
PHP Source Code to Fetch Data for All the Collumns DataTables by PHP Server-Side Processing
<?php
$table = 'tbl_memberlist';
$memberPK = 'id';
$columns = array(
array( 'db' => 'member_fname', 'dt' => 0 ),
array( 'db' => 'member_lname', 'dt' => 1 ),
array( 'db' => 'address', 'dt' => 2 ),
array( 'db' => 'phone', 'dt' => 3,),
array( 'db' => 'member_dob','dt' => 4,
'formatter' => function( $d, $row ) {
return date( 'd-m-Y', strtotime($d));
}
)
);
$config = array(
'user' => 'root',
'pass' => '[email protected]',
'db' => 'member_list',
'host' => 'localhost'
);
require( 'vendor/DataTables/server-side/scripts/ssp.class.php' );
//datatables individual column filtering server side
echo json_encode(
SSP::simple( $_GET, $config, $table, $memberPK, $columns )
);
Step 4 :DataTable Styles
style.css
Custom CSS Styles
body {font-family: Arial;color:#212121;font-size: 0.8em;}
.col-search-input {
margin-top: 10px;
display: block;
width: 100%;
}
.datatable-container
{
padding: 20px;
width:80%;
margin: 0 auto;
}
tfoot {
display: table-header-group;
}
table.dataTable tfoot th, table.dataTable tfoot td {
padding: 10px 5px 6px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: #000c60 !important;
padding: 0.4em 0.8em;
border: #3d3d3d 2px solid;;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: #000c60 !important;
border-color: #3d3d3d !important;
background-color: #3d3d3d !important;
background:unset;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #FFFFFF !important;
background: unset !important;
border: #000c60 2px solid !important;
background-color: #000c60 !important;
cursor: default;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
border: 2px solid #dddddd;
border-left: none;
border-top: none;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
background-color: #FFFFFF;
}
table.dataTable.display tbody tr.even>.sorting_1, table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
background-color: #f3f3f3;
}
table.dataTable.display tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
background-color: #FFFFFF;
}
table.dataTable thead th, table.dataTable thead td {
border: 2px solid #dddddd;
border-left: none;
}
table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even {
background-color: #f3f3f3;
}
.datatables_length{
padding-bottom: 15px;
}
table.dataTable{
border-left:2px solid #dddddd;
}
.dataTables_wrapper select,.dataTables_wrapper input
{
border:2px solid #dddddd;
padding:0.4em;
}
#tbl-member_filter {
margin-bottom: 20px;
}
table.dataTable tfoot th, table.dataTable tfoot td {
border-top: none;
border-right: #e0e0e0 2px solid;
border-bottom: #e0e0e0 2px solid;
}
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about DataTables Column Search Server side processing in PHP.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.