我希望使用DataTables，以便我可以使用列排序功能。它目前正在工作，虽然我每隔2秒就有一个setInterval，它会刷新回原来的状态。我希望有人可以帮助我，这样一旦订购了一个专栏，它就会被记住。
这是我的JS代码：
$(document).ready(function () {
var intervalId = setInterval(function () {
reloadTable();
}, 2000);
$('#bidders').on('click', '.stop', function(){
clearInterval(intervalId);
});
$('body').on('click', '.start', function(){
intervalId = setInterval(function () {
reloadTable()
}, 2000);
});
$.ajax({
type: 'GET',
url: 'getData.php',
dataType: 'json',
cache: false,
success: function(response) {
//console log response so you know what is in array from PHP
console.log(response);
$('#bidders').on('click', 'button.post', function(){
var data = $(this).prop('value');
$.post('postData.php', {data: data}, function(response) {
response = JSON.parse(response);
console.log(response[0]);
$("#invoiceModal").find("div.postRemoval p:gt(0)").remove();
$('#invoiceModal').find('div.postRemoval p:first-child').remove();
var total = 0;
for(var i = 0; i < response.length; i++) {
$('#pay').attr('name', response[i]['ID']);
$('#pay').attr('value', response[i]['InvoicePaid']);
total += parseInt(response[i]['Amount']);
$('.modal-title').text(response[i]['First Name'] +' '+ response[i]['Last Name'] + "'s Invoice");
$('#giftaid').html(response[i]['Gift Aid']);
$('#phone').html(response[i]['Phone Number']);
$('#table').html(response[i]['MadeFrom']);
$('#email').text(response[i]['Email Address']);
$('#total').text(total);
$('#invoiceModal-1').append("<p class='col-8'>" + response[i]["name"] + "</p><p class='col-4'>£" + response[i]["Amount"] + "</p>");
}
});
});
var j = 1;
var anon;
var bidMsg;
for(var i = 0; i < response['Registered Bidders'].length; i++) {
if(response['Registered Bidders'][i]['fldAnonymous'] == 1) {
anon = "YES";
} else {
anon = "NO";
}
if(response['Registered Bidders'][i]['fldBidMessage'] == '') {
bidMsg = 'None';
} else {
bidMsg = response['Registered Bidders'][i]['fldBidMessage'];
}
$('#regBidders').append('<tr><td>' + j + '</td><td>' + response['Registered Bidders'][i]['fldID'] +'</td><td>' + response['Registered Bidders'][i]['fldFirstName'] + ' ' + response['Registered Bidders'][i]['fldLastName'] + '</td><td>' + response['Registered Bidders'][i]['fldTable'] + '</td><td>' + response['Registered Bidders'][i]['fldEmail'] + '</td><td>' + response['Registered Bidders'][i]['fldPhone'] + '</td><td>' + anon + '</td><td>' + bidMsg + '</td></tr>');
j++;
}
}
});
});
function sendInvoice(arg) {
var data = arg.value;
var id = arg.id;
$.post('mailer.php', {data: data}, function(response) {
console.log(response);
$('#' + id).css('background', 'green');
});
}
function updateInfo(arg) {
var prev = $(arg).prev();
var value = $(prev).attr('contenteditable');
if(value == "false") {
$(prev).css('border', '2px solid black');
$(prev).attr('contenteditable', 'true');
$(arg).text('Update');
$(arg).on('click', function() {
if($(prev).prop('id') == 'email') {
$.post('updateGuest.php', {email: $(prev).text(), id: prev.attr('value')}, function(response) {
console.log(response);
});
} else {
$.post('updateGuest.php', {phone: $(prev).text(), id: prev.attr('value')}, function(response) {
console.log(response);
});
}
});
} else {
$(prev).attr('contenteditable', 'false');
$(prev).css('border', 'none');
$(arg).text('Edit');
}
}
function updateInvoicePaid(arg) {
var dataValue = arg.value;
var dataID = arg.name;
if(dataValue == 1) {
$.post('updateData.php', {name: dataID, value: 0}, function(response) {
$(arg).text('PAY');
$(arg).removeClass('payBtn');
$('tr#' + dataID).css({"background": "none", "color": "black"});
$('tr#' + dataID + ' td').last().text('NO');
arg.value = 0;
console.log(arg.value);
console.log(response);
$(arg).closest('tr').removeClass('updatePaid');
});
} else {
$.post('updateData.php', {name: dataID, value: 1}, function(response) {
$(arg).text('PAID');
$(arg).addClass('payBtn');
$('tr#' + dataID).css({"background": "green", "color": "white"});
$(arg).closest('.modal').css('color', 'black');
$('tr#' + dataID + ' td').last().text('YES');
arg.value = 1;
console.log(arg.value);
console.log(response);
});
}
}
function reloadTable(){
$.ajax({
type: 'GET',
url: 'getData.php',
dataType: 'json',
cache: false,
success: function(response) {
var j = 1;
var invoicePaid;
// This will clear table of the old data other than the header row
$("#bidders").find("tr:gt(0)").remove();
$('#bidders').find('tr:first-child').remove();
for(var i = 0; i < response['Winning Bidders'].length; i++) {
if(response['Winning Bidders'][i]['invoicePaid'] == 0) {
invoicePaid = 'NO';
$('#bidders').append('<tr id="' + response['Winning Bidders'][i]['bidderID'] + '" ><td>' + j + '</td><td>' + response['Winning Bidders'][i]['bidderID'] + '</td><td>' + response['Winning Bidders'][i]['First Name'] + " " + response['Winning Bidders'][i]['Last Name'] + '</td><td>' + response['Winning Bidders'][i]['Registered Table Number'] + '</td><td>' + response['Winning Bidders'][i]['Total Winning Bids'] + '</td><td>' + response['Winning Bidders'][i]['Total Pledges Made'] +'</td><td>£' + response['Winning Bidders'][i]['Grand Total'] + '</td><td><button value="' + response['Winning Bidders'][i]['bidderID'] + '" type="button" class="post stop btn btn-primary" data-toggle="modal" data-backdrop="false" data-target="#invoiceModal">CLICK HERE</button></td><td class="text-center">' + invoicePaid + '</td></tr>');
} else {
invoicePaid = 'YES';
$('#bidders').append('<tr id="' + response['Winning Bidders'][i]['bidderID'] + '" style="background: green; color: white;"><td>' + j + '</td><td>' + response['Winning Bidders'][i]['bidderID'] + '</td><td>' + response['Winning Bidders'][i]['First Name'] + " " + response['Winning Bidders'][i]['Last Name'] + '</td><td>' + response['Winning Bidders'][i]['Registered Table Number'] + '</td><td>' + response['Winning Bidders'][i]['Total Winning Bids'] + '</td><td>' + response['Winning Bidders'][i]['Total Pledges Made'] +'</td><td>£' + response['Winning Bidders'][i]['Grand Total'] + '</td><td><button value="' + response['Winning Bidders'][i]['bidderID'] + '" type="button" class="post stop btn btn-primary" data-toggle="modal" data-backdrop="false" data-target="#invoiceModal">CLICK HERE</button></td><td class="text-center">' + invoicePaid + '</td></tr>');
}
j++;
}
$('#grossTotal').text(response['Grand Total']);
$('#netTotal').text(response['Grand Net Total']);
$('#paymentsTotal').text(response['Payments Total']);
$('#biddersPaid').text(response['Bidders Paid']);
$('#bidTotal').text(response['Bid Total']);
$('#netBidTotal').text(response['Net Bid Total']);
$('#pledgeTotal').text(response['Pledge Total']);
if($.fn.dataTable.isDataTable('#dataTable')) {
var table = $('#dataTable').DataTable();
} else {
table = $('#dataTable').DataTable({
"StateSave": true,
"StateDuration": -1,
paging: false,
});
}
}
});
}
非常感谢您的帮助！