CodeIgniter4 DataTables Usage - Add Column (Object data source)
Table Customers
Cust. No | Name | Phone | City | Country | Postal Code | Action |
---|
Note
This sample database is downloaded from : https://www.mysqltutorial.org/mysql-sample-database.aspx/
Controller
If return as object, First argument is column name. this must be set if return as object. this is for call initialize column on javascript.
The second argument is anonymous function to set return for column value. Anonymous function itself has
The third argument (Optional) is position of added column. this is optional. default value is
The second argument is anonymous function to set return for column value. Anonymous function itself has
$row
argument.
The third argument (Optional) is position of added column. this is optional. default value is
'last'
you can set argument with int
of number index position. or string: 'first'
or 'last'
use \Hermawan\DataTables\DataTable;
public function add_column()
{
$db = db_connect();
$builder = $db->table('customers')->select('customerNumber, customerName, phone, city, country, postalCode');
return DataTable::of($builder)
->add('action', function($row){
return '<button type="button" class="btn btn-primary btn-sm" onclick="alert(\'edit customer: '.$row->customerName.'\') ><i class="fas fa-edit"></i></button>';
})
->toJson(true);
}
Javascript
$(document).ready(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
ajax: '/ajax-datatable/add-column-object',
columns: [
{data: 'customerNumber'},
{data: 'customerName'},
{data: 'phone'},
{data: 'city'},
{data: 'country'},
{data: 'postalCode'},
{data: 'action', orderable: false},
]
});
});
AJAX Response :
{
"draw": "1",
"recordsTotal": 122,
"recordsFiltered": 122,
"data": [
{
"customerNumber": "103",
"customerName": "Atelier graphique",
"phone": "40.32.2555",
"city": "Nantes",
"country": "France",
"postalCode": "44000",
"action": "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Atelier graphique')\"><i class=\"fas fa-edit\"></i> Edit</button>"
},
{
"customerNumber": "112",
"customerName": "Signal Gift Stores",
"phone": "7025551838",
"city": "Las Vegas",
"country": "USA",
"postalCode": "83030",
"action": "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Signal Gift Stores')\"><i class=\"fas fa-edit\"></i> Edit</button>"
},
{
"customerNumber": "114",
"customerName": "Australian Collectors, Co.",
"phone": "03 9520 4555",
"city": "Melbourne",
"country": "Australia",
"postalCode": "3004",
"action": "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Australian Collectors, Co.')\"><i class=\"fas fa-edit\"></i> Edit</button>"
},
{
"customerNumber": "119",
"customerName": "La Rochelle Gifts",
"phone": "40.67.8555",
"city": "Nantes",
"country": "France",
"postalCode": "44000",
"action": "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: La Rochelle Gifts')\"><i class=\"fas fa-edit\"></i> Edit</button>"
},
{
"customerNumber": "121",
"customerName": "Baane Mini Imports",
"phone": "07-98 9555",
"city": "Stavern",
"country": "Norway",
"postalCode": "4110",
"action": "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Baane Mini Imports')\"><i class=\"fas fa-edit\"></i> Edit</button>"
},
{
"customerNumber": "124",
"customerName": "Mini Gifts Distributors Ltd.",
"phone": "4155551450",
"city": "San Rafael",
"country": "USA",
"postalCode": "97562",
"action": "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Mini Gifts Distributors Ltd.')\"><i class=\"fas fa-edit\"></i> Edit</button>"
},
{
"customerNumber": "125",
"customerName": "Havel & Zbyszek Co",
"phone": "(26) 642-7555",
"city": "Warszawa",
"country": "Poland",
"postalCode": "01-012",
"action": "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Havel & Zbyszek Co')\"><i class=\"fas fa-edit\"></i> Edit</button>"
},
{
"customerNumber": "128",
"customerName": "Blauer See Auto, Co.",
"phone": "+49 69 66 90 2555",
"city": "Frankfurt",
"country": "Germany",
"postalCode": "60528",
"action": "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Blauer See Auto, Co.')\"><i class=\"fas fa-edit\"></i> Edit</button>"
},
{
"customerNumber": "129",
"customerName": "Mini Wheels Co.",
"phone": "6505555787",
"city": "San Francisco",
"country": "USA",
"postalCode": "94217",
"action": "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Mini Wheels Co.')\"><i class=\"fas fa-edit\"></i> Edit</button>"
},
{
"customerNumber": "131",
"customerName": "Land of Toys Inc.",
"phone": "2125557818",
"city": "NYC",
"country": "USA",
"postalCode": "10022",
"action": "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Land of Toys Inc.')\"><i class=\"fas fa-edit\"></i> Edit</button>"
}
]
}