CodeIgniter4 DataTables Usage - Multi Column Search (Individual column search)

This feature added since version: v0.3.0

Table Customers

Cust. No	Name	Phone	City	Country	Postal Code

Note

This sample database is downloaded from : https://www.mysqltutorial.org/mysql-sample-database.aspx/

Controller

since v0.3.0 this support multi column search individual every column. no need add additional code on controller 😊

                    
use \Hermawan\DataTables\DataTable;

public function multi_column_search()
{
    $db = db_connect();
    $builder = $db->table('customers')->select('customerNumber, customerName, phone, city, country, postalCode');
    
    return DataTable::of($builder)->toJson();
}

HTML Table

Add some additional header. we will add input search for this header

                    
<table id="table" class="table table-bordered">
    <thead>
        <tr>
            <th>Cust. No</th>
            <th>Name</th>
            <th>Phone</th>
            <th>City</th>
            <th>Country</th>
            <th>Postal Code</th>
        </tr>
        <tr>
            <th class="filterhead"></th>
            <th class="filterhead"></th>
            <th class="filterhead"></th>
            <th class="filterhead"></th>
            <th class="filterhead"></th>
            <th class="filterhead"></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Javascript

this sample add datatable option orderCellsTop: true. and on initComplete we add input for search on filterhead class. see html table above

                    
$(document).ready(function() {
    $('#table').DataTable({
        processing: true,
        serverSide: true,
        orderCellsTop: true,
        ajax: '/ajax-datatable/multi-column-search',
        initComplete: function( settings, json ) 
        {

            var indexColumn = 0;

            this.api().columns().every(function () 
            {
                
                var column      = this;
                var input       = document.createElement("input");
                
                $(input).attr( 'placeholder', 'Search' )
                        .addClass('form-control form-control-sm')
                        .appendTo( $('.filterhead:eq('+indexColumn+')').empty() )
                        .on('keyup', function () {
                            column.search($(this).val(), false, false, true).draw();
                        });

                indexColumn++;
            });
        }
    });
});

AJAX Response :

                    
{
    "draw": "1",
    "recordsTotal": 122,
    "recordsFiltered": 122,
    "data": [
        [
            "103",
            "Atelier graphique",
            "40.32.2555",
            "Nantes",
            "France",
            "44000"
        ],
        [
            "112",
            "Signal Gift Stores",
            "7025551838",
            "Las Vegas",
            "USA",
            "83030"
        ],
        [
            "114",
            "Australian Collectors, Co.",
            "03 9520 4555",
            "Melbourne",
            "Australia",
            "3004"
        ],
        [
            "119",
            "La Rochelle Gifts",
            "40.67.8555",
            "Nantes",
            "France",
            "44000"
        ],
        [
            "121",
            "Baane Mini Imports",
            "07-98 9555",
            "Stavern",
            "Norway",
            "4110"
        ],
        [
            "124",
            "Mini Gifts Distributors Ltd.",
            "4155551450",
            "San Rafael",
            "USA",
            "97562"
        ],
        [
            "125",
            "Havel & Zbyszek Co",
            "(26) 642-7555",
            "Warszawa",
            "Poland",
            "01-012"
        ],
        [
            "128",
            "Blauer See Auto, Co.",
            "+49 69 66 90 2555",
            "Frankfurt",
            "Germany",
            "60528"
        ],
        [
            "129",
            "Mini Wheels Co.",
            "6505555787",
            "San Francisco",
            "USA",
            "94217"
        ],
        [
            "131",
            "Land of Toys Inc.",
            "2125557818",
            "NYC",
            "USA",
            "10022"
        ]
    ]
}