I'm a complete newbie when it comes to Ajax. And I don't really have much experience with js either, but I need to get this done and it's driving me crazy.
So I have the following html in my view (I don't think it's relevant, but I'm building an app using codeigniter...
<div id="tabsl">
<div class="portlet-body" >
<table class="table table-striped table-bordered table-hover dt-responsive" width="100%" id="sample_2">
<thead>
<tr>
<th>
</th>
<th class="all">Name</th>
<th class="min-phone-l">Calls</th>
<th class="min-phone-1">Walk Ins</th>
<th class="desktop">Total Prospects</th>
<th class="desktop">Appointmets Booked</th>
<th class="min-tablet">Completed Presentations</th>
<th class="all">CLOSED SALES</th>
<th class="all">Closed Sales RATIO</th>
</tr>
</thead>
<tbody >
<?php foreach ($columns as $record): ?>
<tr>
<td>
</td>
<td><?php echo $record->name ?></td>
<td><?php echo $record->calls ?></td>
<td><?php echo $record->walkins ?></td>
<td><?php echo $record->tprospects ?></td>
<td><?php echo $record->appointments ?></td>
<td><?php echo $record->presentations ?></td>
<td><?php echo $record->sales ?></td>
<td>
<?php if ($record->presentations != 0) {
echo ($record->sales / $record->presentations)*100 . " %";
} else {
echo "0 %";
} ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
The table is responsive, hiding columns according to screen size and generating a button to show the hidden columns underneath the rows, like this:
Then the user is able to select a date range. That's when I make the following ajax call...
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
var dStart = $('#dStart').val();
var dEnd = $('#dEnd').val();
$.post("<?php echo base_url('index.php/Ajax/ajax_get_data') ?>", {dStart : dStart, dEnd : dEnd}, function(data){
$('#tabsl').html(data.content);
}, "json");
});
My controller looks like this:
public function ajax_get_data() {
$startDate = $this->input->post('dStart');
$endDate = $this->input->post('dEnd');
$report = $this->Reports_model->the_report($startDate, $endDate);
if ($report->num_rows() > 0) {
$report_html = '<div class="portlet-body" >
<table class="table table-striped table-bordered table-hover dt-responsive" width="100%" id="sample_2">
<thead>
<tr>
<th>
</th>
<th class="all">Name</th>
<th class="min-phone-l">Calls</th>
<th class="min-phone-1">Walk Ins</th>
<th class="desktop">Total Prospects</th>
<th class="desktop">Appointmets Booked</th>
<th class="min-tablet">Completed Presentations</th>
<th class="all">CLOSED SALES</th>
<th class="all">Closed Sales RATIO</th>
</tr>
</thead>
<tbody >';
foreach ($report->result() as $key) {
$report_html .= '<tr><td></td>';
$report_html .= '<td>' . $key->name . '</td>';
$report_html .= '<td>' . $key->calls . '</td>';
$report_html .= '<td>' . $key->walkins . '</td>';
$report_html .= '<td>' . $key->tprospects . '</td>';
$report_html .= '<td>' . $key->appointments . '</td>';
$report_html .= '<td>' . $key->presentations . '</td>';
$report_html .= '<td>' . $key->sales . '</td>';
$report_html .= '<td>' . $key->sales . '</td>';
$report_html .= '</tr>';
}
$report_html .= ' </tbody></table></div>';
$result = array('status' => 'ok', 'content' => $report_html);
echo json_encode($result);
} else {
echo "nope";
}
}
And finally, the scrip that relates to that id="sample_2"
var TableDatatablesResponsive = function () {
var initTable2 = function () {
var table = $('#sample_2');
var oTable = table.dataTable({
// 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 in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "_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'
//},
// setup buttons extentension: http://datatables.net/extensions/buttons/
buttons: [
{ extend: 'print', className: 'btn dark btn-outline' },
{ extend: 'pdf', className: 'btn green btn-outline' },
{ extend: 'csv', className: 'btn purple btn-outline ' }
],
// setup responsive extension: http://datatables.net/extensions/responsive/
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ],
// pagination control
"lengthMenu": [
[5, 10, 15, 20, -1],
[5, 10, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
"pagingType": 'bootstrap_extended', // pagination type
"dom": "<'row' <'col-md-12'B>><'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
// 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>>",
});
}
return {
//main function to initiate the module
init: function () {
if (!jQuery().dataTable) {
return;
}
initTable2();
}
};
}();
jQuery(document).ready(function() {
TableDatatablesResponsive.init();
});
});
After selecting the date range and calling the ajax function, this is what I get:
I basically lose the functionality I had before...
I know this might be a stupid post, but as a newbie I'm totally lost and I've been trying to fix it for days.
Any thoughts or suggestions?
