ASP.NET MVC Paging Does Not Appear

arosner

Hello,

**Paging does not appear in the DataTables control. I have 12 records in the database. I query for <page size> records for each callback. When I set the page size to 10, I expect to see 2 pages (recordsTottal=12). I only see 1. I also expect that when the user selects another page, there is a callback to the server for more data.
**

Javascript is:

    $(document).ready(function () {
        bindDatatable();
    });

    function bindDatatable() {
        datatable = $('#tableData')
            .DataTable({
                "dom": "lrtip", 
                "processing": true, 
                "serverSide": true, 
                "filter": true, 
                "pageLength": 10,
                "ajax": {
                    "url": "/DatabaseTables/LoadData",
                    "data": {
                        "rowCount": @Model.RowCount,
                        "databaseTableColumns": "@Model.ToJsonDatabaseTableColumns",
                        "databaseTableRow": "@Model.ToJsonDatabaseTableRow"
                    },
                    "type": "POST",
                    "datatype": "json"
                },
                "language": {
                    "emptyTable": "No record found.",
                    "processing":
                        '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="color:#2a2b2b;"></i><span class="sr-only">Loading...</span> '
                },
                initComplete: function () {
                    this.api()
                        .columns()
                        .every(function () {
                            let column = this;
                            let title = column.footer().textContent;

                            // Create input element
                            let input = document.createElement('input');
                            input.placeholder = title;
                            column.footer().replaceChildren(input);

                            // Event listener for user input
                            input.addEventListener('change', () => {
                                if (column.search() !== this.value) {
                                    column.search(input.value).draw();
                                }
                            });
                        });
                },
                "columns": [
                    @foreach (var item in Model.DatabaseTableColumns)
                    {
                        <text>
                        {
                            "data": "@Html.DisplayFor(modelItem => item.COLUMN_NAME)",
                            "autoWidth": true,
                            "searchable": true,
                        },
                        </text>
                    }
                ]
            });
    }

Payload is:

draw: 1
columns[0][data]: testdecimal
columns[0][name]:
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]:
columns[0][search][regex]: false
columns[1][data]: testfloat
columns[1][name]:
columns[1][searchable]: true
columns[1][orderable]: true
columns[1][search][value]:
columns[1][search][regex]: false
columns[2][data]: testint
columns[2][name]:
columns[2][searchable]: true
columns[2][orderable]: true
columns[2][search][value]:
columns[2][search][regex]: false
columns[3][data]: testmoney
columns[3][name]:
columns[3][searchable]: true
columns[3][orderable]: true
columns[3][search][value]:
columns[3][search][regex]: false
columns[4][data]: testsmallint
columns[4][name]:
columns[4][searchable]: true
columns[4][orderable]: true
columns[4][search][value]:
columns[4][search][regex]: false
columns[5][data]: testtinyint
columns[5][name]:
columns[5][searchable]: true
columns[5][orderable]: true
columns[5][search][value]:
columns[5][search][regex]: false
columns[6][data]: testString
columns[6][name]:
columns[6][searchable]: true
columns[6][orderable]: true
columns[6][search][value]:
columns[6][search][regex]: false
columns[7][data]: testBit
columns[7][name]:
columns[7][searchable]: true
columns[7][orderable]: true
columns[7][search][value]:
columns[7][search][regex]: false
columns[8][data]: testDateTime
columns[8][name]:
columns[8][searchable]: true
columns[8][orderable]: true
columns[8][search][value]:
columns[8][search][regex]: false
columns[9][data]: testVarchar
columns[9][name]:
columns[9][searchable]: true
columns[9][orderable]: true
columns[9][search][value]:
columns[9][search][regex]: false
columns[10][data]: testDate
columns[10][name]:
columns[10][searchable]: true
columns[10][orderable]: true
columns[10][search][value]:
columns[10][search][regex]: false
columns[11][data]: testTime
columns[11][name]:
columns[11][searchable]: true
columns[11][orderable]: true
columns[11][search][value]:
columns[11][search][regex]: false
order[0][column]: 0
order[0][dir]: asc
start: 0
length: 10
search[value]:
search[regex]: false
rowCount: 12

Response is:

