I'm trying to add aditional rows during exportation(plz, see attached image), i don't find the right way to do it, please someone tell me whether or not its possible, since many reports carry parent data that not necesarily appears inside the table. I need the Pdf output with the same format. I'm using yajra datatables for laravel.
buttons :[
{
extend: 'pdfHtml5',
pageSize: 'letter',
title: "Informe Asistencia",
exportOptions: {
columns: [0,1,2,3,4,5,6,7,8,9,10 ]
}
},
['excel','csv','colvis']
],
calling the function and drawing table
$.get('{{ url("informes/get_informe_asistencia") }}',
{
'fecha_inicio': fecha_inicio,
'fecha_fin' : fecha_fin,
'numero' : numero
},function(resp){
console.log(resp);
$('.desde').append(fecha_inicio);
$('.hasta').append(fecha_fin);
$('.nombre').append(resp.informe[1].nombre);
$('.ficha').append(resp.informe[1].numero);
dtinforme.clear().draw();
dtinforme.rows.add(resp.informe).draw();
}
missing data
you can export manually.
text: 'PDF',//title
titleAttr: 'Exportar PDF',
exportOptions: {
...
},
action: function (e, dt, node, config) {
var table = this;
dt.clear().draw();
dt.rows.add("YOUR DATA").draw();
$.fn.dataTable.ext.buttons.pdfHtml5.action.call(table, e, dt, node, config);
}
So you need modify your data from with dt.rows().data().toArray(),dt.settings().init().columns.
Related
I would like to have a table to keep a history of the uploaded files
Here is a dummy example of what I did so far
Whenever I update the table injecting some values via JS, the row with the text No data available in table still appears.
I've tried the solutions provided in other questions but none of them worked for me
Any help would be appreciated
This happens because your datatable object is unaware of the changes that were made in DOM. You need to use the datatables rows.add() api instead of appending <tr><td> to your table.
Please modify your javascript as below. Notice the use of DT1.row.add inside your $.each instead of $('#nameBody').append :
$(document).ready(function() {
$('#fileholder').change(function(e){
var files = $('#fileholder').prop("files")
var names = $.map(files, function(val) { return val.name; });
var modDates = $.map(files, function(val) { return val.lastModifiedDate; });
$.each(names, function(index){
DT1.row.add([names[index], modDates[index]]).draw();
});
});
var DT1 = $('#names').DataTable({
columnDefs: [
{ className: 'text-center', targets: [1] },
],
order: [
[1, 'asc']
],
dom: 'rt'
});
});
Using Vue Table 2, I do not want to use the default search/filter input and the Records drop down. I.e. I do not want to use controls in the image below:
Instead, I want to create my own input box outside the table. I am able to hide the default row containing the image above. However, after adding my own input box - example:
<input type="text" v-model="searchTerm" v-on:keyup='filterResult()' />,
How can I trigger the filter event to process my filter request in the filterResult() method?
data(){
return {
searchTerm:'',
customFilters: [{
name: 'mysearch',
callback: function (row, query) {
return row.name[0] == query;
}
}],
},
},
methods:{
filterResult(){
//how to trigger event to filter result using the searchTerm
}
}
Given a table definition like this, where tableoptions its an object containing the options you are applying to your table(these have to match their documentation), in this case i'm only adding customFilters, but you might have columns, headings or others
<v-client-table :options="tableoptions">
</v-client-table>
In their documentation it says that you should use this to trigger the custom filter
Event.$emit('vue-tables.filter::alphabet', query);
But it fails to say that Event it's VueTables.Event, so you will need to update your js to the following:
data() {
return {
searchTerm: '',
tableoptions: {
customFilters: [{
name: 'mysearch',
callback: function(row, query) {
//this should be updated to match your data objects
return row.name[0] == query;
}
}]
},
},
},
methods: {
filterResult() {
VueTables.Event.$emit('vue-tables.filter::mysearch', query);
}
}
When using Datatables (Ver: 1.10.16), I noticed that the data in the API is not updated immediately via ajax.reload in the callback even though the site says the callback is not called until the new data has arrived and been redrawn.
Notes up front:
All the data is formatted correctly and displays in the table before and after the ajax.reload, including the new data from the reload.
If I click reload twice, the api sees the new data properly and ApplyHeaderFilters works properly.
When I say the API seeing the data properly I mean like so:
$('#dtTbl').DataTable().column('1:visible').data().unique()
The ApplyHeaderFilters is the callback on ajax.reload and uses the above JS command to get unique values from the column. The data returned from the JS command are not reflecting the new data that is returned from the reload.
This is in the Document Ready:
batchDT = $('#dtTbl').DataTable( {
deferLoading: true,
pageLength: 25,
pagingType: 'simple_numbers',
scrollx: true,
initComplete: function () {
ApplyHeaderFilters($(this).attr('id'), this.api());
},
ajax: {
url: "mysite.cfm?method=gettabledata",
type: 'POST'
},
columns: [
{ title: "Description", name: "description", data: "description"},
{ title: "Is Active", name: "isactive", data: "isactive"},
{ title: "List Item ID", name: "listitemid", data: "listitemid"},
{ title: "Name", name: "name", data: "name"},
{ title: "Table Ref ID", name: "tablerefid", data: "tablerefid", orderable: false}
]
} );
$("#reload").on('click',function(){
batchDT.ajax.reload(ApplyHeaderFilters('dtTbl', $('#dtTbl').DataTable()));
});
For some reason the callback was being called before the reload was completed. I fixed this by wrapping my callback function in reload in an anon function. If anyone has ideas why this would be this way comment please. I have a feeling it has something to do with closures and how they are handling the callback in the datatables library.
$("#reload").on('click',function(){
batchDT.ajax.reload(function(){
ApplyHeaderFilters('dtTbl', $('#dtTbl').DataTable());
});
});
I want to create a combobox listing all user story's formatted id.
The js is somethiing like below:
Ext.define('CustomApp', {
extend : 'Rally.app.App',
componentCls : 'app',
launch : function() {
var usComboBox = Ext.create('Ext.Container', {
items : [ {
xtype : 'rallycombobox',
storeConfig : {
autoLoad : true,
model : 'User story',
displayField:'FormattedId',
}
} ],
});
this.add(usComboBox);
},
});
First of all, the comboBox cannot show any formatted id;
Secondly, if I removed the "displayField" config, I can see list of user story names but somehow it's not always showing like that. Sometime if I refresh the page, the list may not be shown.
I tested this by changing the App.js file and view App-debug.html file in Chrome since Chrome extension terminal couldn't be installed properly in Windows 7. Is this the right way to do?
You may use filterFieldName of rallymultiobjectpicker, and fetch FormattedID. It currently does not automatically add the value in filterFieldName to the fetch.
var box = Ext.create('Ext.Container', {
items: [{
xtype: 'rallymultiobjectpicker',
modelType: 'userstory',
filterFieldName: 'FormattedID',
storeConfig: {
fetch:['FormattedID']
}
}]
});
this.add(box);
On the front-end I have a Calls grid. Each Call may have one or more Notes associated with it, so I want to add the ability to drill down into each Calls grid row and display related Notes.
On the back-end I am using Ruby on Rails, and the Calls controller returns a Calls json recordset, with nested Notes in each row. This is done using to_json(:include => blah), in case you're wondering.
So the question is: how do I add a sub-grid (or just a div) that gets displayed when a user double-clicks or expands a row in the parent grid? How do I bind nested Notes data to it?
I found some answers out there that got me part of the way where I needed to go. Thanks to those who helped me take it from there.
I'll jump straight into posting code, without much explanation. Just keep in mind that my json recordset has nested Notes records. On the client it means that each Calls record has a nested notesStore, which contains the related Notes. Also, I'm only displaying one Notes column - content - for simplicity.
Ext.define('MyApp.view.calls.Grid', {
alias: 'widget.callsgrid',
extend: 'Ext.grid.Panel',
...
initComponent: function(){
var me = this;
...
var config = {
...
listeners: {
afterrender: function (grid) {
me.getView().on('expandbody',
function (rowNode, record, expandbody) {
var targetId = 'CallsGridRow-' + record.get('id');
if (Ext.getCmp(targetId + "_grid") == null) {
var notesGrid = Ext.create('Ext.grid.Panel', {
forceFit: true,
renderTo: targetId,
id: targetId + "_grid",
store: record.notesStore,
columns: [
{ text: 'Note', dataIndex: 'content', flex: 0 }
]
});
rowNode.grid = notesGrid;
notesGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
notesGrid.fireEvent("bind", notesGrid, { id: record.get('id') });
}
});
}
},
...
};
Ext.apply(me, Ext.apply(me.initialConfig, config));
me.callParent(arguments);
},
plugins: [{
ptype: 'rowexpander',
pluginId: 'abc',
rowBodyTpl: [
'<div id="CallsGridRow-{id}" ></div>'
]
}]
});