jquery Firefox浏览器上的DataTable排序

sqxo8psd  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(109)

“对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>

jdgnovmf

jdgnovmf1#

数据表在每个浏览器中正常工作,我只是在Firefox中测试它是否正常工作,确保您为数据表添加了最新的脚本和链接。

相关问题