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';
}
} ]
} );
Related
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"}
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/
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 fetching nested data to be shown as nested list but whenever I tap on top level item, it again shows same top level list instead of showing children list and a ajax request is fired to fetch json data again. Here is the store:
Ext.define('MyTabApp.store.CategoriesStore',{
extend:'Ext.data.TreeStore',
config:{
model : 'MyTabApp.model.Category',
autoLoad: false,
storeId : 'categoriesStore',
proxy: {
type: 'ajax',
url: 'resources/data/catTree.json',
reader: {
type: 'json',
rootProperty: 'data.categories'
}
},
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("categories tree loaded");
console.log(records);
}
}
}
});
and here is the data in that file which I am using to mock service:
{
"data":{
"categories": [
{
"name": "Men",
"categories": [
{
"name": "Footwear",
"categories": [
{ "name": "Casual Shoes", "leaf": true },
{ "name": "Sports Shoes", "leaf": true }
]
},
{
"name": "Clothing",
"categories": [
{ "name": "Casual Shirts", "leaf": true },
{ "name": "Ethnic", "leaf": true }
]
},
{ "name": "Accessories", "leaf": true }
]
},
{
"name": "Women",
"categories": [
{ "name": "Footwear", "leaf": true },
{ "name": "Clothing", "leaf": true },
{ "name": "Accessories", "leaf": true }
]
},
{
"name": "Kids",
"categories": [
{
"name": "Footwear",
"categories": [
{ "name": "Casual Shoes", "leaf": true },
{ "name": "Sports Shoes", "leaf": true }
]
},
{ "name": "Clothing", "leaf": true }
]
}
]
}
}
This is the list:
Ext.define('MyTabApp.view.CategoriesList', {
extend: 'Ext.dataview.NestedList',
alias : 'widget.categorieslist',
config: {
height : '100%',
title : 'Categories',
displayField : 'name',
useTitleAsBackText : true,
style : 'background-color:#999 !important; font-size:75%',
styleHtmlContent : true,
listConfig: {
itemHeight: 47,
itemTpl : '<div class="nestedlist-item"><div>{name}</div></div>',
height : "100%"
}
},
initialize : function() {
this.callParent();
var me = this;
var catStore = Ext.create('MyTabApp.store.CategoriesStore');
catStore.load();
me.setStore(catStore);
}
});
The list starts working properly without any ajax request on each tap if I remove data wrapper over top categories array and change rootProperty to categories instead of data.categories. Since server is actually returning categories in data object I cannot remove it so how do I fix the store in that case? Also why is that additional ajax request to fetch the file?
[EDIT]
Tried to create a fiddle http://www.senchafiddle.com/#d16kl which is similar but not same because it is using 2.0.1 and data is not loaded from external file or server.
Last time I had this exact situation, it was because one of my top level category was a leaf but I had not set leaf:true. Doing so recalled the top level of the nested list as if it was a child.
It seems from your Fiddle that if your data is in this following format, it would work fine:
{
"categories" : [{
"name" : "Foo",
"categories" : [{
...
}]
}]
}
That is, just remove the "data" property and make defaultRootProperty: 'categories' & rootProperty: 'categories'. Check this: http://www.senchafiddle.com/#d16kl#tIhTp
It works with external data file as well.