当谈到Ajax时,我是一个完整的新手。而且我对js也没有太多的经验,但我需要完成这一切,这让我疯狂。Ajax + Datatables
所以我必须在我看来,下面的HTML(我不认为这是相关的,但我用笨构建应用程序...
<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";
}
}
最后,这涉及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();
});
});
选择日期范围,并调用Ajax的功能后,以股代息,这是我得到的:
我基本上失去了我以前的功能...
我知道这可能是一个愚蠢的职位,但作为一个新手我完全失去了,我一直在试图修复它几天。
任何想法或建议?
嗨,Malkar。感谢您的回复。阿贾克斯调用的作品,我忘了张贴第二张图片,只是编辑帖子。我不知道我的问题是否与ajax调用后css不呈现相关,或者如果我需要对我的数据表函数进行回调。 – Lberteh
@Lberteh如果是这样的话,你可以分享一下你原来的(即第一次)dataTable的初始化代码吗?看起来这两个电话不匹配。 –
是不是在var TableDatatablesResponsive = function(){... 我真的,我买了一个html模板,我真的不知道很多关于js ... – Lberteh