Таблица данных JQuery – сортировка столбцов не работает в

Я работаю над приложением ASP.NET Core MVC и использую JQuery Datatable в своем приложении. Моя таблица данных не сортируется при нажатии кнопки сортировки в заголовке столбца. Моя таблица данных показана ниже:

<table class = "table display table-bordered" id = "DATATABLE">
</table>

Внутри тега <script>:

$("#DATATABLE").DataTable({
    serverSide: true,
    filter: true,
    searchDelay: 1000,
    scrollY: StaticData.TABLE_HEIGHT + 'px',
    lengthMenu: StaticData.TABLE_PAGE_SIZE,
    language: { searchPlaceholder: "Name, Teacher" },
    scrollCollapse: true,
    ajax: {
        url: '/STUD_MANAGEMENT/LoadStud',
        type: 'GET',
        datatype: 'json',
        headers: { 'RequestVerificationToken': 'your json token' },
        data: (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: [5, 6, 7, 8, 11], width: '2%', }],
    columns: [
        { data: 'STUD_ID', title: 'STUD ID', autoWidth: false, visible: false },
        { data: 'CLASS_ID', title: 'CLASS ID', autoWidth: false, visible: false },
        { data: 'NAME', title: 'Name', autoWidth: true, searchable: true },
        { data: 'AGE', title: 'Age', autoWidth: true },
        { data: 'TEACHER', title: 'Teacher', autoWidth: true },               
    ]            
});

А метод LoadStud в контроллере показан ниже:

public IActionResult LoadStud(int draw = 1, int start = 0, int length = 10, string search = "", string FilterByColumn = "", string ASC_DSEC = "")
{
    List<STUD_MANAGEMENT> ListData = new List<STUD_MANAGEMENT>();

    int recordsTotal = 0;            

    STUD_MANAGEMENT dm = new STUD_MANAGEMENT();
    dm.STUD_ID = 1;
    dm.CLASS_ID = 1;
    dm.NAME = "James";
    dm.TEACHER = "SEPHORA";
    dm.AGE = "12";

    STUD_MANAGEMENT dm1 = new STUD_MANAGEMENT();
    dm1.STUD_ID = 2;
    dm1.CLASS_ID = 2;
    dm1.NAME = "Naneem";
    dm1.TEACHER = "Chithra";
    dm1.AGE = "15";

    STUD_MANAGEMENT dm11 = new STUD_MANAGEMENT();
    dm11.STUD_ID = 3;
    dm11.CLASS_ID = 3;
    dm11.NAME = "Sony";
    dm11.TEACHER = "Mano USA";
    dm11.AGE = "3";            

    ListData.Add(dm);
    ListData.Add(dm1);
    ListData.Add(dm11);

    recordsTotal = ListData.Count();                    

    var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = ListData };
    return Ok(jsonData);
}

Класс STUD_MANAGEMENT показан ниже:

public class STUD_MANAGEMENT
{             
   public int STUD_ID { get; set; }
   public int CLASS_ID { get; set; }      
   public string NAME { get; set; }
   public int AGE { get; set; }   
   public string TEACHER { get; set; }
}

Любая ошибка в консоли разработчика?

Death-is-the-real-truth 13.08.2024 12:04

Нет ошибок в консоли разработчика

KitKat 13.08.2024 12:14

В Stack Overflow есть различные вопросы о DataTables, где спрашивающий использует serverSide: true, но затем задается вопросом, почему сортировка (или какой-либо другой аспект DataTables) не работает. Это говорит о том, что задавший вопрос может не понимать, почему вообще предоставляется обработка на стороне сервера. Он предназначен для помощи в тех случаях, «когда чтение данных из DOM просто слишком медленное или громоздкое» (см. ссылку). Другими словами, это необходимо, когда у вас достаточно большие объемы данных.

andrewJames 14.08.2024 18:10

Я часто думаю, что фактическое решение может быть таким: не использовать обработку на стороне сервера, потому что обработка на стороне сервера вам не нужна. Ваши объемы данных недостаточно велики, чтобы этого требовать. Вместо этого используйте значение по умолчанию (false) — и позвольте DataTables обрабатывать всю логику сортировки, фильтрации и разбиения на страницы, поэтому вам не нужно предоставлять какую-либо логику самостоятельно. (Я не знаю, верно ли это в данном конкретном вопросе, поскольку в вопросе не было предоставлено никаких соответствующих подробностей.)

andrewJames 14.08.2024 18:11
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
4
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Из Серверная обработка:

При включенной обработке на стороне сервера все действия по разбиению на страницы, поиску и упорядочиванию, которые выполняет DataTables, передаются на сервер, где механизм SQL (или аналогичный) может выполнять эти действия с большим набором данных.

