How can I force google chrome or other browser to load datatable on first load with a POST request?

eatmars

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

I've been stucked for a long time like 2 weeks now haha and i dont know what to do anymore. Im trying to display the datatable from the serverside so it will not load all the data but only 10 records. The Api works on postman but not in Google Chrome its just giving me a GET request.

`
[ApiController]
[Route("api/[controller]")]
public class CustomerController : ControllerBase
{
private readonly ApplicationDbContext context;
private readonly ILogger<CustomerController> logger;

    public CustomerController(ApplicationDbContext context, ILogger<CustomerController> logger)
    {
        this.context = context;
        this.logger = logger;
    }

    [IgnoreAntiforgeryToken]
    [HttpPost("test")]
    public IActionResult GetCustomers()
    {

//This is only a test or trial request to check the request type
return Ok(new { success = true, message = "Request received." });
}

}

`

`

var documentColumns = {
"processing": true,
"serverSide": true,
"deferLoading": 10, // Load 10 records initially
"paging": true, // Enable paging
"pagingType": "full_numbers",
filter: true,
ajax: {
url: '/api/customer/test',
type: 'POST',
contentType: 'application/x-www-form-urlencoded',
dataType: 'json',
"data": function (d) {
return $.extend({}, d, JSON.stringify({
"start": d.start,
"length": d.length
}));
}
},
col: [
{ data: 'id' },
{data: 'originalAuthor', width: '5%'},
{ data: 'trackingCode', width: '5%' },
{ data: 'title', width: '20%' },
{data: 'requestType', width: '10%'},
{data: 'currentStatus', width: '10%'},
{data:'createdDateString', width: '10%'},
{data:'createdTimestamp', visible: false},
{
data: 'id',
"render": function (data, type, row) {
if((row.statusId === documentStatus.CANCELLED) || (row.statusId === documentStatus.FORWARDED && row.createdBy === row.modifiedBy) )
{
return <div class="d-flex justify-content-center"> <a class="btn btn-info btn-hover text-end text-white d-block d-flex justify-content-center align-items-center dropdown-toggle pl-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 30px; height: 30px"> </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" > <a class="dropdown-item" href="#" onclick='loadDocumentFromDatabase("/user/document/getdocument/${data}")' style = "font-size: 12px !important;" id = "btnUpdateDocumentModal" > <i class="bi bi-pencil-square" ></i> Update</a> <a class="dropdown-item" href="#" style = "font-size: 12px !important;" onclick='loadPrintDocument("/user/document/getdocument/${data}")'> <i class="bi bi-eye"></i> Details </a> </div> </div> ;

            }else if(row.statusId === documentStatus.RECEIVED && row.createdBy !== row.modifiedBy){

                return `
                    <div class="d-flex justify-content-center">
                        <a class="btn btn-info btn-hover text-end text-white d-block d-flex justify-content-center align-items-center dropdown-toggle pl-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 30px; height: 30px">                                                
                        </a>
                         <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"   >    
                              <a class="dropdown-item" href="#" onclick='loadDocumentId("/user/document/getdocument/${data}")' style = "font-size: 12px !important;"   id = "btnUpdateDocumentModal" >
                            <i class="bi bi-pencil-square" ></i>
                            Complete</a>                            
                            <a class="dropdown-item" href="#" style = "font-size: 12px !important;" onclick='loadPrintDocument("/user/document/getdocument/${data}")'>
                               <i class="bi bi-eye"></i>
                                Details
                            </a>                          
                        </div>                             
                    </div>
                `;
            }else{
                return `
                    <div class="d-flex justify-content-center">
                        <a class="btn btn-info btn-hover text-end text-white d-block d-flex justify-content-center align-items-center dropdown-toggle pl-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 30px; height: 30px">                                                
                        </a>
                         <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"   >    

                            <a class="dropdown-item" href="#" style = "font-size: 12px !important;" onclick='loadPrintDocument("/user/document/getdocument/${data}")'>
                               <i class="bi bi-eye"></i>
                                Details
                            </a>                          
                        </div>                             
                    </div>
                `;
            }


        }, width: "5%"
    }
],
colDefs: [
    {
        targets: [0], // index of the column you want to hide
        visible: false, // hide the column
        searchable: true // allow searching on this column
    }
    ],
'select': {
    'style': 'multi'
},

'order': [[0, 'desc']]

}

function loadDataTable(ajaxColumns) {
dataTable = $('#dataTable').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"language": idioma,
pageLength : 10,
// "lengthMenu": [[5, 10, 20, -1], [5, 10, 50, "Display All"]],
// lengthMenu: [],
dom: 'Bfrt<"col-md-6 inline"i> <"col-md-6 inline"p>',
ajax: ajaxColumns.ajax.url,
columns: ajaxColumns.col,
columnDefs: ajaxColumns.colDefs,
order: ajaxColumns.order,
select: ajaxColumns.select,
buttons: {
dom: {
container: {
tag: 'div',
className: 'flexcontent'
},
buttonLiner: {
tag: null
}
},
buttons: [

            {
                extend: 'excelHtml5',
                text: '<i class="fa fa-file-excel-o"></i> Excel',
                title: tableTitle.textContent,
                className: 'btn btn-app export excel btn-success',
                exportOptions: {
                    columns: ':not(.not-export-column)'
                }
            },
            {
                extend: 'csvHtml5',
                text: '<i class="fa fa-file-text-o"></i> CSV',
                title: tableTitle.textContent,
                className: 'btn btn-app export csv btn-info',
                exportOptions: {
                    columns: ':not(.not-export-column)'
                }
            },
            {
                extend: 'print',
                text: '<i class="fa fa-print"></i> Print',
                title: tableTitle.textContent,
                className: 'btn btn-app export imprimir btn-dark',
                exportOptions: {
                    columns: ':not(.not-export-column)'
                }
            },
            {
                extend: 'pageLength',
                titleAttr: 'Registros a mostrar',
                className: 'selectTable'
            }
        ]
    },
    "createdRow": function(row, data, index) {
        $(row).find('.paginate_button').css('font-size', '12px'); // Adjust font size
    }
});


return dataTable;

}

`

allan

You've got it in one part:

ajax: {
  url: '/api/customer/test',
  type: 'POST',

But not the other:

ajax: ajaxColumns.ajax.url,

Use the ajax.type option (ajax as an object) to make it do a Post request.

Allan

eatmars

Thank you sir. ITs working now