I have been trying to render my json in datatable. The json format i have been working with is as follows:
{
message: "",
data: {
count: "",
result: [
{
parameter1: "",
parameter2: "",
parameter3: "",
},
{
parameter1: "",
parameter2: "",
parameter3: "",
},
]
}
}
Datatable Code is as follow
$('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
url: "https://c22c6e75-a9b9-4762-8f5d-b25137536fa6.mock.pstmn.io/iprSearchData",
},
"columnDefs": [
{
"targets": [0],
"data": function (row, type, val, meta) {
// not hitting
console.log(row);
console.log(type);
console.log(val);
console.log(meta);
},
"render": function (data, type, row) {
console.log(data);
console.log(row);
return data;
},
},
// {targets: [0], visible: true},
// {targets: '_all', visible: false}
]
});
I read the documentation and I assume the data(JSON) format is creating problems for me in rendering or is it some other issue?
I want to render my parameters in reult array of the JSON to be displayed in a single column.
Thanks in advance.
The JSON format was the issue. Use datasrc in ajax for appropriate data from the returned ajax.
Related
How do I keep the lookup working on the DataTables.js modified render column?
In the snippet below, I tried to search the data that is in the render columns does not show anything.
$('#release-table').DataTable({
processing: true,
serverSide: true,
autoWidth: true,
ajax: "http://localhost/project/ajax/index_data.php?page=release",
order: [[ 0, 'desc' ]],
columns: [
{ data: 'no', name:'id', render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}},
{ "data": 0 },
{ "data": 1 },
{
"data": null,
"render": function(data, type, row, meta){
return '<img src="http://localhost/project/assets/dashboard/files/'+row["2"]+'" width="40" height="40">';
}, searchable: true, orderable: true
},
{
"data": null,
"render": function(data, type, row, meta){
return '<span><strong>'+row["4"]+'</strong></span> <br><strong class="text-muted">'+row["5"]+'</strong>';
}, searchable: true, orderable: true
},
{ "data": 6 },
{
"data": null,
"render": function(data, type, row, meta){
return '<i>UPC: '+row['7']+'</i> <br>ISRC: <i>'+row['8']+'</i>';
}, searchable: true, orderable: true
}
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I remember having a similar issue and could not find a better solution than to add the search data in the column render inside an html element with display:none; in addition to what you are already rendering.
For example :
<span style="display:none;">${data.property_1} ${data.property_2}</span>
There might be a better solution to this, consider it more like a workaround, but it works.
I am trying to fetch data from an API of WordPress. Here is my code:
column.data().unique().sort().each(function (d,j) {
var practiceArea = d.practice_area;
var jsonPacticeArea = JSON.stringify(practiceArea);
if (jsonPacticeArea !== undefined) {
var res = $.map(jsonPacticeArea.split("|"), $.trim);
for (var i = 0; i < res.length; i++) {
var str = res[i];
str = str.replace(/"/gi, '').trim();
if (arrayPracticeArea.indexOf(str) === -1) {
arrayPracticeArea.push(str);
}
}
}
});
the "column" is the variable that is getting data through an API, and as far as I do console.log(column. data().unique().sort()), that's returning complete data as you can see in the screenshot:
[![enter image description here][1]][1]
and I want to fetch data is marked in red rectangle and store those values in an array, but as soon as I try to add "each" function to fetch the data and store it in an array (in my case its arrayPracticeArea) its returning undefined values.
Can anyone please help me out? I am just not much experienced with Javascript API.
Here is my AJAX code:
var tableAttorney = $('#table_affliate_attorney').DataTable({
destroy: true,
searching: true,
bLengthChange: false,
scrollX: true,
scrollY: 440,
autoWidth: false,
"language": {
"emptyTable": "We are sorry but there are no Affiliate Attorneys within a 150 mile radius of your requested search"
},
ajax: {
type: 'get',
url: "/wp-admin/admin-ajax.php",
dataType: 'json',
cache: false,
data: {
'action': 'get_attorney_ajax',
'center_lat': center_lat,
'center_long': center_long,
'state': state,
'city': city,
'zip': zip
}
},
columns: [
{"data": "title"},
{"data": "city"},
{"data": "state"},
{"data": "zip"},
{"data": "distance"},
{
"data": "phone",
className: 'datatablePhone',
render: function (data) {
return '' + data + '';
}
},
{
"data": "email",
className: 'px190EM',
render: function (data) {
return '' + data + '';
}
},
{
className: 'js-practice-area',
"data": "practice_area"
},
{
"targets": -1,
"data": 'email',
render: function (data) {
return "<a class='contact-lawyer' href='#' data-toggle='modal' data-target='#exampleModal' data-whatever='#mdo' data-email='"+data+"'>Contact</a>";
}
},
],
columnDefs: [
{"width": "150px", "targets": [0]},
{"width": "130px", "targets": [5]}
],
So I am trying to fetch data from columns->data that has value practice_area.
Here is the fiddle link where I have hosted my whole JS code: https://jsfiddle.net/fareeboy/apor08jn/1/
[1]: https://i.stack.imgur.com/4EOZS.png
I'm using DataTables to fill a table and need some data from a different source. So I started off with render and made a second ajax request by the ID's of what I need the name of.
Here is my code, that will explain it more clearly.
$('#table').DataTable({
"ajax": "/api/url",
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
},
"order": [[0, "asc"]],
"pagingType": "simple",
"responsive": {details: false},
"bAutoWidth": true,
"lengthChange": true,
"scrollX": false,
"aoColumnDefs": [{}],
"columns": [
{
"data": "typ_name"
},
{
"data": "mietpreise",
render: function (data, type, row, meta) {
let tmp = [],
currentCell = $("#table").DataTable().cells({
"row": meta.row,
"column": meta.col
}).nodes(0);
data.forEach(function (item) {
$.get("/api/url2/" + item.preis_kundengruppe_id, function (row, status) {
tmp.push(row.data.kundengruppe_name);
});
});
console.log(tmp);
return $(currentCell).text(tmp);
}
},
I'm expecting to have the value of kundengruppe_name in the array like ['case1', 'case2'] but in the console I get this
[]
0: "Endkunden"
1: "Händler"
length: 2
__proto__: Array(0)
So what I want is to find under 0 and 1 and not in the array as expected. What am I doing wrong? What's going on with the array?
I am using Datatable plug-in to print values from database.
I get results and it prints in table. Now I am having trouble with sending values to the other file. Values that I need to send are userID, all titles of column except for last title, and two other variables which contains date.
When I click on '', beside data that contains userId, I need to send "User, Work time, Additions, Business, Break" as well as two variables printed below.
Other two variables are:
var date1 = "2017-01-01";
var date2 = "2017-02-28";
$('#myData').DataTable( {
data: dataSet,
fixedHeader: true,
responsive: true,
"columns": [
{ title: "User", data: "ime"},
{ title: "Work time", data: "Rad" },
{ title: "Additions", data: "Privatno" },
{ title: "Business", data: "Poslovno" },
{ title: "Break", data: "Pauza" },
{
"title": '<i class="icon-file-plus"></i>',
"data": "userID",
"render": function (data) {
return '' + '<i class="icon-file-plus"></i>' + '';
}, "width": "1%",
}
]
,"columnDefs": [ { "defaultContent": "-", "targets": "_all" },{ className: "dt-body-center", "targets": [ 5 ] } ]
});
Any help or advice is appreciated, I am stuck here.
I need to pass the Value of the first column into the second column render function() to make a hyperlink where the value of the first column is parameter. of the hyperlink.
"Columns": [
{
"data": "Code", "autoWidth": true,
},
{ "data" : "StyleReference","autoWidth": true,
"render": function (data, oObj) {
return '' + data + '';
}
}
]
Any Help Please!!
You're nearly there. The render function can take up to 4 variables. Your row represents the whole object, this should work:
"columns": [{
"data": "Code",
"autoWidth": true
}, {
"data": "StyleReference",
"autoWidth": true,
"render": function(data, type, row, meta) {
return '' + data + '';
}
}]
Hope that helps.