Блог

Я использую таблицу данных jquery для отображения записей. Datatable работает нормально, если это не рендеринг на стороне сервера. У меня большое количество записей в базе данных. Я реализовал разбивку на страницы, но она не работает. Вот код:

 var table = $('#studentDataTable').dataTable({
            serverSide: true,
            "searching": false,
            paging:true,
            ajax: {
                url: '/Student/GetAllStudent/',
                type: 'POST',
                dataSrc: ''
            },
            
            columns: [

                {
                    'data': 'FirstName',
                    
                },
                {
                    'data': 'rollNumber',
                    'searchable': false,

                },
                {
                    'data': 'fatherName',
                    'searchable': false,

                },

                {
                    'data': 'className',
                    'searchable': false,

                },
                {
                    'sortable': false,
                    'searchable': false,
                    
                },


            ]

        });
  

Действие на стороне сервера возвращает 6 записей, но в таблице данных всегда не найдено совпадающих записей. Это ответ сервера

 {"draw":1,"recordsTotal":100,"recordsFiltered":6,"data":[{"id":1,"userId":"f2992e53-df6a-4eb0-8127-0d2d54de316d","firstName":"Umer","lastName":"Waheed","fatherName":"Abdul","gender":1,"nationality":0,"religionId":0,"email":"yu@gmailcom","birthPlace":0,"dateOfBirth":null,"academicYearId":3,"classSectionId":0,"educationCategoryId":0,"admissionCategoryId":0,"branchId":0,"rollNumber":"4512","username":"Umer_10","className":"Grade 1","classId":3,"sectionName":"C","sectionId":16,"academicYearName":"20-21a","educationCategoryName":"E1","admissionCategoryName":"aa","pageNumber":0,"rowsOfPage":0,"searchByFirstName":null,"searchByLastName":null,"searchByFatherName":null,"searchByClassId":null,"searchBySectionId":null,"classes":null,"sections":null,"academicYears":null,"educationCategories":null,"admissionCategories":null,"classSections":null,"religions":null,"countries":null},{"id":2,"userId":"59cdc2be-aa3e-4c6d-83fc-97e3b0e7200e","firstName":"1","lastName":"1","fatherName":"1","gender":1,"nationality":0,"religionId":0,"email":"1","birthPlace":0,"dateOfBirth":null,"academicYearId":3,"classSectionId":0,"educationCategoryId":0,"admissionCategoryId":0,"branchId":0,"rollNumber":"1","username":"1_25","className":"Grade 1","classId":3,"sectionName":"C","sectionId":16,"academicYearName":"20-21a","educationCategoryName":"E1","admissionCategoryName":"aa","pageNumber":0,"rowsOfPage":0,"searchByFirstName":null,"searchByLastName":null,"searchByFatherName":null,"searchByClassId":null,"searchBySectionId":null,"classes":null,"sections":null,"academicYears":null,"educationCategories":null,"admissionCategories":null,"classSections":null,"religions":null,"countries":null},{"id":3,"userId":"a03a0ec5-6fa6-45f0-897e-ceb2647c8f20","firstName":"2","lastName":"2","fatherName":"21","gender":1,"nationality":0,"religionId":0,"email":"20","birthPlace":0,"dateOfBirth":null,"academicYearId":3,"classSectionId":0,"educationCategoryId":0,"admissionCategoryId":0,"branchId":0,"rollNumber":"562","username":"2_26","className":"Grade 1","classId":3,"sectionName":"C","sectionId":16,"academicYearName":"20-21a","educationCategoryName":"E1","admissionCategoryName":"aa","pageNumber":0,"rowsOfPage":0,"searchByFirstName":null,"searchByLastName":null,"searchByFatherName":null,"searchByClassId":null,"searchBySectionId":null,"classes":null,"sections":null,"academicYears":null,"educationCategories":null,"admissionCategories":null,"classSections":null,"religions":null,"countries":null},{"id":4,"userId":"d0709531-acfb-4c07-96a0-3b59f9f5e9a8","firstName":"sdfas","lastName":"asdf","fatherName":"asdf","gender":1,"nationality":0,"religionId":0,"email":"asdf","birthPlace":0,"dateOfBirth":null,"academicYearId":3,"classSectionId":0,"educationCategoryId":0,"admissionCategoryId":0,"branchId":0,"rollNumber":"sdaf","username":"sdfas_27","className":"Grade 1","classId":3,"sectionName":"D","sectionId":17,"academicYearName":"20-21a","educationCategoryName":"E1","admissionCategoryName":"aa","pageNumber":0,"rowsOfPage":0,"searchByFirstName":null,"searchByLastName":null,"searchByFatherName":null,"searchByClassId":null,"searchBySectionId":null,"classes":null,"sections":null,"academicYears":null,"educationCategories":null,"admissionCategories":null,"classSections":null,"religions":null,"countries":null},{"id":5,"userId":"5d16c8d0-bc72-4a70-8a69-7252e273805c","firstName":"4563","lastName":"1352","fatherName":"iujs","gender":1,"nationality":0,"religionId":0,"email":"umas","birthPlace":0,"dateOfBirth":null,"academicYearId":3,"classSectionId":0,"educationCategoryId":0,"admissionCategoryId":0,"branchId":0,"rollNumber":"sdfa","username":"4563_30","className":"Grade 1","classId":3,"sectionName":"A","sectionId":12,"academicYearName":"20-21a","educationCategoryName":"E1","admissionCategoryName":"aa","pageNumber":0,"rowsOfPage":0,"searchByFirstName":null,"searchByLastName":null,"searchByFatherName":null,"searchByClassId":null,"searchBySectionId":null,"classes":null,"sections":null,"academicYears":null,"educationCategories":null,"admissionCategories":null,"classSections":null,"religions":null,"countries":null},{"id":6,"userId":"b45897e7-7187-4733-b75f-64baff03786c","firstName":"hello","lastName":"ksdjf","fatherName":"hjsjhd","gender":1,"nationality":0,"religionId":0,"email":"sdfasdfasdf","birthPlace":0,"dateOfBirth":null,"academicYearId":3,"classSectionId":0,"educationCategoryId":0,"admissionCategoryId":0,"branchId":0,"rollNumber":"6853","username":"hello_31","className":"Grade 2","classId":4,"sectionName":"A","sectionId":12,"academicYearName":"20-21a","educationCategoryName":"E1","admissionCategoryName":"aa","pageNumber":0,"rowsOfPage":0,"searchByFirstName":null,"searchByLastName":null,"searchByFatherName":null,"searchByClassId":null,"searchBySectionId":null,"classes":null,"sections":null,"academicYears":null,"educationCategories":null,"admissionCategories":null,"classSections":null,"religions":null,"countries":null}]}
  

