重新加載Ajax之后，無法單擊DataTable中的按鈕
[英]Button Inside DataTable Unable To Click After Ajax Reload
問題描述
我有一個數據，每行有兩個按鈕“取消”和“更新”。 當頁面開始加載時，我可以單擊“取消”和“更新”按鈕。 但是在調用ajax並將行添加到數據表之后，我無法單擊“取消”和“更新”。 下面的屏幕截圖是我ajax調用並嘗試單擊“更新”按鈕后的結果。
import $ from 'jquery';
import 'jquery-ui';
import 'semantic-ui-sass';
import 'datatables.net-se';
import {initReportDateTime, generateCSV} from "./helper";
import moment from 'moment';
//routing
const routes = require('../../../public/js/fos_js_routes.json');
import Routing from '../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js';
import {cancelBooking} from "../utility/api";
Routing.setRoutingData(routes);
//dictionary variable for later use
let csvData ;
let totalNumOfDays =0;
let totalNumOfSales =0;
$(document).ready(function(){
let postData = {
startDate: null,
endDate : null,
companies: null
}
drawTable(postData);
initReportDateTime("#reportDateRange");
$("#downloadCsv").click(function(event){
event.preventDefault();
if (csvData !== null && csvData !==''){
generateCSV(csvData,"Sales_Report",totalNumOfSales.toFixed(2),totalNumOfDays);
}
});
$("#report_form").submit(function(event){
event.preventDefault();
let dateRange = $("#reportDateRange").val();
let companies = $("#report_company").val();
let status = $("#report_status").val();
let splitDate = dateRange.split(" ");
let startDate = splitDate[0];
let endDate = splitDate[2];
debugger;
postData = {
startDate: startDate,
endDate : endDate,
companies: companies,
status : status
}
$('#salesTable').DataTable().destroy();
//redraw table
drawTable(postData);
})
$("#deleteReason").on('keypress',function () {
( $(this).val() !== '') ?
$(this).parent().removeClass('error') : null;
})
});
export default function drawTable(postdata){
let salesTable =$('#salesTable').DataTable( {
"paging": true,
"ordering": true,
"info": false,
"responsive": true,
"language": {
"emptyTable": "No data available in table"
},
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button id='cancelBooking' class='ui fluid red button cancelBooking'>Cancel</button><button id='updateBooking' class='ui fluid teal button updateBooking'>Update</button>"
} ],
"ajax": {
"url": Routing.generate('generate_report'),
"type": "POST",
"processing":true,
"data": {
startDate: postdata.startDate,
endDate: postdata.endDate,
companies: postdata.companies,
status : postdata.status
},
'language': {
'loadingRecords': ' ',
'processing': '<div class="ui text loader">Loading</div>'
},
success:function(data){
//save in global dictionary
csvData = data;
//reset totalNumOfDays
totalNumOfDays =0;
//reset totalNumOfSales
totalNumOfSales=0;
if (data.length> 0){
data.map(res => {
//format datetime for fromDate
let statusDom;
if(res.status === 'Received'){
statusDom = `<div class="ui" data-position="top left" data-tooltip="Customer haven't yet, but already generate quotation."><a class="ui yellow label">${res.status}</a></div>`;
}else if(res.status === 'Confirmed'){
statusDom = `<div class="ui" data-position="top left" data-tooltip="Customer already make payment."><a class="ui green label">${res.status}</a></div>`;
}else {
statusDom = `<div class="ui" data-position="top left" data-tooltip="Partner or admin cancel the booking"><a class="ui red label">${res.status}</a></div>`;
}
let startDate = moment(res.fromDate);
let endDate = moment(res.toDate);
let dateDiff = endDate.diff(startDate,'days');
totalNumOfDays = totalNumOfDays+dateDiff;
let buttons = `<button class="ui fluid red button" value="${res.refId}" onclick="showDeleteModal()">Delete</button> <br/>
`;
totalNumOfSales = totalNumOfSales + res.totalAmt;
//<button class="ui fluid teal button" value="${res.refId}">Update</button>
salesTable.row.add([
`${res.customer.firstName} ${res.customer.lastName}`,
res.company.name,
res.refId,
statusDom,
res.fromDate,
res.toDate,
dateDiff,
res.vehicleType,
res.purpose,
res.totalAmt,
res.coverAmt
]).draw(false);
})
$("#totalNumOfDays").html(totalNumOfDays);
$("#totalNumOfSales").html(totalNumOfSales.toFixed(2));
} else {
$(".dataTables_empty").css('text-align','center');
$(".dataTables_empty").html('No data available in table');
$("#totalNumOfDays").html(0);
$("#totalNumOfSales").html(0);
}
}
}
} );
//cancel booking
$('#salesTable tbody').on( 'click', '.cancelBooking', function () {
let data = salesTable.row( $(this).parents('tr') ).data();
let refId = data[ 2 ];
$(".refId").html(refId);
$('.coupled.modal').modal({
allowMultiple: false
});
$('.first.modal').modal({
'onApprove' : function (event) {
// salesTable.ajax.reload();
let reason = $("#deleteReason").val();
if (reason ==="") {
$("#deleteForm>div").addClass('error');
$("#deleteForm").next().removeClass('hide');
//still open
$('.first.modal').modal('show');
return false;
}
//cancel booking via api
cancelBooking(refId,reason).then(response => {
if (response.status === 400){
$("#secondModelHeader").html("Error");
$("#secondModelContent").html(response.data);
}
if (response.status ===201) {
$("#secondModelHeader").html("Success");
$("#secondModelContent").html(response.data.cancelMessage);
}
$('.second.modal').modal({
'onApprove': function (){
location.reload();
}
}).modal('show');
});
}
}).modal('show')
} );
$('#salesTable tbody').on( 'click', '.updateBooking', function () {
let data = salesTable.row( $(this).parents('tr') ).data();
let refId = data[ 2 ];
let updateBooking = Routing.generate('update_booking');
window.location.href = `${updateBooking}/${refId}`;
} );
return salesTable
}
如何使我的“取消”和“更新”按鈕能夠在ajax調用后單擊並加載到數據表中？
2 個解決方案
解決方案1
0 2019-08-23 09:44:17
問題在這里：
$('#salesTable tbody').on( 'click', '#cancelBooking', function () {
在這里，您使用的是#cancelBooking ，它是一個id並且ID在網頁中必須是唯一的，並且對於以下情況也是如此：
$('#salesTable tbody').on( 'click', '#updateBooking', function () {
將這兩個更改為類，然后重試。
解決方案2
0 2019-08-23 10:08:14
好像我只是通過存儲let salesTable;來解決let salesTable; 全局並將draw(false)更改為draw() ，似乎我可以在ajax重新加載后單擊按鈕。 下面是我的固定
import $ from 'jquery';
import 'jquery-ui';
import 'semantic-ui-sass';
import 'datatables.net-se';
import {initReportDateTime, generateCSV} from "./helper";
import moment from 'moment';
//routing
const routes = require('../../../public/js/fos_js_routes.json');
import Routing from '../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js';
import {cancelBooking} from "../utility/api";
Routing.setRoutingData(routes);
//dictionary variable for later use
let csvData ;
let totalNumOfDays =0;
let totalNumOfSales =0;
let salesTable;
$(document).ready(function(){
let postData = {
startDate: null,
endDate : null,
companies: null
}
drawTable(postData);
initReportDateTime("#reportDateRange");
$("#downloadCsv").click(function(event){
event.preventDefault();
if (csvData !== null && csvData !==''){
generateCSV(csvData,"Sales_Report",totalNumOfSales.toFixed(2),totalNumOfDays);
}
});
$("#report_form").submit(function(event){
event.preventDefault();
let dateRange = $("#reportDateRange").val();
let companies = $("#report_company").val();
let status = $("#report_status").val();
let splitDate = dateRange.split(" ");
let startDate = splitDate[0];
let endDate = splitDate[2];
postData = {
startDate: startDate,
endDate : endDate,
companies: companies,
status : status
}
$('#salesTable').DataTable().destroy();
//redraw table
drawTable(postData);
})
$("#deleteReason").on('keypress',function () {
( $(this).val() !== '') ?
$(this).parent().removeClass('error') : null;
})
});
export default function drawTable(postdata){
salesTable =$('#salesTable').DataTable( {
"paging": true,
"ordering": true,
"info": false,
"responsive": true,
"language": {
"emptyTable": "No data available in table"
},
"columnDefs": [ {
"targets": -1,
// "data": null,
"defaultContent": "<button id='cancelBooking' class='ui fluid red button cancelBooking'>Cancel</button><button id='updateBooking' class='ui fluid teal button updateBooking'>Update</button>"
} ],
"ajax": {
"url": Routing.generate('generate_report'),
"type": "POST",
"processing":true,
"data": {
startDate: postdata.startDate,
endDate: postdata.endDate,
companies: postdata.companies,
status : postdata.status
},
'language': {
'loadingRecords': ' ',
'processing': '<div class="ui text loader">Loading</div>'
},
success:function(data){
//save in global dictionary
csvData = data;
//reset totalNumOfDays
totalNumOfDays =0;
//reset totalNumOfSales
totalNumOfSales=0;
if (data.length> 0){
data.map(res => {
//format datetime for fromDate
let statusDom;
if(res.status === 'Received'){
statusDom = `<div class="ui" data-position="top left" data-tooltip="Customer haven't yet, but already generate quotation."><a class="ui yellow label">${res.status}</a></div>`;
}else if(res.status === 'Confirmed'){
statusDom = `<div class="ui" data-position="top left" data-tooltip="Customer already make payment."><a class="ui green label">${res.status}</a></div>`;
}else {
statusDom = `<div class="ui" data-position="top left" data-tooltip="Partner or admin cancel the booking"><a class="ui red label">${res.status}</a></div>`;
}
let startDate = moment(res.fromDate);
let endDate = moment(res.toDate);
let dateDiff = endDate.diff(startDate,'days');
totalNumOfDays = totalNumOfDays+dateDiff;
let buttons = `<button class="ui fluid red button" value="${res.refId}" onclick="showDeleteModal()">Delete</button> <br/>
`;
totalNumOfSales = totalNumOfSales + res.totalAmt;
//<button class="ui fluid teal button" value="${res.refId}">Update</button>
salesTable.row.add([
`${res.customer.firstName} ${res.customer.lastName}`,
res.company.name,
res.refId,
statusDom,
res.fromDate,
res.toDate,
dateDiff,
res.vehicleType,
res.purpose,
res.totalAmt,
res.coverAmt
]).draw();
})
$("#totalNumOfDays").html(totalNumOfDays);
$("#totalNumOfSales").html(totalNumOfSales.toFixed(2));
} else {
$(".dataTables_empty").css('text-align','center');
$(".dataTables_empty").html('No data available in table');
$("#totalNumOfDays").html(0);
$("#totalNumOfSales").html(0);
}
}
}
} );
//cancel booking
$('#salesTable tbody').on( 'click', '.cancelBooking', function () {
let data = salesTable.row( $(this).parents('tr') ).data();
let refId = data[ 2 ];
$(".refId").html(refId);
$('.coupled.modal').modal({
allowMultiple: false
});
$('.first.modal').modal({
'onApprove' : function (event) {
// salesTable.ajax.reload();
let reason = $("#deleteReason").val();
if (reason ==="") {
$("#deleteForm>div").addClass('error');
$("#deleteForm").next().removeClass('hide');
//still open
$('.first.modal').modal('show');
return false;
}
//cancel booking via api
cancelBooking(refId,reason).then(response => {
if (response.status === 400){
$("#secondModelHeader").html("Error");
$("#secondModelContent").html(response.data);
}
if (response.status ===201) {
$("#secondModelHeader").html("Success");
$("#secondModelContent").html(response.data.cancelMessage);
}
$('.second.modal').modal({
'onApprove': function (){
location.reload();
}
}).modal('show');
});
}
}).modal('show')
} );
$('#salesTable tbody').on( 'click', '.updateBooking', function () {
let data = salesTable.row( $(this).parents('tr') ).data();
let refId = data[ 2 ];
let updateBooking = Routing.generate('update_booking');
window.location.href = `${updateBooking}/${refId}`;
} );
return salesTable
}
數據表Ajax重新加載在單擊按鈕時不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.