Javascript asp.net mvc按日期排序未按预期工作

我有一个按日期排序的记录表， 页面加载时 没有分页和搜索框，但排序工作正常（按查询中的日期排序）。 当我单击其中一个复选框时，会执行一个java脚本命令 表1.draw（） 一旦该命令执行，我将获得带有分页和搜索框的表 但是排序日期就像一个字符串一样工作。 我想一直显示分页和搜索框 （我可以通过调用window.onload和table.draw来实现） 但排序仍然没有按预期进行

知道是什么原因吗

这是我的桌子：

<div class="p-4 border rounded">
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Approved" checked />
            <label class="custom-control-label" for="Approved">Approved </label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Pending" checked />
            <label class="custom-control-label" for="Pending">Pending </label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Rejected" checked>
            <label class="custom-control-label" for="Rejected">Rejected </label>
        </div>
        <table id="tblData" class="table table-striped table-bordered" style="width:100%">
            <thead class="thead-dark">
                <tr class="table-info">
                    <th>Address</th>
                    <th>Payment Type</th>
                    <th>Amount</th>
                    <th>Payment Date</th>
                    <th>Status</th>
                    <th></th>
            </thead>

            @foreach (PaymentHistory paymentHistory in Model)
            {
        <tr>
            <td>@ViewBag.getPaymentAddress(paymentHistory.SentFromAddressId).ToString()</td>
            <td>@ViewBag.getPaymentType(paymentHistory.SentFromAddressId).ToString()</td>
            <td>@paymentHistory.Amount$</td>
            <td>@paymentHistory.PayDate</td>
            @if (paymentHistory.Status == KTSite.Utility.SD.PaymentStatusApproved)
            {
              <td style="font-weight:bold;color:forestgreen">@paymentHistory.Status</td> 
             }
             else if (paymentHistory.Status == KTSite.Utility.SD.PaymentStatusRejected)
            {
                <td style="font-weight:bold;color:red">@paymentHistory.Status</td>
            }
            else
            {
                <td>@paymentHistory.Status</td>
            }
            @if (paymentHistory.Status == KTSite.Utility.SD.PaymentStatusPending)
            {
        <td>
            <div class="text-center">
                <input type="hidden" asp-for="@paymentHistory.Id" />
                <input type="checkbox" asp-for="@paymentHistory.isChecked" />
            </div>
        </td> }
                        else
                        {
        <td></td>}
        </tr>
       }
        </table>
</div>

   $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var status = data[4];
                    if (($('#Approved').prop("checked") == true && status == '@KTSite.Utility.SD.PaymentStatusApproved.ToString()') ||
                        ($('#Pending').prop("checked") == true && status == '@KTSite.Utility.SD.PaymentStatusPending.ToString()')||
                        ($('#Rejected').prop("checked") == true && status == '@KTSite.Utility.SD.PaymentStatusRejected.ToString()'))
                    {
                        return true;
                    }
                    else { return false; }
                }
            );
            $('input:checkbox').on('change', function () {
                var table = $('#tblData').DataTable();
                table.draw();
            });