CODEWITHSUNDEEP
jquerydatatables
Umer Waheed
Umer Waheed

Reputation: 4584

No matching records found jquery Datatable with Asp.Net Core?

I am using a jquery data table to show records. Datatable is working fine if it is not the server-side rendering. I have a large number of records in the database. I have implemented the pagination but it is not working. Here is the code:

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,
                    
                },


            ]

        });

Server-side action returns 6 records but data table always shows no matching records found. This is the server response

{"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}]}

What is the issue in above code?

Upvotes: 0

Views: 1070

Answers (1)

andrewJames
andrewJames

Reputation: 21908

Here are a few notes, which should address the problems I can see in the question:

  1. You should remove dataSrc: '' from the DataTables definition. This is telling DataTables to look at the root of your JSON for the data rows to be displayed. However, your data rows are in an object called data. By default, DataTables expects to find its data in an object called data - so removing this line is equivalent to using dataSrc: 'data'.

  2. This looks like a typo: 'data': 'FirstName'. It should be: 'data': 'firstName'.

  3. This may or may not be a problem, but your final field does not declare a data source. It only contains sortable and searchable. Perhaps you provide the data value somewhere not shown in the question - otherwise, you need to provide a data value.

  4. A minor point: You should remove all those extra commas which are not needed. For example: 'data': 'FirstName',. Perhaps you are only showing a subset of the table definition - in which case these commas do need to be there. But generally they should be removed. They may not be causing a problem here - but in some places, these extra commas will cause syntax errors.

All of the above points will result in the following:

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,        
        }
    ]

});

If you still have a problem after these changes, then take a look at the browser console (usually F12 in your browser). Any error messages will be shown there.

Upvotes: 1

Related Questions