【发布时间】：2016-11-10 00:59:31
【问题描述】：
谈到 Ajax，我完全是个新手。而且我对 js 也没有太多经验，但我需要完成这件事，这让我发疯。
所以我认为我有以下 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";
}
}
最后，与 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函数后，我得到的是：
我基本上失去了以前的功能......
我知道这可能是一个愚蠢的帖子，但作为一个新手，我完全迷路了，我已经尝试修复它好几天了。
有什么想法或建议吗？
【问题讨论】：
标签： jquery ajax datatables