I need to access the computer path and open pdf from the link I gave in documentcode. How can I access the techDocPath field in the datatable when I press the (techDocPath) documentCode field? When I click on documentCode, I have to open the pdf in the new tab.
columns: [
{ "data": "typeName" },
{ "data": "subTypeName" },
{ "data": "stokGrup" },
{ "data": "statusName" },
{
"data": "documentCode",
"render": function (data, type, row, full) {
return "<td><a target='_blank' href=' ' + full.techDocPath +'' style='color:#000; text-decoration: underline;'> " + data + "</a></td>";
}},
{ "data": "documentName" },
{ "data": "materialName" },
{ "data": "gizliMi" },
{ "data": "revisionNo" },
{ "data": "designerAd" },
{ "data": "teknikResimGrubu" },
{ "data":" techDocPath"}
Related
I'm using datatables and I have built my code in this way:
table = $('#examples').DataTable({
"ajax": {
type: "POST",
url: "./../../" + "/back-end/switch-ajax-listening/switch-ajax-listening.php",
dataType: "json",
data:
{
actionId: "page1GetAll"
}
},
responsive: true,
"columns": [
{ "data": "idSelectPacketName"},
{ "data": "idSelectCompany" },
{ "data": "idSelectDesigner1" },
{ "data": "idSelectDesigner2" },
{ "data": "idSelectDesigner3" },
{ "data": "idSelectDesigner4" },
{ "data": "idSelectDesigner5" },
{ "data": "idSelectManufacturer" },
{ "data": "idSelectorProductSector" },
{ "data": "idSelectorProductionYear" },
{ "data": "idSelectorNation" },
{ "data": "idSelectorTypology" },
{ "data": "idHeightInput"},
{ "data": "idLengthInput" },
{ "data": "idVolumeInput" },
{ "data": "idWeightInput" },
{ "data": "nameOutMouseOrImage1" },
{ "data": "nameOverMouseOrImage2" },
{"data":null,"defaultContent":"<button>View</button>"}
],
});
var buttons = new $.fn.dataTable.Buttons(table, {
"buttons": [
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ],
container : '#colvis',
columns: '0,1,2,3,4,5'
},
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
}).container().appendTo($('#buttons'));
$('div.dataTables_filter').appendTo('#buttons');
$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
It works very well but I need to move some element using the id. Indeed at the end of my code I have moved some elements in new div using their id, but I'm not able to find all the id. More in details I don't find this id:
I have indicated with orange and blue color.
Have you some ideas what is their id name?
I guess you are looking for Datatable dom positioning
You can position each component in any order something like this
$('#example').DataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">'
});
where variables are
l - Length changing
f - Filtering input
t - The Table!
i - Information
p - Pagination
r - pRocessing
you can change order of irtflp in order you want
More detail here
I have data which looks like this.
{
"data": [
{
"c1": "datapt00",
"size": 40
},
{
"c1": "datapt001",
"size": 80
}
]
}
In HTML I am doing,
$(document).ready(function) {
$('#example').DataTAble ( {
"ajax": {
"url": "/data",
}} ); });
Is ther ean easy way to manipulate my data so its Datatable compliant?
This should do it:
var jsonData = {
"data": [
{
"c1": "datapt00",
"size": 40
},
{
"c1": "datapt001",
"size": 80
}
]
};
$('#example').DataTable({
"ajax": {
"type": 'POST',
"dataType": 'json',
"url": '/echo/json/',
"data": {
"json": JSON.stringify(jsonData)
},
"dataSrc": "data"
},
"columns": [{
"data": "c1"
}, {
"data": "size"
}]
});
Working JSFiddle here: https://jsfiddle.net/annoyingmouse/70d01vo0/
How can I add html tags inside a column of the datatable?
$('#example').DataTable( {
"ajax": {
"url": "ajax/lista_bozze.php",
"dataSrc": ""
},
"columns": [
{ "data": "num_ticket" },
{ "data": "cod_pro" },
{ "data": "name" },
{ "data": "rag_soc" },
{ "data": "date_ticket" },
{ "data": "cod_pro" }
]
} );
You can use render option to process the data inside a datatable column,
this is example of converting one column into a link:
$('#example').DataTable( {
"columnDefs": [ {
"targets": 0,
"data": "download_link",
"render": function ( data, type, row, meta ) {
return 'Download';
}
} ]
} );
Now suppose I have a json data formation like this following:
{
"ServiceName": "cacheWebApi",
"Description": "This is a CacheWebApiService",
"IsActive": true,
"Urls": [{ "ServiceAddress": "http://192.168.111.210:8200", "Weight": 5, "IsAvailable": true },
{ "ServiceAddress": ",http://192.168.111.210:8200", "Weight": 3, "IsAvailable": true }]
}
Now what worries me is that the "Urls" is another nested json formation. So how to bind this value to the datatables? And have you got any good ideas (e.g：something like I only wanna show all the ServiceAddress)...
This should do what you need:
var data = [{
"ServiceName": "cacheWebApi",
"Description": "This is a CacheWebApiService",
"IsActive": true,
"Urls": [
{
"ServiceAddress": "http://192.168.111.210:8200",
"Weight": 5,
"IsAvailable": true
},
{
"ServiceAddress": ",http://192.168.111.210:8200",
"Weight": 3,
"IsAvailable": true
}
]
}];
$(function() {
var table = $('#example').dataTable({
"data": data,
"columns": [
{
"data": "ServiceName"
}, {
"data": "Description"
}, {
"data": "IsActive"
}, {
"data": "Urls[0].ServiceAddress"
}, {
"data": "Urls[0].Weight"
}, {
"data": "Urls[0].IsAvailable"
}, {
"data": "Urls[1].ServiceAddress"
}, {
"data": "Urls[1].Weight"
}, {
"data": "Urls[1].IsAvailable"
}
],
});
});
You should put your data in an array though. Working JSFiddle
EDIT
IF the number of Urls isn't defined then you could do something like this:
var table = $('#example').dataTable({
"data": data,
"columns": [
{
"data": "ServiceName"
}, {
"data": "Description"
}, {
"data": "IsActive"
}, {
"data": "Urls",
"render": function(d){
return JSON.stringify(d);
}
}
],
});
I guess that that isn't brilliant but you could do almost anything to that function, for instance:
var table = $('#example').dataTable({
"data": data,
"columns": [
{
"data": "ServiceName"
}, {
"data": "Description"
}, {
"data": "IsActive"
}, {
"data": "Urls",
"render": function(d){
return d.map(function(c){
return c.ServiceAddress
}).join(", ");
}
}
],
});
I am upgrading an existing site that was using DataTables 1.9.4 and TableTools 2.0.3 to use DataTables 1.10.11. I cannot get the csv button to show up on my page.
I replaced
"oTableTools": {
"sSwfPath": "scripts/jquery/TableTools-2.0.3/media/swf/copy_csv_xls.swf",
"sRowSelect": "multi",
"aButtons": [
{
"sExtends": "text",
"sButtonText": t.cmdMarkSelectedInvoiced,
"fnClick": function (nButton, oConfig, oFlash) {
vr.markSelectedInvoiced();
}
},
{
"sExtends": "csv",
"sButtonText": t.cmdExportSelectedToCSV,
"bSelectedOnly": true
},
{
"sExtends": "csv",
"sButtonText": t.cmdExportAllToCSV
},
{
"sExtends": "select_none",
"sButtonText": t.cmdDeselectAll
}
]
},
with
"buttons": ['csv'],
the new initialization for the datatable is:
var bla = $('#someelement').DataTable({
"buttons": [
'csv'
],
"pagingType": "simple",
"destroy": true,
"stateSave": true,
"stateSaveCallback": function (settings, data) {
vr.saveDtState(data);
},
"stateLoadCallback": function (settings) {
return vr.dtSavedState(settings);
},
"pageLength": 10,
"language": {
"emptyTable": t.tblInfoNoDesignRequestFound,
"infoEmpty": t.tblInfoNoDesignRequestFound,
"zeroRecords": t.tblInfoNoDesignRequestFound,
"info": ct.tblInfoTxtDisplayingXtoYofTotal,
"infoFiltered": ct.tblInfoTxtFilteredFromMax,
"lengthMenu": ct.tblInfoTxtShow + ' <select>' + '<option selected value=10>10</option>' + '<option value=15>15</option>' + '<option value=20>20</option>' + '<option value=25>25</option>' + '<option value=-1>' + ct.txtAll + '</option>' + '</select> ' + ct.tblInfoTxtRows,
"search": ct.tblInfoTxtFilter,
"paginate": {
"next": ct.tblInfoTxtNextPage,
"previous": ct.tblInfoTxtPreviousPage
}
},
"ordering": true,
"order": [],
"stripeClasses": [
'myodd',
'myeven'
],
"data": vr.dataObj.data,
"columns": [
{
"data": "companyLocation",
"title": ct.chCompanyLocation
},
{
"data": function (source, type, val) {
if (type === 'display' || type === 'filter') {
return u.jsonToLocalDate(source.requestStatusDateUtc, false);
}
return source.requestStatusDateUtc;
},
"title": ct.chDate
},
{
"data": function (source, type, val) {
return vr.formattedNameSizeAndOrient(source, type)
},
"title": ct.chLogoName
},
{
"data": function (source, type, val) {
return vr.formattedDrInfo(source, type)
},
"title": ct.chDRNumber
},
{
"data": "requestStatusDescription",
"title": ct.chStatus
},
{
"data": "invoiceAmount",
"title": ct.chInvoiceAmount,
"orderable": false,
"className": "rightJustify"
},
{
"data": "invoiceCurrency",
"bSortable": false
},
{
"data": "requestedBy",
"title": ct.chCreatedByName,
"orderable": false
}
],
"initComplete": function () {
vr.loadColumnSelects('viewRequestsDataTable', this, columnSelects);
}
});
You need to specify the dom: parameter.