I am trying to create an edit button for all rows, therefore I need the ID of the row (which is in the 0th column). How can I get that?
Pseudocode:
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<a type='button' name='edit' class='editbutton' href='vykresy/edit/'.[DATA of first colum and current row here]>Edit</a>"
} ],
Any idea would be appreciated.
I would suggest using a custom render function, then you can use the 'full' argument to access any property of the row.
"columnDefs": [ {
"targets": -1,
"data": null,
"render": function (data, type, full, meta){
return "<a type='button' name='edit' class='editbutton' href='vykresy/edit/" + full.ID + "'>Edit</a>";
}
} ],
Related
So I have made a Crud web application that also builds a PDF document, all this is done by a GS function when a submit button is clicked, it also appends the data into a Google Sheet. I also have a Datatable that loads data from the same spreadsheet, but I cannot find a way to refresh or reload the table after the GS function is done
<script>
google.script.run.withSuccessHandler(showData).gettableData();
function showData(dataArray){
$(document).ready(function(){
$('#data-table').DataTable({
data: dataArray,
columns: [
{"title":"IDs"},
{"title":"Names",
render: function (data, type, row) {
return data + ' ' + row[2] + '';
},},
{"title":"Name2"},
{"title":"Address"},
{"title":"Date"},
{"title":"Version"},
{"title":"Total"},
{"title":"",
render: function (data, type, row, meta) {
if (type === "display") {
data = '<a class="btn btn-small" href="' + data + '" target="_blank">View</a>';
}
return data;
}},
{"title":"",
render: function(data, type, row, meta) {
return '<button data-target="modal1" class="btn btn-small modal-trigger" id="' + row[0] + '" onclick="editPastForms((this.id))">Edit</button>';}
}
],
columnDefs: [
{ "visible": false, "targets": [0,2] },
{
targets: [1, 2, 3, 5, 6, 7, 8],
orderable: false
},
{ className: "center-align", targets: [7,8] }
],
lengthMenu: [
[25],
[25],
],
order: [[4, 'desc']],
"bLengthChange": false,
});
});
}
</script>
I have tried adding a function to reloaded the page using a .withSuccessHandler() however I get an error saying the iFrame permissions won't allow this
&
I have tried simply rerunning the google.script.run.withSuccessHandler(showData).gettableData(); function, but I get an error saying that I cannot reinitialise the datatable
All examples I have found online only refer to Ajax (I have no idea what that is lol) and nothing really for Apps Script. If anyone has any solutions or links to something that can help me out I would be so appreciative
My current problem is how could I properly perform pagination in DataTable to generate lengthMenu (Showing 1 to 10 of 57 entries) dynamically and only load data when next page is clicked.
So far my understanding on server-side processing is like this:My web service is returning data from database using MySQL with limit and offset in JSON format. Assuming that the JSON data is correct how could I properly paginate my DataTable?
Below is my code:
var Table1 = $('#table').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": SomeWorkingURLS,
"dataType": "jsonp"
},
"columns": [
{ "data": "Column1" },
{ "data": "Column2" },
{ "data": "Column3" },
{ "data": "Column4" }
],
"columnDefs": [
{
"render": function ( data, type, row ) {
return data + "<hr>" + row.data1;
},
"targets": 0
},
{
"render": function ( data, type, row ) {
return data + "<br>" + row.data2 ;
},
"targets": 1
},
{
"render": function ( data, type, row ) {
return data ;
},
"targets": 2
},
{
"render": function ( data, type, row ) {
if (row.status == '2'){
return '<button class="fas fa-edit btn-success" data-toggle="tooltip" title="Edit" value="' + data + '">Verify</button>'
+ ' <button class="fas fa-undo btn-danger" data-toggle="tooltip" title="Resend" value="' + data + '"> Authenticate</button>';
}
else{
return '<button class="fas fa-edit btn-success" data-toggle="tooltip" title="Edit" value="' + data + '">Authenticate</button>';
}
},
"targets": 3
},
{ "width": "14%", "targets": 0 },
{ "width": "60%", "targets": 1 },
{ "width": "10%", "targets": 2 },
{ "width": "16%", "targets": 3 , "class":"dt-center"},
],
"destroy": true,
"searching" :false
});
Table1.draw();
$("select[name*='table_outbound_shipment_list']").removeClass('form-control');
$("#table_outbound_shipment_list_length").remove();
$('.form-control.form-control-sm').removeClass('form-control');
My web service would always return 10 row of data (or am I doing wrong here?)
My reference:https://datatables.net/examples/data_sources/server_side
There are libraries and helper classes for server-side processing that help with preparing server-side response.
For example, DataTables distribution includes ssp.class.php helper calss and sample script to aid in generating response if you're using PHP.
Otherwise, you can inspect sent parameters and paginate your results based on start and length request parameters.
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.
I am using JQuery Datatable plugin found here. I have the following piece of code. I have a line in my code with the following comment //I need to access the variable row.RECIBO here. In the className parameter below, I am trying to access a variable name so that I can distinguish my class using an ID. How can I accomplish that goal of mine?
var table = $('#tableCLIX1').DataTable({
"order": [[0, "desc" ]],
"ajax": {"url": "reciboBackend.php", "type": "POST", "dataSrc": "db" },
"columnDefs": [{
"render": function(data, type, row){ return row.RECIBO},
"targets": 8,
"className": "tranState" + VARIABLE //I need to access the variable row.RECIBO here
}],
"columns": [
{"data": "RECIBO", className: "recibo"},
{"data": "NOMCLI"},
{"data": "CLIENTE"},
{"data": "FECHA"},
{"data": "NUMPOL"},
{"data": "FACTURA"},
{"data": "TIPO"},
{"data": "VALOR"},
{"mRender": function(data, type, full){if(full["TRANSTATE"] == null) return "<button id = 'cancelar" + full["RECIBO"] + full["FACTURA"] + "' class='button-error pure-button cancelar-btn " + full["RECIBO"] + "' > Cancelar </button>"; else return full["TRANSTATE"];}},
{"mRender": function(data, type, full, meta){return ' Imprimir ';}}
],
"deferRender": true
});
NB: You both have a columns mRender and a columnDefs render method for column #8, why? There is something wrong with the code.
Anyway, className is static for all <td>'s in the column and does not support callbacks. render is strictly about content of the cell and cannot be used to add CSS, besides inside elements added as content.
But you can use rowCallback to post process the rendered row, and by that add a class to column #8 using the rows RECIBO value :
var table = $('#tableCLIX1').DataTable({
rowCallback: function(row, data, index) {
$('td:eq(8)', row).addClass('tranState'+data.RECIBO);
},
// ...
})
When using server-side processing on a DataTable, there is a mechanism to add an ID, class, or data-* attribute to the table row (<tr>) by including the DT_RowId, DT_RowClass or DT_RowData properties, respectively, to the JSON data for each row: https://datatables.net/examples/server_side/ids.html.
Is there a similar (or any) mechanism for adding additional markup to the table columns (<td>)?
You can add classes to columns like so, but not sure if this gets you where you want to go:
var all_data = data;
$("#example").DataTable({
"data": all_data,
"aoColumns": [{
"data": 'cat_code',
"className": "lang_body_2",//you can add whatever you want for a specific column here.
"visible": false
}, {
"data": 'value',
"searchable": false,
"width": "20%",
"className": "lang_body_2",
"title": ""
}]
})
Other way, from off. sites docs.
Assign class my_class to first column
$('#example').dataTable( {
"columnDefs": [
{ className: "my_class", "targets": [ 0 ] }
]
} );