We Keep Coding

How to edit datatable json response?

I need to edit the columns section of this code for change the content of tr and td for table generated by json response. For example, I need to insert a hyperlink on EFICAZ_TAB_RESULTADO column for use click event.
I don't know how to do this task and I need help!
$(document).ready(function(){
// Setup datatables
$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings){
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
"iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
};
};
var table = $("#mytable").dataTable({
initComplete: function() {
var api = this.api();
$('#mytable_filter input').off('.DT').on('input.DT', function(){
api.search(this.value).draw();
});
},
oLanguage: {
sProcessing: "carregando ..."
},
processing: true,
serverSide: true,
searching: false,
ajax: {
"type": "POST",
"url": "/tab/getJsonAllOcorrenciasTabForMonth"
},
pageLength: 100,
columns: [
{"data": "EFICAZ_TAB_ID"},
{"data": "ID"},
{"data": "PERIODICIDADE"},
{"data": "EFICAZ_TAB_MES_ANO"},
{"data": "EFICAZ_TAB_ITEM_ID"},
{"data": "EFICAZ_TAB_META"}, // if EFICAZ_TAB_META é diferente de EFICAZ_TAB_RESULTADO
{"data": "EFICAZ_TAB_RESULTADO"}
],
order: [
[1, 'asc']
],
rowCallback: function(row, data, iDisplayIndex) {
var info = this.fnPagingInfo();
var page = info.iPage;
var length = info.iLength;
$('td:eq(0)', row).html();
}
}); // end setup datatables
// addClass para formatar estilo bootstrap ...
$("#mytable_length select").addClass("form-control")
});

I suggest utilizing the rowCallback. This allows you to modify the rows as they are being drawn to the table. You just have to select the cell within the respective row to modify it. I suggest adding a class to the column:
Add a Column Class
columns: [
...
{
"data": "EFICAZ_TAB_RESULTADO",
"className": "hyperlinkClass"
}
...
]
Modify that cell each time a new row is drawn
rowCallback: function(row, data, iDisplayIndex) {
$(row).find(".hyperlinkClass").html('HYPERLINK TEXT');
}

You can achieve that by using columnDefs property, e.g. add a click event on EFICAZ_TAB_RESULTADO column:
columnDefs: [{
"targets": [6],//index of EFICAZ_TAB_RESULTADO
"createdCell": (td, cellData, rowData, row, col) => {
$(td).css({
'color': '#007bff',
'cursor': 'pointer'
});
$(td).attr('title', 'Click Me');
$(td).click(e => {
alert(cellData) //call the function here
})
}
}
]
Fiddle for your reference.

Print data array value in DataTables(Server Side) column, inside string

I'm using Datatables plugin in one school project. But I can not make it work server side version. In the client side version I have some crud botons to manage the data. But I can not achieve to put that buttons in the sever side version. I try to use it with mRender wich aloud me create HTML objects. But I want to put some data array value inside this string. But I can't make it. Can someone help me with this one please.
This es what I try.
<script type="text/javascript">
$(document).ready(function () {
$('#mita').DataTable({
"columns": [
{"data": "llave"},
{"mRender": function ( data, type, full ) {
return 'Download';}},// Problem Here !!!
{"data": "llave"},
{"data": "titulo"},
{"data": "titulo"},
{"data": "fecha_inicio"},
{"data": "fecha_fin"},
{"data": "fecha_fin"},
{"data": "fecha_fin"},
{"data": "fecha_fin"}
],
"processing": true,
"serverSide": true,
"order": [[ 0, "desc" ]],
"ajax": {
url: 'demo2.php',
type: 'POST'
}
});
});
</script>

This fix maybe help you , try this :
<script type="text/javascript">
$(document).ready(function () {
$('#mita').DataTable({
"columns": [
{"data": "llave",
"render": function ( data, type, full, meta ) {
return 'Download';
}
},
{"data": "llave"},
{"data": "titulo"},
{"data": "titulo"},
{"data": "fecha_inicio"},
{"data": "fecha_fin"},
{"data": "fecha_fin"},
{"data": "fecha_fin"},
{"data": "fecha_fin"}
],
"processing": true,
"serverSide": true,
"order": [[ 0, "desc" ]],
"ajax": {
url: 'demo2.php',
type: 'POST'
}
});
});

get the ID of specific row in JQuery datatable

