DataTables Column Search Server Side Processing In PHP

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

DataTables Column Search Server side processing — DataTables Column Search Server-side processing in PHP

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

Free Live Chat for Any Issue

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;
}

column search in datatables using server side processing

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

Download

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.

Pakainfo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.