Paging datatables with MVC

etha0k

I'm using datatable in a new MVC ASP.NET core project.
I want to using server side option to load record in my table.
This is my html code:

<table id="datatableClienti" class="table table-striped dt-responsive nowrap w-100">
  <thead>
                        <tr>
                            <th> @Html.DisplayNameFor(model => model.RagioneSociale)</th>
                            <th> @Html.DisplayNameFor(model => model.Contatto)</th>
                            <th> @Html.DisplayNameFor(model => model.Citta)</th>
                            <th> @Html.DisplayNameFor(model => model.Provincia)</th>
                            <th> @Html.DisplayNameFor(model => model.Email)</th>                            
                        </tr>
                    </thead>

                  <tbody>
                          
                  </tbody>
</table>

and this script:

@section scripts {
    <script src="~/js/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="~/js/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
    <script src="~/js/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="~/js/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
    <script src="~/js/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="~/js/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
    <script src="~/js/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="~/js/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="~/js/pdfmake/build/pdfmake.min.js"></script>
    <script src="~/js/pdfmake/build/vfs_fonts.js"></script>
    <script src="~/js/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#datatableClienti').DataTable(
            {
                serverSide: "true",
                ajax: {
                        url: "/Cliente/Getlist",
                        type: "POST",
                        datatype: "json"
                        },
                        columns: [
                                    {data:"ragioneSociale","name":"RagioneSociale"},
                                    { data: "contatto", "name": "Contatto" },
                                    { data: "citta", "name": "Citta" },
                                    { data: "provincia", "name": "Provincia" },
                                    { data: "email", "name": "Email" }
                                ],                        
                        order:[0,"asc"],
                lengthChange: true,                    
                    dom: '<"container-fluid"<"row"<"col"B><"col"l><"col"f>>>rtip',
                    dom: '<"dt-buttons"Bf><"clear">lirtip',
                    buttons: [{
                        text: 'Nuovo',
                        className: 'text-info'
                            },
                        'searchPanes','copy', 'csv', 'excel', 'pdf', 'print'],
                    language:
                        {
                            url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/it-IT.json"
                        },
                    keys: true

                   
            });            
        });
        
    </script>

This is code in MVC controller:

[HttpPost]
        public ActionResult GetList()
        {           

            List<Cliente> emplist = new List<Cliente>();

            emplist = _context.Clienti.ToList<Cliente>();            

            return Json(new {data= emplist});
        }

However, the result is a formatted table that show ALL records without paging.
What's the problem?

allan

Remove serverSide. Your server-side script there does not perform server-side processing as described here, it just send all of the data back to the client-side for client-side processing. That's fine, but you need DataTables to operate in client-side mode.

Allan