晚安团队。我使用yajra数据表服务器端将数据显示到表中并将其导出。当我第一次加载数据时,将出现导出按钮,但是当我按日期过滤数据时,导出按钮会消失。请,任何人都可以提供帮助。
<script>
var myChart = new Chart( document.getElementById("customerReportChart"), {
type: 'line',
data: {
labels: [
@foreach($months as $month)
"{{ $month }}",
@endforeach
],
datasets: [
{
fill: false,
label: "Total Connection Per Month - {{ date('Y') }}",
borderColor: "rgba(4, 73, 203,.5)",
backgroundColor: "rgba(4, 73, 203,.5)",
data: [
@foreach($customer_list as $customers)
"{{ $customers }}",
@endforeach
]
}
]
},
options: {
responsive: true,
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Customer'
},
ticks: {
beginAtZero:true
}
}]
}
}
});
var startDate;
var endDate;
var table;
loadCustomer()
// var n = document.createElement('script');
// n.setAttribute('language', 'JavaScript');
// n.setAttribute('src', 'https://debug.datatables.net/debug.js');
// document.body.appendChild(n);
$(document).ready(function(){
$('#filter').click(function(){
var status = $('#status').val();
table.destroy();
loadCustomer(startDate,endDate,status);
})
$('#refresh').click(function(){
startDate = ''
endDate = ''
status = ''
table.destroy();
loadCustomer()
})
})
function loadCustomer(start_date = '', end_date = '', status = ''){
console.log('Hello')
table = $('#customer_table').DataTable({
dom: 'Bfrtip',
buttons: ['csv','print', 'excel', 'pdf'],
processing:true,
serverSide:true,
ajax:{
url:'{{ url('report/customer/list') }}',
data:{start_date,end_date,status}
},
columns:[
{
data:'DT_RowIndex',
name:'DT_RowIndex'
},
{
data:'applicant_name',
name:'applicant_name'
},
{
data:'applicant_phone',
name:'applicant_phone'
},
{
data:'applicant_address',
name:'applicant_address'
},
{
data:'street_name',
name:'street_name'
},
{
data:'user_code',
name:'user_code'
},
{
data:'status',
name:'status'
},
{
data:'meter_number',
name:'meter_number'
},
{
data:'account_type_name',
name:'account_type_name'
},
{
data:'area',
name:'area'
},
{
data:'plot_number',
name:'plot_number'
},
{
data:'house_number',
name:'house_number'
},
{
data:'owner_name',
name:'owner_name'
},
{
data:'owner_phone',
name:'owner_phone'
},
{
data:'water_closet',
name:'water_closet'
},
{
data:'unrinals',
name:'unrinals'
},
{
data:'baths',
name:'baths'
},
{
data:'stand_pipes',
name:'stand_pipes'
},
{
data:'others',
name:'others'
},
{
data:'created_at',
name:'created_at'
}
]
})
}
$.noConflict();
$(document).ready(function(){
$('#daterange-btn').daterangepicker(
{
ranges : {
'Today' : [moment(), moment()],
'Yesterday' : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month' : [moment().startOf('month'), moment().endOf('month')],
'Last Month' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate : moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
startDate = start.format('YYYY/M/D h:m:s');
endDate = end.format('YYYY/M/D h:m:s');
}
)
})
</script>