I am trying to show my JSON data in the table by using Data table. However, data table keep stuck in the processing like this and I don't know why.
https://jsfiddle.net/Lvmertbp/
JSON format
console.log(data)
Java controller code
#GetMapping(value="/projects")
public #ResponseBody List<Project> getProjects() {
return projectService.findAllProjects2();
}
I know this is the old question, but I have tried everything I can but it just don't work.
Try removing the success function, that seemed to work for me:
success:function(data){
console.log(data);
},
You should also check that your array is in the "data" object, if it's just a flat array you should pass an empty string to dataSrc. Working example: http://jsfiddle.net/5snrvL4m
Your server response is returning an array of result , not an object with data key array ,
So you data table will search in the result for a data array key , but not found , in your case you should specify the param dataSrc as empty , so it'll take it as ana array ,
Check here the doc
$(document).ready(function () {
$('#tableProject').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "/projects",
type: "GET",
contentType: "application/json",
dataSrc: '', // <------------------------ here set empty string
data: function () {
},
success:function(data){
console.log(data);
},
},
paging:true,
columns: [
{data: "projectNumber"},
{data: "name"},
{data: "status"},
{data: "customerName"},
{data: "startDate"},
]
});
});
Related
I have a problem here, first I create data tables after I select the user using select2, so the data is dynamic according to the selected user, then next to it there is an update data button, here serves to update the data from the API if there is the latest data, for the process the data update is no problem, but there is a problem in the data tables process where after the update process, the data tables don't want to be redrawn
$("#name").on("change",function(){
var cek_id = this.value;
$("#user_id").val(cek_id);
console.log(cek_id);
$('#getData').DataTable().clear().destroy();
var i = 1;
var VendorClient = $("#getData").DataTable({
order: [ 0, "asc" ],
processing: true,
serverSide: false,
ajax: "{{route('get-user-data')}}"+"/"+cek_id,
columns: [{
data: null,
render: function ( data, type, full, meta ) {
return meta.row+1;
} },
{
data: "fullname",
name: "fullname",
orderable:false
},
{
data: "date",
name: "date",
orderable:false
}
]
});
});
and here is the process when the data update is clicked
$("#get_data").on("click",function(){
var cek_id = $("#user_id").val();
var url = "{{route('get-update-data')}}"+"/"+cek_id,
$.ajax({
type: "get",
url: url,
dataType: "json",
success:function(data){
if(data.status=='success'){
$('#getData').data.reload();
}else{
$('#getData').data.reload();
}
}
});
});
I have tried various methods, including creating a globe variable for VendorClient, then after response ajax i'm adding this code VendorClient.ajax.reload(null, false); and get errorr (index):406 Uncaught (in promise) TypeError: Cannot read property 'ajax' of undefined
but it's not working, any ideas?
Try to redraw the table:
$('#getData').DataTable().clear().draw();
or
$('#getData').DataTable().columns.adjust().draw();
or
$('#getData').DataTable().columns.adjust().draw(false);
Here's the case.
I am using ajax call in datatable js to bind json data in my table.
Right now I am using directly json file for databinding.
Now I want to access the data from my db for which I have written a
method inside my controller which returns json value.
But I am not able to call this method like I was calling my json file
in ajax. Kindly suggest the solution.
Below are the code sample
var table = $('#example').DataTable({
"ajax": "/content/data/dataList.json", //here I want the url of my method.
"bDestroy": true,
"iDisplayLength": 15,
"columns": [
{
"class": 'details-control',
"orderable": false,
//"data": null,
"defaultContent": ''
},
{ "data": "name" },
],
"order": [[1, 'asc']],
"fnDrawCallback": function (oSettings) {
runAllCharts();
}
});
And my method id :
//Controller Name AppDetail
public string getData(string ddlid)
{
DataTable ddl = new DataTable();
string query = string.Empty;
if (ddlid == "O1")
{
query = "SELECT for O1";
}
else if (ddlid == "O2")
{
query = "SELECT for O2";
}
con.Open();
MySqlDataAdapter da = new MySqlDataAdapter(query, con);
da.Fill(ddl);
con.Close();
System.Web.Script.Serialization.JavaScriptSerializer jSearializer = new System.Web.Script.Serialization.JavaScriptSerializer();
return jSearializer.Serialize(ddl);
}
And here is the json data sample
{
"data": [
{
"name": "Aladdin"
}
]
}
Kindly Help.
if you are not using server side processing method get all data first using ajax method and use that data on data table. look at the code below... it might help you for getting some idea.
$.ajax({
url: 'api/AppDetail/getData',
method: 'get',
data :{ddlid:'01'}, // this is input parameter for your function
dataType: 'json',
contentType: 'text/json',
success: function(res){
var table=$('#example').dataTable({
data: res,
columns:[
{'data':'name'}
],
bDestroy : true,
iDisplayLength : 15,
});
}
});
If your controller works you can call it before DataTables and insert the data via the data (https://datatables.net/reference/option/data) source of DataTables
On the Controller if u are getting Data which u want, then u can return this Data to a partial view.
Note that the partial view is nothing a html table which u bulild upon Razor syntax or anything.
Then make ajax call to return this partial view, On success u can apply data table plugin.
<div id=MyTable></div>
$.ajax({
type: 'GET',
url: ControllerName/ActionName=partialView Which makes table.
success: function (data) {
debugger;
$('#MyTable').html(data); //Puting result of ajax call to the div which containg Id,
$('#PartilView_Table').DataTable({ // Applying DataTable Plugin table inside partialView
"bProcessing": true,
"bDeferRender": true,
"scrollX": true,
"stateSave": true,
"bAutoWidth": true,
"bSort": false,
"columnDefs": [
{
}
]
});
},
});
Hope this will help you..
I'm trying to generate a HTML data table from the result of a SQL query execution. The resulting data is in JSON format. I'm using the plugin "Datatables" to achieve this. I'm following this example
I don't get an error but the data table is empty. I'm obviously doing something wrong or missing something.
Here's the code excerpt. Could I please get some guidance on to the right path please.
function jsDataPlot(chartProps) {
// Get the array from the element:
var graphPropsStore = chartProps;
// Loop through the array with the jQuery each function:
$.each(graphPropsStore, function (k, graphPropsStoreProperty) {
// The makeCall function returns a ajaxObject so the object gets put in var promise
var dbResAjx = getResultFromSql(k);
// Now fill the success function in this ajaxObject (could also use .error() or .done() )
dbResAjx.success(function (response) {
console.log(response);
// When success, call the function and use the values out of the array above
$('#divId').DataTable(response);
});
dbResAjx.error(function (response) {
console.log(response);
});
});
}
function getResultFromSql(paramId) {
// bla bla code
return $.ajax({
url: 'runMySqlQuery.php',
type: 'post',
data: {// some POST params}
});
}
JSON Result
[{"DATE":"2015-12-15","TYPE":"AAA","NAME":"asdasd"},{"DATE":"2015-12-15","TYPE":"BBB","NAME":"dsfsdfsdfsdf"},{"DATE":"2015-12-15","TYPE":"AAA","NAME":"reterter"},{"DATE":"2015-12-15","TYPE":"CCC","NAME":"ertertertert"}]
OK, in your JSON yu have this. DATE - TYPE - NAME
[
{"DATE":"2015-12-15","TYPE":"AAA","NAME":"asdasd"},
{"DATE":"2015-12-15","TYPE":"BBB","NAME":"dsfsdfsdfsdf"},
{"DATE":"2015-12-15","TYPE":"AAA","NAME":"reterter"},
{"DATE":"2015-12-15","TYPE":"CCC","NAME":"ertertertert"}
]
then in your JS should define your columns ....
$('#divId').DataTable({
columns : [
{data: "DATE"},
{data: "TYPE"},
{data: "NAME"}
],
data: response
});
example: https://jsfiddle.net/cmedina/7kfmyw6x/4/
I'm trying to use server processing with data tables:
$("#my-table-id").DataTable( {
serverSide: true,
ajax: {
url: '/request/path/',
type: 'POST',
}
});
sends data as url encoded, which as you can see is pretty unmanageable:
draw=1&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=2&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=3&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=4&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=5&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B6%5D%5Bdata%5D=6&columns%5B6%5D%5Bname%5D=&columns%5B6%5D%5Bsearchable%5D=true&columns%5B6%5D%5Borderable%5D=true&columns%5B6%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B6%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B7%5D%5Bdata%5D=7&columns%5B7%5D%5Bname%5D=&columns%5B7%5D%5Bsearchable%5D=true&columns%5B7%5D%5Borderable%5D=true&columns%5B7%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B7%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=100&search%5Bvalue%5D=&search%5Bregex%5D=false
decoded:
draw=1&columns[0][data]=0&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[0][search][regex]=false&columns[1][data]=1&columns[1][name]=&columns[1][searchable]=true&columns[1][orderable]=true&columns[1][search][value]=&columns[1][search][regex]=false&columns[2][data]=2&columns[2][name]=&columns[2][searchable]=true&columns[2][orderable]=true&columns[2][search][value]=&columns[2][search][regex]=false&columns[3][data]=3&columns[3][name]=&columns[3][searchable]=true&columns[3][orderable]=true&columns[3][search][value]=&columns[3][search][regex]=false&columns[4][data]=4&columns[4][name]=&columns[4][searchable]=true&columns[4][orderable]=true&columns[4][search][value]=&columns[4][search][regex]=false&columns[5][data]=5&columns[5][name]=&columns[5][searchable]=true&columns[5][orderable]=true&columns[5][search][value]=&columns[5][search][regex]=false&columns[6][data]=6&columns[6][name]=&columns[6][searchable]=true&columns[6][orderable]=true&columns[6][search][value]=&columns[6][search][regex]=false&columns[7][data]=7&columns[7][name]=&columns[7][searchable]=true&columns[7][orderable]=true&columns[7][search][value]=&columns[7][search][regex]=false&order[0][column]=0&order[0][dir]=asc&start=0&length=100&search[value]=&search[regex]=fals
I want to be able to send it as JSON, which seems like a much cleaner way to receive this data in the backend.
I don't know how it is sending data at the front end, so I can't use the solution that this question is supposed to be a duplicate of
To submit data as JSON string use the code below:
$("#my-table-id").DataTable( {
serverSide: true,
ajax: {
url: '/request/path/',
type: 'POST',
data: function (d) {
return JSON.stringify(d);
}
}
});
See ajax.data for more information.
I am trying to submit some JSON to my web app and I want the JSON to be like this:
{
"thing1" :
{
"something" : "hello"
},
"list_of_things" :
[
{
"item1" : "hello"
},
{
"item2" : "hello"
}
]
}
Here I have one JSON object and a JSON array that holds JSON objects. When I create the data to submit in Javascript I do:
form = {
"thing1" : {
"something" : somethingVariable
},
"list_of_things" : listArray
}
Here 'listArray' is a Javascript Array object of Javascript hash objects. I submit this using jQuery's ajax method but instead of javascript array displaying as the JSON array desired it converts it to a series of JSON objects like this:
{ "1" : { "thing1" : "something" }, "2" : { "thing2" : "something" }...
How can I get the array to be submitted as an array rather than be converted into a series of JSON objects with the array indexes as keys?
EDIT#1: 'listArray' is a simple Javascript array that is defined like so:
var listArray = new Array();
listArray.push({ "thing1" : "something" });
listArray.push({ "thing2" : "something" });
EDIT#2: 'form' is sent to the server with the following call:
$.ajax({
type: 'POST',
url: '/url',
dataType: "json",
data: form,
success: function(data) {
/* success code here */
}
});
Have a look here. If you are truly trying to post JSON you will need to send the string, not an object literal. You could use JSON.stringify (or a more supported JSON solution) on form.
$.ajax({
url: "/url",,
dataType: "json",
type: "POST",
processData: false,
contentType: "application/json",
data: JSON.stringify(form)
});