“对DataTable排序在Firefox浏览器上不起作用”。它在Chrome浏览器上运行时工作正常,但在Firefox上不起作用。在页面加载后使用Firefox并第一次单击排序列时,它可以工作,但第二次单击排序列时,它没有做任何事情。
JavaScript
$(document).ready(function () {
setUpTable();
});
function setUpTable() {
var skipAjax = false;
var skipAjaxDrawValue = 0;
var isSortAscending = true;
table = $("#paymentTable").DataTable({
bProcessing: false,
bSort: false,
destroy: true,
dom: '<"top"i>rt<"bottom"lp><"clear">', // remove built-in search input box/label
info: false,
paging: false,
serverSide: true,
stateSave: true,
targets: "no-sort",
ajax: {
dataType: "JSON",
type: "POST",
url: "/BeneficiaryPayment/Search",
data: function (data) {
if (skipAjax) {
skipAjaxDrawValue = data.draw;
}
return data;
},
beforeSend: function () {
if (skipAjax) {
const lastResponse = table.ajax.json();
lastResponse.draw = skipAjaxDrawValue;
isSortAscending = !isSortAscending;
lastResponse.data.sort((r1, r2) => r1.TransactionDate < r2.TransactionDate ? isSortAscending ? -1 : 1 : -1);
adjustSortIcon(isSortAscending);
this.success(lastResponse);
skipAjax = false;
return false;
}
showSpinner();
return true;
},
complete: function () {
removeSpinner();
}
},
aoColumns: [
{
className: "details-control",
orderable: false,
data: null,
defaultContent: "",
render: (data) => {
if (!data.Beneficiaries?.length && !data.ForwardDrawdowns?.length) return "";
const plus_sign = data.ForwardDrawdowns?.length > 0
? "plus-sign-secondary"
: "plus-sign";
return `<i class="flag ${plus_sign} hasPointer" aria-hidden="true"></i>`
}
},
{ mDataProp: (_data, _type, full) => getActionButtons(_data) },
{ mDataProp: "DisplayTransactionDate" },
{ mDataProp: (_data, _type, full) => getEditClientLink(_data) },
{ mDataProp: "ClientId" },
{ mRender: (_data, _type, full) => getTradeTransactionLink(full) },
{ mDataProp: "DisplaySoldAmount" },
{ mRender: (_data, _type, full) => getDisplayBoughtAmount(full) },
{ mDataProp: "Destination" },
{ mDataProp: "PaymentMethod" },
{ mDataProp: "Partner" },
{ mRender: (_data, _type, full) => getDisplayPaymentStatus(full["DisplayPaymentStatus"]) },
{ mRender: (_data, _type, full) => getDisplayRiskGrade(full["DisplayRiskGrade"]) }
],
initComplete: function() {
$("#btnSearch").on("click", e => {
const searchText = $("#search").val().trim();
window.localStorage.setItem(searchTextKey, searchText);
const paymentStatus = $("#paymentStatuses").val();
window.localStorage.setItem(paymentStatusKey, paymentStatus);
table.columns(0).search(searchText);
table.columns(1).search(paymentStatus);
isSortAscending = true;
adjustSortIcon(isSortAscending);
table.draw();
e.preventDefault();
});
table.on("click",
"th.sortable",
function() {
skipAjax = true;
table.draw();
}
);
},
"columnDefs": [
{ type: "currency", targets: [colSoldAmount, colBoughtAmount ] }
],
rowCallback: rowCallback
});
}
function adjustSortIcon(isSortAscending) {
const cell = $("th.sortable", 0);
if (isSortAscending) {
cell.removeClass("sorting_desc");
cell.addClass("sorting_asc");
} else {
cell.removeClass("sorting_asc");
cell.addClass("sorting_desc");
}
}
字符串
超文本标记语言
<table id="paymentTable" class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th></th>
<th class="sortable sorting_asc">Transaction Date</th>
<th>Client</th>
<th>Client Id</th>
<th>Deal Id</th>
<th class="text-right">Client Sold</th>
<th class="text-right">Client Bought</th>
<th>Destination</th>
<th>Payment Method</th>
<th>Partner</th>
<th class="text-center">Payment Status</th>
<th class="text-center">Risk Grade</th>
</tr>
</thead>
</table>
型
1条答案
按热度按时间jdgnovmf1#
数据表在每个浏览器中正常工作,我只是在Firefox中测试它是否正常工作,确保您为数据表添加了最新的脚本和链接。