1
Я полный новичок, когда дело доходит до Ajax. И у меня на самом деле нет большого опыта работы с js, но мне нужно сделать это, и это сводит меня с ума.Ajax + Datatables
Поэтому у меня есть следующий HTML, на мой взгляд (я не думаю, что это уместно, но я создать приложение с использованием 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>
Таблица отзывчивые, скрытие столбцов в соответствии с размер экрана и генерируя кнопку, чтобы показать скрытые столбцы под строку, например:.
Затем пользователь может выбрать диапазон дат, когда я делаю следующий вызов AJAX ...
$('#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");
});
Мой контроллер выглядит следующим образом:
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";
}
}
И, наконец, сумы, что относится к этому ид = "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();
});
});
После выбора диапазона дат и вызова функции Ajax , это то, что я получаю:
Я в основном теряю функциональность, которую я имел до этого ...
Я знаю, что это может быть глупая почта, но как новичок я полностью потерян, и я пытался исправить ее в течение нескольких дней.
Любые мысли или предложения?
Привет, Малкар. Спасибо за ваш ответ. Вызов ajax работает, я забыл опубликовать второе изображение, просто отредактировал сообщение. Я не уверен, связана ли моя проблема с css не рендерингом после ajax-вызова или мне нужен обратный вызов для моей функции datatable. – Lberteh
@ Lberteh Если это так, можете ли вы поделиться своим исходным (то есть первым) кодом инициализации для dataTable? Кажется, что эти два вызова не совпадают. –
не он под var TableDatatablesResponsive = function() {... Я буду честен, я купил шаблон html, и я действительно мало знаю о js ... – Lberteh