排序的静态列表未显示在 jQuery 数据表中

Question

我在 ASP.Net Core MVC C# 应用程序中使用 jQuery Datatable。它从DB加载数据。我正在使用 AJAX 调用将数据加载到 jQuery Datatable 中。我能够对静态列表进行升序和降序排序。但它没有反映在数据表中。 在 cshtml 中：

      function resetDataTable() {

        myDataTable = $("#example").DataTable({
        paging: false,
        searching: false,
        serverSide: true,
        sortable: true,
        filter: true,
        searchDelay: 1000,
        lengthMenu: [[5, 10, 50, -1], [5, 10, 50, "All"]],
        language: { searchPlaceholder: "Brand, Buying Group" },
        scrollCollapse: true,
        ajax: {
            url: '@Url.Action("LoadDoors", "DOOR_MANAGEMENT")',
            type: 'GET',
            datatype: 'json',
            headers: { 'RequestVerificationToken': 'your json token' },
            data: (d) => {
                console.log(d)
                return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, 
                         FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir}
            },
            beforeSend: () => { ShowLoader(); },
            complete: () => { HideLoader(); },
            dataSrc: (json) => {
                json = json.data;                    
                return json;
            }
        },
        columnDefs: [{ className: "dt-center", targets: [1, 2, 3] }],
        columns: [
            { data: 'setting_id', title: 'SETTING ID', autoWidth: false, visible: false },
            { data: 'brand', title: 'Brand Code', autoWidth: true, searchable: true },
            { data: 'buying_group', title: 'Buying Group', autoWidth: true },                
            { data: 'setting_name', title: 'Setting Name', autoWidth: true },
            { data: 'is_active', title: 'Is Active', autoWidth: true },
            { data: 'data_model', title: 'Data Model', autoWidth: true, orderable: false },
            { data: 'tracking_weeks', title: 'Tracking Weeks', autoWidth: true },
            { data: 'updated_user', title: 'Updated User', autoWidth: true },
            { data: 'updated_date', title: 'Updated Date', autoWidth: true },             
            
        ],

        initComplete: function () {
            configFilter(this, [0, 1, 3, 4, 5, 6, 7]);
        }
    });
}

并且排序是通过在控制器方法中使用反射来完成的。下面的部分工作正常。 但排序后的列表并未反映在 UI JQuery 数据表中。这就是问题所在。怎么办呢？？？

         recordsTotal = StaticData.ListDoorData.Count();

        if (!String.IsNullOrEmpty(FilterByColumn))
        {
            PropertyInfo propInfo = typeof(DoorDetails).GetProperty(FilterByColumn, BindingFlags.Public | BindingFlags.Instance);
            if (propInfo != null)
            {
                switch (ASC_DSEC.ToUpper())
                {
                    case "ASC":
                        StaticData.ListDoorData = StaticData.ListDoorData.OrderBy(x => propInfo.GetValue(x, null)).ToList();                            
                        break;

                    case "DESC":
                        StaticData.ListDoorData = StaticData.ListDoorData.OrderByDescending(x => propInfo.GetValue(x, null)).ToList();                            
                        break;
                }
            }
        }

Answer 1

您可以在初始化现有表之前销毁现有表以防止冲突，请使用此代码片段

function resetDataTable() {

    if ($.fn.DataTable.isDataTable('#example')) {
        $('#example').DataTable().destroy(); // Destroy existing DataTable before re-initializing
    }

    myDataTable = $("#example").DataTable({
....

您还应该调试应用程序以检查变量是否具有正确的值，例如 ASC_DSEC.ToUpper()、StaticData.ListDoorData、Ajax 调用返回的绘图等。