Develop Reference

JS Datatable not displaying AJAX response

Datatable is not displaying the response of an AJAX call to flask backend.
The data is retrieved as I can see it in the console.log of the success field of the AJAX call, however its not populating in the table.
Here is the JSON:
{'events':
[
{
'TIME': 'Evening',
'DESCRIPTION': 'test1'
},
{
'TIME': 'Morning',
'DESCRIPTION': 'test2'
}
]
}
This is the JS part:
function load_table() {
var payload = {'from_date': $('#from_date').val(), 'to_date': $('#to_date').val()}
$('#table').DataTable({
pageLength: 50,
paging: true,
ajax: {
url: "data/get-events/" + JSON.stringify(payload),
dataType: "json",
type: 'GET',
error: function(e){
alert(e);
},
success: function(e){
console.log(e);
},
dataSrc: 'events'
},
columns: [
{ title: 'Time', data: 'TIME'},
{ title: 'Event', data: 'DESCRIPTION'}
],
bDestroy: true,
});
}
I tried the tens of answers to my similar question but none of them worked.

How to show jquery DataTable column as Custom Javascript action link

I'm using the below code to generate the table, but I need to show code as link where I should able to run custom code to navigate to another record
$('#customerdt').DataTable({
"bInfo": false,
data: accountData,
columns: [
{ data: 'code' },
{ data: 'customerid' },
{ data: 'name' },
{ data: 'telephone' },
{ data: 'emailaddress' },
{ data: 'joiningdate' }
],
"bDestroy": true
});

Use the columns.render option
const table = $('#customerdt').DataTable({
"bInfo": false,
data: accountData,
columns: [
{
data: 'code',
render: (data, type, row) => `${data}`
}
{ data: 'customerid' },
{ data: 'name' },
{ data: 'telephone' },
{ data: 'emailaddress' },
{ data: 'joiningdate' }
],
"bDestroy": true
});
table.on('click', '.my-class', function() {
const emailAddress = this.getAttribute('data-email');
}

DataTables column data convert properly

this is what i look at
and this is what i received from server
function requestData() {
$.ajax({
url: "<c:url value='/abs/guide/guideSampleChartData1Ajax.do'/>",
type: "GET",
dataType: "json",
success: function(data) {
for(var i in data) {
chart.addSeries({
name: data[i].name,
data: data[i].data
});
}
console.log(data);
$("#table").dataTable({
"data": data,
"columns": [
{ "data": "name" },
{ "data": "categData" },
{ "data": "data"}
]
});
}
});
}
and this is my code, i want to my datatables looking accordingly
so, what part of code, i change??

kendo ui grid sortable and crud is not working

I have followed this tutorial and brought up the sorting to work but now the crud operation is not working.
If i remove the grid sortable code then the crud is working, but no sort.
I have no idea where i am making mistake to make both sort and crud to work
THis is the code i have
$(document).ready(function () {
function dataSource_change(e) {
var data = this.data();
console.log(data.length); // displays "77"
}
var dataSource = new kendo.data.DataSource({
//pageSize: 20,
transport:{
read:{
url: function() {
return "/makes"},
dataType: "json",
cache: false
},
update: {
url: function (make) {
console.log(make)
return "/makes/"+ make.models[0].id
},
type: "PUT",
dataType: "json",
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token',jQuery('meta[name="csrf-token"]').attr("content")); }
},
destroy: {
url: function (make) {
return "/makes/"+ make.models[0].id
},
type: "DELETE",
dataType: "json"
},
create: {
url: "/makes",
type: "POST",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
console.log(options)
return{"make": options.models[0]};
}
else{
return {"make":options};
}
}
},
batch: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { validation: { required: true } },
}
}
}
});
dataSource.bind("change", dataSource_change);
dataSource.fetch();
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: false,
height: 550,
toolbar: [{name: "create", text: "Add New Make"}],
columns: [
{ field:"name",title:"Makes" },
{ command: ["edit", "destroy"], title: "Action", width: "250px" }],
editable: "inline"
}).data("kendoGrid");
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: $.noop,
cursor: "move",
placeholder: function(element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},
container: "#grid tbody",
change: function(e) {
console.log(grid)
var skip = grid.dataSource.skip(),
oldIndex = e.oldIndex + skip,
newIndex = e.newIndex + skip,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
var updated_order = []
$('tbody tr').each(function(i){
updated_order.push({ name: $(this).children('td:first').text(), position: i+1 });
});
controller_name = $('#controller_name').val();
$.ajax({
type: "PUT",
url: '/sort',
data: { order: updated_order, controller_name: controller_name }
});
grid.dataSource.remove(dataItem);
grid.dataSource.insert(e.newIndex, dataItem);
}
});
});

Kendo ui grid do not remember send data

I make a grid with remote data
$("#orderGrid").kendoGrid({
scrollable: false,
columns: [
{ field: "order_id", title: "ID", width:"30px",template:"<a href='<%=request.getContextPath()%>/order/edit/#=order_id#'>#=order_id#</a>" },
{ field: "order_date", title: "Дата",width:"65px"},
{ field: "order_customer", title: "Заказчик"},
{ field: "order_transport", title: "Перевозчик"}
],
dataSource: {
transport: {
read: {
url: "<c:url value="/order/json"/>",
dataType: "json",
data: someData
},
},
type: "odata",
schema: {
data: function (data) {
return data["data"];
},
total: function (data) {
return data["count"];
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: true,
sortable: true,
filterable: true,
});
And after I wanna make filter and update data
var grid = $("#orderGrid").data("kendoGrid");
grid.dataSource.read(filterData);
But after! when i paging grid it send old data (someData) to server and error occured....and i need filterData....
grid.refresh();
Do not help......

Answer
transport: {
read: {
url: "<c:url value="/order/json"/>",
dataType: "json",
data: function(){
return filterData;
}
},
},