How to get expandable details using datatable with tabletools? - php

Question

How to get expandable details on click, I want my table details like:
In the above image when I click on (+) sign it will give me more fields of table, I want that type of functionality in my datatable.
Here is my html code :
<div class="row">
<div class="col-md-12">
<!-- BEGIN EXAMPLE TABLE PORTLET-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-globe"></i>Prestart Hand Tools/Electric Power Tool Safety Checks
</div>
<div class="tools">
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover" id="tblListing">
<thead>
<tr>
<th>Sr. No.</th>
<th>User</th>
<th>Model</th>
<th>Safety Inspection Due</th>
<th>MachineOwner</th>
<th>MachineType</th>
<th>FleetLicNum</th>
<th>YearOfMan</th>
<th>Manufactur</th>
<th>Image</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var cOptions = [];
cOptions.columnDefs = [{
data: "srNo",
targets: 0,
orderable: false,
width: 50
}, {
data: "user_id",
targets: 1,
width: 150
}, {
data: "Model",
targets: 2,
width: 200
}, {
data: "SafetyInspectionDue",
targets: 3,
width: 150
}, {
data: "MachineOwner",
targets: 4,
width: 50
}, {
data: "MachineType",
targets: 5,
width: 50
}, {
data: "FleetLicNum",
targets: 6,
width: 50
}, {
data: "YearOfMan",
targets: 7,
width: 50
}, {
data: "Manufactur",
targets: 8,
width: 50
}, {
data: "ToolImage",
targets: 9,
orderable: false,
className: "dt-center",
width: 50
}, {
data: "action",
targets: 10,
orderable: false,
className: "dt-center",
width: 150
}];
cOptions.order = [
[1, 'asc']
];
cOptions.mColumns = [1, 2, 3, 4, 5, 6, 7, 8];
cOptions.url = 'ajax/mytoolbox.php';
Custom.initListingTable(cOptions);
</script>
My ajax/mytoolbox.php File :
<?php
include '../application/application_top.php';
include ROOT . '/application/function.php';
include_once '../../classes/mytoolbox.class.php';
$response['status'] = '';
$response['errorMsg'] = '';
$action = get_data('action', '');
if ($action == 'getList') {
$request = $_REQUEST;
$start = $request["start"];
$length = $request["length"];
$order = $request["order"];
$orderby = "Model DESC";
$search = $request["search"]["value"];
if ($order[0]['column'] == 1) {
$orderby = "reg.reg_fname " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 2) {
$orderby = "Model " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 3) {
$orderby = "SafetyInspectionDue " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 4) {
$orderby = "MachineOwner " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 5) {
$orderby = "MachineType " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 6) {
$orderby = "FleetLicNum " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 7) {
$orderby = "YearOfMan " . strtoupper($order[0]['dir']);
} elseif ($order[0]['column'] == 8) {
$orderby = "Manufactur " . strtoupper($order[0]['dir']);
}
$tableData = array();
$mytoolbox = new Mytoolbox();
$mytoolbox->cquery = "SELECT SQL_CALC_FOUND_ROWS mytoolbox.*,CONCAT(reg.reg_fname,' ',reg.reg_lname) as name from safe_my_tool_box as mytoolbox LEFT JOIN safe_register as reg on mytoolbox.user_id = reg.reg_id WHERE mytoolbox.is_delete='0'";
if ($search != "") {
$mytoolbox->cquery .= " AND (CONCAT(reg.reg_fname,' ',reg.reg_lname) LIKE '%" . $search . "%' OR Model LIKE '%" . $search . "%' OR YearOfMan LIKE '%" . $search . "%' )";
}
$mytoolbox->cquery .= " ORDER BY " . $orderby;
if ($length != -1)
$mytoolbox->cquery .= " LIMIT " . $start . "," . $length;
$mytoolbox->action = "get";
$mytoolbox_res = $mytoolbox->process();
foreach ($mytoolbox_res['res'] as $mytoolbox_row_key => $mytoolbox_row) {
$tableData[$mytoolbox_row_key]['srNo'] = '';
$tableData[$mytoolbox_row_key]['user_id'] = $mytoolbox_row['name'];
$tableData[$mytoolbox_row_key]['Model'] = $mytoolbox_row['Model'];
$tableData[$mytoolbox_row_key]['SafetyInspectionDue'] = $mytoolbox_row['SafetyInspectionDue'];
$tableData[$mytoolbox_row_key]['MachineOwner'] = $mytoolbox_row['MachineOwner'];
$tableData[$mytoolbox_row_key]['MachineType'] = $mytoolbox_row['MachineType'];
$tableData[$mytoolbox_row_key]['FleetLicNum'] = $mytoolbox_row['FleetLicNum'];
$tableData[$mytoolbox_row_key]['YearOfMan'] = $mytoolbox_row['YearOfMan'];
$tableData[$mytoolbox_row_key]['Manufactur'] = $mytoolbox_row['Manufactur'];
$tableData[$mytoolbox_row_key]['ToolImage'] = "<a href='#ImageModal' data-id='" . $mytoolbox_row['safe_my_tool_id'] . "' data-toggle='modal' alt='view'>Image</a>";
$tableData[$mytoolbox_row_key]['action'] = "<a href='#displayModal' data-id='" . $mytoolbox_row['safe_my_tool_id'] . "' data-toggle='modal' alt='view'>Question</a>"
. " | <a href='#confirmModal' data-id='" . $mytoolbox_row['safe_my_tool_id'] . "' data-toggle='modal' alt='Remove'>Delete</a>";
}
$data['data'] = $tableData;
$mytoolbox2 = new Mytoolbox();
$mytoolbox2->cquery = "SELECT FOUND_ROWS() as total_filter";
$mytoolbox2->action = "get";
$mytoolbox2_res = $mytoolbox2->process();
$mytoolbox1 = new Mytoolbox();
$mytoolbox1->cquery = "SELECT COUNT(*) AS total_tool_box FROM safe_my_tool_box WHERE is_delete='0'";
$mytoolbox1->action = "get";
$mytoolbox1_res = $mytoolbox1->process();
$data['recordsTotal'] = $mytoolbox1_res['res'][0]['total_tool_box'];
$data['recordsFiltered'] = $mytoolbox2_res['res'][0]['total_filter'];
echo json_encode($data);
exit(0);
}
?>
My custom.js file is :
var Custom = function () {
// private functions & variables
var myFunc = function(text) {
alert(text);
};
var initListingTable = function (cOptions) {
var table = $('#tblListing');
/* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */
/* Set tabletools buttons and button container */
$.extend(true, $.fn.DataTable.TableTools.classes, {
container : "btn-group tabletools-dropdown-on-portlet",
buttons : {
normal : "btn btn-sm default",
disabled : "btn btn-sm default disabled"
},
collection: {
container : "DTTT_dropdown dropdown-menu tabletools-dropdown-menu"
}
});
var oTable = table.dataTable({
serverSide : true,
processing : true,
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
language : {
aria : {
sortAscending : ": activate to sort column ascending",
sortDescending: ": activate to sort column descending"
},
emptyTable : "No data available",
info : "Showing _START_ to _END_ of _TOTAL_ entries",
infoEmpty : "No entries found",
infoFiltered : "(filtered from _MAX_ total entries)",
lengthMenu : "Show _MENU_ entries",
search : "Search:",
zeroRecords : "No matching records found"
},
// Or you can use remote translation file
//language: {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
searching : true,
order : cOptions.order,
lengthMenu : [
[25, 50, 100, -1],
[25, 50, 100, "All"] // change per page values here
],
// set the initial value
pageLength : 25,
dom : "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
fnRowCallback: function(nRow, aData, iDisplayIndex){
var oSettings = oTable.fnSettings();
var index = oSettings._iDisplayStart + iDisplayIndex + 1;
$('td:eq(0)',nRow).html(index);
return nRow;
},
ajax : {
type : "POST",
url : cOptions.url,
data: ({
action : "getList"
}),
dataSrc: function ( json ) {
return json.data;
}
},
responsive: {
details: {
type: 'column'
}
},
columnDefs: cOptions.columnDefs,
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//dom: "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
tableTools: {
sSwfPath : Metronic.getAssetsPath()+"global/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
aButtons : [{
sExtends : "pdf",
sButtonText : "PDF",
mColumns : cOptions.mColumns
}, {
sExtends : "csv",
sButtonText : "CSV",
mColumns : cOptions.mColumns
}, {
sExtends : "xls",
sButtonText : "Excel",
mColumns : cOptions.mColumns
}, {
sExtends : "print",
sButtonText : "Print",
sInfo : 'Please press "CTR+P" to print or "ESC" to quit',
sMessage : "Generated by DataTables",
mColumns : cOptions.mColumns
}]
}
});
var tableWrapper = $('#tblListing_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
tableWrapper.find('.dataTables_length select').select2({minimumResultsForSearch: Infinity}); // initialize select2 dropdown
};
var handleDatePickers = function () {
if ($().datepicker) {
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true
});
//$('body').removeClass("modal-open"); // fix bug when inline picker is used in modal
}
/* Workaround to restrict daterange past date select: http://stackoverflow.com/questions/11933173/how-to-restrict-the-selectable-date-ranges-in-bootstrap-datepicker */
};
var handleTimePickers = function () {
if (jQuery().timepicker) {
$('.timepicker-default').timepicker({
autoclose: true,
showSeconds: true,
minuteStep: 1
});
$('.timepicker-no-seconds').timepicker({
autoclose: true,
minuteStep: 5
});
$('.timepicker-24').timepicker({
autoclose: true,
minuteStep: 5,
showSeconds: false,
showMeridian: false
});
// handle input group button click
$('.timepicker').parent('.input-group').on('click', '.input-group-btn', function(e){
e.preventDefault();
$(this).parent('.input-group').find('.timepicker').timepicker('showWidget');
});
}
};
// public functions
return {
//main function
init: function () {
//initialize here something.
handleDatePickers();
handleTimePickers();
},
//some helper function
doSomeStuff: function () {
myFunc();
},
initListingTable: function(cOptions) {
initListingTable(cOptions);
},
handleDatePickers: function() {
handleDatePickers();
},
handleTimePickers: function() {
handleTimePickers();
}
};
}();
Datatable Listing view :
I want the fields Safety Inspection Due, MachineOwner, and MachineType in expandable details.