В чем проблема в приведенном выше коде?

Вот несколько заметок, которые должны решить проблемы, которые я вижу в вопросе:

1. Вы должны удалить dataSrc: '' из определения DataTables. Это указывает DataTables на просмотр корня вашего JSON для отображения строк данных. Однако ваши строки данных находятся в вызываемом объекте data . По умолчанию DataTables ожидает найти свои данные в объекте с именем data — поэтому удаление этой строки эквивалентно использованию dataSrc: 'data' .

2. Это похоже на опечатку : 'data': 'FirstName' . Это должно быть: 'data': 'firstName' .

3. Это может быть или не быть проблемой, но в вашем конечном поле не указывается data источник. Он содержит только sortable и searchable . Возможно, вы указываете значение данных где-то, не показанное в вопросе, — в противном случае вам необходимо указать data значение.

4. Второстепенный момент: вы должны удалить все лишние запятые, которые не нужны. Например: 'data': 'FirstName', . Возможно, вы показываете только подмножество определения таблицы — в этом случае эти запятые должны быть там. Но, как правило, они должны быть удалены. Возможно, они не вызывают здесь проблемы, но в некоторых местах эти дополнительные запятые приведут к синтаксическим ошибкам.

Все вышеуказанные пункты приведут к следующему:

 var table = $('#studentDataTable').dataTable({
    serverSide: true,
    "searching": false,
    paging:true,
    ajax: {
        url: '/Student/GetAllStudent/',
        type: 'POST'
    },
    columns: [
        {
            'data': 'FirstName'
        },
        {
            'data': 'rollNumber',
            'searchable': false
        },
        {
            'data': 'fatherName',
            'searchable': false
        },
        {
            'data': 'className',
            'searchable': false
        },
        {
            'data': '<aValidFieldNameNeededInHere>',
            'sortable': false,
            'searchable': false,        
        }
    ]

});
  

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