CodeIgniter4 DataTables Usage - Add Column
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
Call method
First argument is column name. if not return as object set to
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
anonymous function
add()
for adding column.
First argument is column name. if not return as object set to
null
or something string
.
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'
anonymous function
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>';
}, 'last')
->toJson();
}
Javascript
$(document).ready(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
ajax: '/ajax-datatable/add-column',
columnDefs: [
{ targets: -1, orderable: false}, //target -1 means last column
]
});
});
AJAX Response :
{
"draw": "1",
"recordsTotal": 122,
"recordsFiltered": 122,
"data": [
[
"103",
"Atelier graphique",
"40.32.2555",
"Nantes",
"France",
"44000",
"<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Atelier graphique')\"><i class=\"fas fa-edit\"></i> Edit</button>"
],
[
"112",
"Signal Gift Stores",
"7025551838",
"Las Vegas",
"USA",
"83030",
"<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Signal Gift Stores')\"><i class=\"fas fa-edit\"></i> Edit</button>"
],
[
"114",
"Australian Collectors, Co.",
"03 9520 4555",
"Melbourne",
"Australia",
"3004",
"<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Australian Collectors, Co.')\"><i class=\"fas fa-edit\"></i> Edit</button>"
],
[
"119",
"La Rochelle Gifts",
"40.67.8555",
"Nantes",
"France",
"44000",
"<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: La Rochelle Gifts')\"><i class=\"fas fa-edit\"></i> Edit</button>"
],
[
"121",
"Baane Mini Imports",
"07-98 9555",
"Stavern",
"Norway",
"4110",
"<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Baane Mini Imports')\"><i class=\"fas fa-edit\"></i> Edit</button>"
],
[
"124",
"Mini Gifts Distributors Ltd.",
"4155551450",
"San Rafael",
"USA",
"97562",
"<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>"
],
[
"125",
"Havel & Zbyszek Co",
"(26) 642-7555",
"Warszawa",
"Poland",
"01-012",
"<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Havel & Zbyszek Co')\"><i class=\"fas fa-edit\"></i> Edit</button>"
],
[
"128",
"Blauer See Auto, Co.",
"+49 69 66 90 2555",
"Frankfurt",
"Germany",
"60528",
"<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>"
],
[
"129",
"Mini Wheels Co.",
"6505555787",
"San Francisco",
"USA",
"94217",
"<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"alert('edit customer: Mini Wheels Co.')\"><i class=\"fas fa-edit\"></i> Edit</button>"
],
[
"131",
"Land of Toys Inc.",
"2125557818",
"NYC",
"USA",
"10022",
"<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>"
]
]
}