В нем упоминается, что ответственность за выполнение этих операций лежит на серверной части.

Ваша текущая реализация не охватывает порядок.

Простой способ заключается в том, что вам нужно проверить на основе FilterByColumn и ASC_DSEC, чтобы упорядочить значение свойства, отсортировав порядок соответствующим образом.

if (!String.IsNullOrEmpty(FilterByColumn))
{
    ASC_DSEC = ASC_DSEC.ToUpper();
    ASC_DSEC = ASC_DSEC == "ASC" || ASC_DSEC == "DESC"
        ? ASC_DSEC
        : "ASC";

    switch (FilterByColumn.ToUpper())
    {
        case "STUD_ID":
            ListData = ASC_DSEC == "ASC"
                ? ListData.OrderBy(x => x.STUD_ID).ToList()
                : ListData.OrderByDescending(x => x.STUD_ID).ToList();
            break;

        case "CLASS_ID":
            ListData = ASC_DSEC == "ASC"
                ? ListData.OrderBy(x => x.CLASS_ID).ToList()
                : ListData.OrderByDescending(x => x.CLASS_ID).ToList();
            break;

        case "NAME":
            ListData = ASC_DSEC == "ASC"
                ? ListData.OrderBy(x => x.NAME).ToList()
                : ListData.OrderByDescending(x => x.NAME).ToList();
            break;

        case "AGE":
            ListData = ASC_DSEC == "ASC"
                ? ListData.OrderBy(x => x.AGE).ToList()
                : ListData.OrderByDescending(x => x.AGE).ToList();
            break;

        case "TEACHER":
            ListData = ASC_DSEC == "ASC"
                ? ListData.OrderBy(x => x.TEACHER).ToList()
                : ListData.OrderByDescending(x => x.TEACHER).ToList();
            break;                  
    }
}

var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = ListData };

Однако это не лучший способ, учитывая расширяемость и удобство обслуживания: например, в будущем вы можете добавить новое свойство, изменить имя свойства или удалить свойство.

Если вы ищете продвинутый способ, работайте с System.Reflection.

using System;
using System.Collections.Generic;
using System.Reflection;
using System.Linq;
if (!String.IsNullOrEmpty(FilterByColumn))
{
    PropertyInfo propInfo = typeof(STUD_MANAGEMENT).GetProperty(FilterByColumn, BindingFlags.Public | BindingFlags.Instance);
    if (propInfo != null)
    {
        switch (ASC_DSEC.ToUpper())
        {
            case "ASC":
                ListData = ListData.OrderBy(x => propInfo.GetValue(x, null)).ToList();
                break;
                        
            case "DESC":
                ListData = ListData.OrderByDescending(x => propInfo.GetValue(x, null)).ToList();
                break;
        }
    }
}

var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = ListData };

Другие вопросы по теме

CSS и JavaScript не применяются правильно после переноса содержимого HTML в компонент приложения Angular из-за проблем с инкапсуляцией просмотра и порядком загрузки скриптов
Невозможно сделать столбец закрепленным в таблице
Как я могу скопировать идентификатор из div в идентификатор CSS?
Почему мой Javascript переключает два элемента одновременно?
Изменение значений градиента при нажатии/нажатии
Как сравнить два изображения, чтобы узнать, являются ли они одним и тем же изображением, используя C# и jquery?
Итерация элемента внутри элемента html div
После долгих поисков мы включили на нашем сайте автозапуск с голосовой прокруткой, но возникла проблема
Как установить стиль наведения на кнопку после нажатия и оставить кнопку?
Добавить выбранное значение переключателя в качестве данных пользовательского элемента корзины через Ajax. Добавить в корзину в цикле продуктов WooCommerce

Похожие вопросы

Как я могу исправить связь многие-ко-многим между двумя объектами, чтобы третья таблица автоматически заполнялась в структуре сущностей и веб-API (С#)
Как я могу зарегистрировать HTTP-ответ с помощью промежуточного программного обеспечения в функциях Azure, выполняющих изолированный процесс .NET 8?
Контекст Testcontainers .NET 8 db, похоже, не обновляется в [Факт], проблема решена, ищет объяснение
Переписать удаление служебной шины Azure
Невозможно вставить явное значение для столбца идентификаторов в таблице «Обсуждаемые продукты», если для параметра IDENTITY_INSERT установлено значение OFF
Сопоставление и удаление подстрок повторяющихся символов, а затем возврат длины самой длинной подстроки
Как отсортировать массив объектов сам по себе на основе свойства указанного объекта?
Динамическое создание выражений LINQ — ToLower и «Содержит» одновременно
Visual Studio 2022 FileNotFoundException при доступе к dll без локальной копии
Является ли этот код Blazor/EF Core эффективным и безопасным использованием DbContext и доступом к теневым свойствам?