{
"draw": "1",
"recordsFiltered": 10,
"recordsTotal": 12,
"data": [
{
"testdecimal": 6.567,
"testfloat": 7.24,
"testint": 58,
"testmoney": 1300.67,
"testsmallint": 6,
"testtinyint": 8,
"testString": "ts2 ",
"testBit": false,
"testDateTime": "01/01/2024 12:00:00",
"testVarchar": "v2",
"testDate": "03/01/2023",
"testTime": "11:23:34"
},
{
"testdecimal": 16.234,
"testfloat": 6.78,
"testint": 55,
"testmoney": 3456105.42,
"testsmallint": 5,
"testtinyint": 7,
"testString": "ts1 ",
"testBit": true,
"testDateTime": "01/01/2023 11:34:22",
"testVarchar": "v1",
"testDate": "02/01/2023",
"testTime": "11:23:34"
},
{
"testdecimal": 17.2,
"testfloat": 978.23,
"testint": 57,
"testmoney": 33.56,
"testsmallint": 17,
"testtinyint": 22,
"testString": "abc ",
"testBit": true,
"testDateTime": "04/01/2023 11:57:22",
"testVarchar": "varc1",
"testDate": "01/15/2023",
"testTime": "14:23:56"
},
{
"testdecimal": 17.3,
"testfloat": 978.24,
"testint": 58,
"testmoney": 33.57,
"testsmallint": 18,
"testtinyint": 23,
"testString": "abcd ",
"testBit": false,
"testDateTime": "04/02/2023 11:57:22",
"testVarchar": "varc2",
"testDate": "01/16/2023",
"testTime": "14:23:57"
},
{
"testdecimal": 17.4,
"testfloat": 978.25,
"testint": 59,
"testmoney": 33.58,
"testsmallint": 19,
"testtinyint": 24,
"testString": "abce ",
"testBit": true,
"testDateTime": "04/03/2023 11:57:22",
"testVarchar": "varc3",
"testDate": "01/17/2023",
"testTime": "14:23:58"
},
{
"testdecimal": 17.5,
"testfloat": 978.26,
"testint": 60,
"testmoney": 133.58,
"testsmallint": 20,
"testtinyint": 25,
"testString": "abcef ",
"testBit": false,
"testDateTime": "04/09/2023 11:57:22",
"testVarchar": "varc54",
"testDate": "01/23/2023",
"testTime": "15:23:58"
},
{
"testdecimal": 17.9,
"testfloat": 978.268,
"testint": 62,
"testmoney": 143.58,
"testsmallint": 21,
"testtinyint": 26,
"testString": "abcef1 ",
"testBit": true,
"testDateTime": "04/10/2023 11:57:22",
"testVarchar": "varc55",
"testDate": "02/23/2023",
"testTime": "05:23:58"
},
{
"testdecimal": 18.9,
"testfloat": 988.288,
"testint": 63,
"testmoney": 144.58,
"testsmallint": 22,
"testtinyint": 27,
"testString": "abcef2 ",
"testBit": false,
"testDateTime": "04/11/2023 07:57:22",
"testVarchar": "varc56",
"testDate": "02/25/2023",
"testTime": "08:24:58"
},
{
"testdecimal": 19.9,
"testfloat": 998.288,
"testint": 64,
"testmoney": 154.58,
"testsmallint": 23,
"testtinyint": 28,
"testString": "abcef3 ",
"testBit": true,
"testDateTime": "04/13/2023 07:58:22",
"testVarchar": "varc57",
"testDate": "02/26/2023",
"testTime": "08:25:58"
},
{
"testdecimal": 20.6,
"testfloat": 998.298,
"testint": 65,
"testmoney": 155.58,
"testsmallint": 24,
"testtinyint": 29,
"testString": "abcef4 ",
"testBit": false,
"testDateTime": "04/14/2023 07:59:22",
"testVarchar": "varc58",
"testDate": "02/27/2023",
"testTime": "08:27:58"
}
]
}

Thank you,

Al

allan

"recordsFiltered": 10,

Is wrong. Unless you have a filter applied to the table, it should be exactly the same as recordsTotal.

See the description of the parameter in the manual.

Allan

arosner

Thank you,