I have JQuery table like following image
I want to alert the ProductID once I click V link text in Action column
<table id="productTable">
<thead>
<tr>
<th>ProductID</th>
<th>TitleEN</th>
<th>TypeEN</th>
<th>ModifiedDate</th>
<th>Actions</th>
</tr>
</thead>
</table>
#* Load datatable css *#
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
#section Scripts{
#* Load DataTable js here *#
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$("#productTable").DataTable({
"info": false,
"processing": true,
"serverSide": true,
"filter": false,
"orderMulti": false,
"ajax": {
"url": "/Home/LoadProductData",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "Product_ID", "name": "Product_ID", "autoWidth": true },
{ "data": "Product_Title_EN", "name": "Product_Title_EN", "autoWidth": true },
{ "data": "Product_Type_EN", "name": "Product_Type_EN", "autoWidth": true },
{ "data": "ModifiedDate", "name": "ModifiedDate", "autoWidth": true },
{
data: null,
className: "center",
defaultContent: ' V '
}
]
});
});
$('#editor_view').on('click', 'a.editor_view', function (e) {
alert($("data-Product_ID").val());
});
</script>
}
currently I alerted its like this
alert($("data-Product_ID").val());
but it cant get the ID of that, hw can I do this ?
this is the html for table row
<tr class="even" role="row">
<td class="sorting_1">02</td>
<td>Current Accounts</td>
<td>Assets</td>
<td></td>
<td class=" center">
<a class="editor_view" href="#"> V </a>
</td>

Change your script to
$("#productTable").on('click', '.editor_view', function() {
var ID = $(this).closest('tr').find('td').eq(0).text();
alert(ID);
});
Note that your dynamically generating the table rows so you need event delegation attached to an element that exists in the DOM when the view is first generated (i.e the element with id="productTable").

Below is my Data table.
table_low_stocks.dataTable({
"bLengthChange": true,
"processing": false,
// "serverSide": true,
"bPaginate": false,
"bInfo": false,
"iDisplayLength" : 5,
"bSort" : true,
"ajax": {
'type': 'POST',
'url': "<?=action('AdvertiserproductsController#postLowstockproducts')?>"
},
"columns": [
/* {"data": "sr_no"}, */
{"data": "product_name"},
{"data": "inventory"},
{"data": "update"}
] // set first column as a default sort by asc
});
This is how i am rendering the HTML (Datatable from Controller )
return Datatables::of($data)
->add_column('action','<a data-productid="{{$sr_no}}" class="label label-sm label-messages-btn update-product"> <i class="fa fa-pencil-square-o"></i> Update Stock </a>')
->make(true);
If you have seen above i have given data-productid="{{$sr_no}}" to a tag
so ultimately that is what you have to give anyhow,.
Now from the jquery part.what have done is .
$(document).on("click",".update-product", function(e){
e.preventDefault();
var getProductId = $(this).data("productid");
alert(getProductId);
});
and i got the product Id :-)
to give data attribute do like
data-productid="{{$sr_no}}"
and to get the data attribute u have to use
$(selector).data("productid");
Hope this is helpfull to you.

$('#editor_view').on('click', 'a.editor_view', function (e) {
alert($("data-Product_ID").val());
});
Here you have used "editor_view" as ID and I can view it is set as a class, so it will not work. It should be like
$('.editor_view').on('click', 'a.editor_view', function (e) {
alert($("data-Product_ID").val());
});

datatables columnDefs not working: jquery / javascript

My datatable loads perfectly except the columndefs do not work.
Anybody got a clue?
Please help. I just want to add a click event to every cell in column 1. I get no errors either.
It works in this example on the end column...https://datatables.net/examples/ajax/null_data_source.html
var table = $mytable.DataTable( {
"serverSide": true,
"ajax": {
"url": url_string,
"cache": true,
"columnDefs": [
{"targets": 1,"data": null,"defaultContent": "<button>Select Image ID</button>"} ,
]
},
});

Found a great post on stack overflow that really helped.
and changed it to suit me this is the post Edit jQuery Datatable fields
And here is what I have working for me. I was concentrating too much on the API and less on just Jquery. The trick was execute the jquery after "drawCallback":
Credit to #Jeromy French
var table = $spr_cnt_tbl.DataTable( {
"serverSide": true,
"ajax": {
"url": url_string,
"cache": true,
"columnDefs": [
{"targets": 1,"data": null,"defaultContent": "<button>Select Image ID</button>"} ,
]
},
"drawCallback": function( settings ) {
apply_label();
}
});
var apply_label=function(){
$spr_cnt_tbl.find("td:nth-child(2)").not(':has(.label)').each(function(){
if( this.innerHTML===""){
$(this).wrapInner("<button class=btn btn-success id='sel_img' type='button'>Select Image</button>");
}
else {
$(this).wrapInner('<span class="label label-success"></span>');
}
});
};
});
});

How to render a column with jQuery dataTables

I am using jQuery dataTables to fetch data from the server.
here is my code:
<script type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Device/AjaxHandler",
"bProcessing": true,
"aoColumns": [
{ "sName": "AccountCode" },
{ "sName": "User" },
{ "sName": "Signal Strength"
"render": renderSignal(data)
} ]
});
function renderSignal(val) {
return '<p>' + val + '</p>';
}
});
</script>
This doesn't work, but I have the feeling it is a syntax error.
Im not sure if render is the correct function name to use.
What I want to do, is take a value 1-3 and then display a different image for each value.
So I want to define that columns layout in my render function.