DataTable: non-standard server-side

HTML

<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment-with-locales.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DataTables Example</title>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  
  <!-- DataTables CSS -->
  <link rel="stylesheet" href="https://cdn.datatables.net/2.1.5/css/dataTables.dataTables.css" />
  
  <!-- DataTables JS -->
  <script src="https://cdn.datatables.net/2.1.5/js/dataTables.js"></script>
  
  <!-- DataTables Buttons CSS -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.4/css/buttons.dataTables.min.css">
  
  <!-- DataTables Buttons JS -->
  <script src="https://cdn.datatables.net/buttons/3.0.0/js/dataTables.buttons.min.js"></script>
  
  <!-- Buttons JS (for Excel and PDF) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.2/jszip.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.3.4/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.3.4/js/buttons.print.min.js"></script>

  <!-- FontAwesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Language</th>
          </tr>
        </thead>

        
      </table>
      
    </div>
  </body>
</html>

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

JavaScript

var table = $("#example").DataTable({
    "bLengthChange": true,
    "bFilter": true,
    "scrollX": true,
    "searching": false,
    "dom": '<"row"<"col-sm-6"<"pull-left"f>l><"col-sm-6 container-right text-right"B>><"row"<"col-sm-12"t>><"row"<"col-sm-5"i><"col-sm-7"p>>',
    "lengthMenu": [
        [10, 100, 1000, 5000],
        [10, 100, 1000, 5000]
    ],
    "pageLength": 10,
    ajax: {
        url: "https://microsoftedge.github.io/Demos/json-dummy-data/64KB.json",

        data: {
            customParam1: 'value1', // Example additional parameter
        },
        dataSrc: "", // Use an empty string to tell DataTables to use the root array of objects

    },
    columns: [{
            data: "name"
        }, // Maps 'name' field in JSON to first column
        {
            data: "language"
        }, // Maps 'language' field in JSON to second column

    ],
    "buttons": [

        {
            extend: 'collection',
            text: '<i class="fa fa-download m-r-xs"></i>Down Load',
            titleAttr: '',
            className: "btn-sm btn-default dropdown-menu-left",
            buttons: [{
                    extend: 'excelHtml5',
                    text: 'Excel',
                    exportOptions: {
                        columns: ':visible'
                    },
                    title: '',
                    action: function(e, dt, node, config) {
                        var self = this; //we need this as param for action.call()
                        var currentPageLen = dt.page.len();
                        var currentPage = dt.page.info().page;

                        function cb() {
                            console.log("Callback function executed!"); // why does this line is not triggered?

                            dt.page.len(currentPageLen).draw(); //set page length
                            dt.page(currentPage).draw('page'); //set current page
                        }

                        dt.one('draw',...