MVC core datatablejs ajax server side

Dear Lauris,

Thank you for your reply and for your support.

Actually, I already added both scripts to the main layout, and the droplist not working.

I guess the problem is with the responsive option in the datatable, I tried to set this property to false and it was working, but we need the datatable to be responsive on the server side.

This is my jquery datatable (for your reference)

////////////////////////////////////////////////////////////////////////
var table;
$(document).ready(function () {
 table = $("#tblCars").DataTable({
 processing: true, // for show progress bar
 serverSide: true, // for process server side
 pageLength: 10,
 responsive: true,
 order: [],
 buttons: [
 'print',
 'excelHtml5'
 ],
 ajax: {
 url: '/Cars/LoadDataCarsForPricingList',
 method: "POST"
 },
 columns: [
 {
 data: 'createdDate', title: "Entry Date",
 "render": function (value) {
 if (value === null) return "";
 return moment(value).format('DD/MM/YYYY');
 }
 },
 { data: 'carMakerName', title: "Maker" },
 { data: 'carModelName', title: "Model" },
 { data: 'carGradeName', title: "Grade" },
 { data: 'carGradeFuel', title: "Fuel" },
 { data: 'plateNo', title: "plate" },
 { data: 'totalCylinder', title: "Cylinder" },
 { data: 'totalkilo', title: "total kilo" },
 { data: 'exteriorColor', title: "exterior Color" },
 { data: 'insideColor', title: "inside Color" },
 { data: 'fabricType', title: "fabric" },
 { data: 'sellingType', title: "Type" },
 { data: 'showRoomPrice', title: "Price" },
 { data: 'showRoomFinalPrice', title: "FinalPrice" },
 { data: 'carOptions', title: "Options", width: 150 },
 { data: 'carRemarks', title: "Remarks", width: 150 },
 { data: 'companyName', title: "company Name" },
 { data: 'additionsPrice', title: "additions Price" },
 { data: 'createdBy', title: "created By" },
 {
 data: "pK_CarDetailsId"
 },
 ],
 columnDefs: [

 {
 targets: -1,
 data: null,
 orderable: false,
 className: 'text-end',
 render: function (data, type, row) {
 return `
 
 Actions
 
 
 
 
 
 

 
 

 
 Edit
 
 
 

 
 

 
 Delete
 
 
 
 
 
 `;
 },
 }
 ],
 // Set rows IDs
 rowId: function (a) {
 return a.pK_CarDetailsId;
 },
 "createdRow": function (row, data, dataIndex) {
 const carSold = data['isSold'];
 if (carSold) {
 $(row).css("background-color", '#f5837d');
 }
 },
 "language": {
 search: 'search',
 searchPlaceholder: '',
 "emptyTable": "No Data To Display"
 }
 })
});

Hi,

Do you have any errors in your browser console?

Make sure that you included "datatables" vendor and your js file on your page view.

KTTheme.addVendor("datatables");

KTTheme.addJavascriptFile("js/widgets.bundle.js");