Is there a way to use a button for a regular link? I already tryed this:
buttons: [ { text: "link", url: '../r2_tables/huk.cfm' }, ...
↧
Button with regular link
↧
Enable REMOVE button when 1 or more rows selected but disable the EDIT button when multiple
I have three buttons:
buttons : [
{extend: 'create', editor: editor },
{extend: 'edit', editor: editor },
{extend: 'delete', editor: editor },
]
And I'm using
select: {
style: 'os',
selector: 'td:first-child'
},
I tried 'single' but then I can only select on row at a time. I'd like to be able to select multiple rows for deleting.
I need to enabled the edit button when exactly 1 (and only 1) row is selected.
AND I need to enable Remove button when 1 or more rows selected.
Can this be done? If so how? (An example would be nice)
↧
↧
pdf export - cannot customise column widths AND add message
I have set up a pdfHtml5 export and I can either set the column widths OR add a message.
If I try to add both, I get an error Cannot set property 'widths' of undefined
{
extend: 'pdf',
message: 'hello',
text: 'PDF',
pageSize: 'A4',
download: 'open',
orientation: 'landscape',
exportOptions: {
columns: [1,2,4,5,6,7,8]
},
customize : function(doc) {
doc.content[1].table.widths = [ '10%', '12%', '12%', '18%', '28%', '10%', '10%'];
}
}
↧
set pdf export message from json
on my pdfexport, i am pulling together a list of data specific to an event.
rather than show the event name multiple times in the list, i would like to hide the column and either append the event name to the title of the pdf, or the message.
I have extracted the data I need and set it as a variable using initComplete, and am using this data to update the table caption in the dom
initComplete: function ( settings, json ) {
//mycaption = console.log(json.data[0].tblorderdetails.DetailName);
mycaption = json.data[0].tblorderdetails.DetailName;
$("caption").html(mycaption);
},
How can i use the value in the pdf export button to set the message, if I try the following it is undefined ?
{
extend: 'pdf',
message: ''+mycaption+'',
text: '<i class="fa fa-file-pdf-o" aria-hidden="true"></i> PDF',
pageSize: 'A4',
download: 'open',
orientation: 'landscape',
exportOptions: {
columns: [1,2,4,5,6,7,8]
}
}
↧
How to let buttons float at right top
I need to make the buttons always float at top right corner below the menu bar,
should i write a class and how to apply it at below script ?
"buttons": [
{ extend: "create", editor: editor_1 },
{ extend: "edit", editor: editor_1 },
'colvis',{
extend: 'excelHtml5' ,
exportOptions: {
columns: ':visible'}
}
]
↧
↧
Change Buttons Collection text?
buttons: [
{ extend: "remove", editor: editor, text: "Borrar Stock" },
{
extend: 'collection',
text: 'Exportar Lista De Stock (Imprimir, Excel, Pdf...)',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}
]
In a button colletion like that, how to do change the of the buttons?
Like 'Copy' to 'Copiar'
'Print' to 'Imprimir'
Thnaks!
↧
colvis - column visibility
ISSUE 1
I have certain columns in the grid that dont show any header / column title.
For example a checkbox or print icon.
How to I modify the button for 'colvis' and 'csv' to only show columns / data where column title is present.
Note these columns are not hidden so using visibile isn't an option.
Please look at the attachment, you will notice how blank buttons are created.
new $.fn.dataTable.Buttons( table, {
buttons: [
{
extend: 'colvis',
columns: ':gt(0)'
}
]
} );
ISSUE 2
CSV / PDF does not export column with checkbox / radio button in them. How to get that working ?
↧
Display count of calculated row in pdfexport
I have a json sourced table with ticket quantity and price columns, and a subtotal column which multiplies the 2 values together
The column is generated like so...
{ data: null,
render: function ( data, type, row ) {
subtotal = Math.round( row.tblorderdetails.DetailPrice * row.tblorderdetails.DetailQuantity );
return subtotal;
}
}
And I have a footerCallback to display the sum on the table footer
How can I output the sum of this calculated column to a pdf export, as it doesn;t export the footer?
I can output the quantity ok
var tcount = dt.column( 3 ).data().reduce( function (a, b) {return parseInt(a) + parseInt(b); } );
return tcount+' tickets';
but as the data in the column is null, i get NAn output if I try and do the same with the calculated column
↧
Remove Button from Editor
Is there a way I can remove the buttom from Editor?
↧
↧
Excel export creating invalid file.
When I do an excel export the file created can not be opened by Office Excel. It says "We found a problem with some content ...".
I have attached the file.https://dropbox.com/s/uleuijj49itpg2j/Confmanager%20%284%29.xlsx?dl=0
↧
Foundation Button Styling
I noticed that datatables uses the button-group class for foundation buttons. However, there is no space between the buttons as shown here. Is this intentional or is this a bug?
Any help would be appreciated.
Thanks,
Kurt
↧
ColVis Button vs. column.visible inconsistency
I accidentally assigned 0 and 1 (integers, not chars/strings) to column.visible instead of false and true. The columns were hidden correctly (that is, columns with column.visible set to 0 were hidden and those set to 1 shown), but the colvis button had some very weird behaviour. When clicking the button corresponding to the last column in the button collection, the visibility of that column is toggled correctly, but the buttons for all columns above/before the clicked column would incorrectly toggle their state.
I suspect this is due to some inconsistent usage of == in the column.visibility handling of datatables and === in the buttons plugin.
Since assigning integers is undocumented, this is not necessarily a problem, but consistent behaviour would be nice for debugging purposes.
↧
customizeData
Currently, only the excel export has a customizeData option to modify the raw data object before the document is generated. It would be nice to have a similar function for the copy and csv exports.
In my case, I have a table where some cells contain nested DataTables, and I would like to create something like
col | col a | col b
-------------------------
v | v1a | v1b
| v2a | v2b
where the v[12][ab] values are a nested table in the first row. Would there be an easy way to achieve this without implementing customizeData mysql?
(I don't bother implementing customizeData. I'm just curious why it isn't there yet.)
I kind of expected this to be a member of exportOptions, so that all export types can use the same callback. Also, in the excel export, customizeData is directly called on the output of buttons.exportData(), so moving it inside that function seems more logical to me.
↧
↧
Can get Editor to edit only changed values
I've been trying to have my edit form submit only the changed values because my password field is updated every time I change any field on the form.
I tried adding the formOptions code, but my password keeps being submitted every time a field is edited.
formOptions: {
main: {
submit: 'changed'
}
}
I also tried adding the on Click function, but I need it to be on Edit.
$('#myTable').on( 'click', 'tbody tr', function () {
editor.edit( this, {
submit: 'changed'
} );
} );
How can I submit only the edited fields?
This is my code:
var table = $('#example').DataTable({
responsive: true,
dom: "Bfrtip",
ajax: "Server-script/contacts.php",
columns: [
{ // Responsive control column
data: null,
defaultContent: '',
className: 'control',
orderable: false
}, {
data: "id"
},
{
data: null,
render: function (data, type, row) {
// Combine the first and last names into a single table field
return data.first_name + ' ' + data.last_name;
}
},
{
data: "office"
},
{
data: null,
render: function (data, type, row) {
return '<a href="mailto:' + data.email + '?Subject=Saludos!">' + data.email + '</a>';
}
},
{
data: null,
render: function (data, type, row) {
return '<a href="tel:' + data.work + '">' + data.work + '</a>';
}
},
{
data: "extension"
},
{
data: "tittle"
},
{
data: null,
render: function (data, type, row) {
return '<a href="tel:' + data.phone + '">' + data.phone + '</a>';
}
},
{
data: null,
render: function (data, type, row) {
return '<a href="tel:' + data.home + '">' + data.home + '</a>';
}
},
{
data: null,
render: function (data, type, row) {
return '<a href="mailto:' + data.email2 + '?Subject=Saludos!">' + data.email2 + '</a>';
}
}
],
order: [2, 'asc'],
select: true,
buttons: [
{
extend: "create",
editor: editor
},
{
extend: "edit",
editor: editor
},
{
extend: "remove",
editor: editor
},
{
extend: 'collection',
text: 'Export',
buttons: [
'excel',
'print'
]
}
],
formOptions: {
main: {
submit: 'changed'
}
}
});
↧
Buttons extension - ID option (suggestion)
Hi guys
I'm trying to give my (Editor) buttons an ID, I've been looking in the docs but there doesn't seem to be any way of doing this. Is it possible this can be added, similar to how the title attribute is added? (https://datatables.net/reference/option/buttons.buttons.titleAttr)
I know I could do it with after the table has been initialised, but I think it looks neater if its added like the title attribute
Thanks in advance!
↧
Hiding Bootstrap tooltips on Datatables Buttons
Hello,
I'm using:
DataTables 1.10.12
JSZip 2.5.0, pdfmake 0.1.18, Buttons 1.2.2, Column visibility 1.2.2, HTML5 export 1.2.2, Print view 1.2.2
FixedColumns 3.2.2
Is anyone know a way to hide "Bootstrap tooltips" from "Column Visibility" and HTML5 Exports?
This is how I use Tooltips:
<span class="fa fa-question-circle datatable-th-info js-datatable-info-tooltip" data-html="true" data-delay='{"show":"500", "hide":"1500"}' title="<b>Friendlyname:</b> Description"></span>
I think in code, there is a function to strip html. Is that possible to change to strip all tooltip?
Here is jsfiddle:
http://jsfiddle.net/yusufozturk/m6zhwsxy/72/
Thanks for help.
Yusuf
↧
Print omitting the first column
Hi,
We are using the button file export in the following dynamic way:
buttonCommon.exportOptions.orthogonal = 'export';
buttonCommon.exportOptions.columns = ':visible+:not(.notForPrint)';
tableOptions.buttons.push([
$.extend( true, {}, buttonCommon, {extend: 'copy'}),
$.extend( true, {}, buttonCommon, {extend: 'csv'}),
$.extend( true, {}, buttonCommon, {extend: 'excel'}),
$.extend( true, {}, buttonCommon, {extend: 'print'}),
]);
}
When we use the print in a table where the first column is with information (like in this example) the printout omits the first column.
What are we doing wrong?
Thanks,
Yishay
↧
↧
Multi-Level Collection Syling
Hello,
I have a couple of questions regarding styling of multi-level button collections. I am in the process of building a menu style button with several levels of collections. For example, I have one button called "Table Actions". Clicking this button will open a collection of buttons. Several of these buttons open their own collections (i.e. Column Vis, Page Length, etc.). See screenshot
Question 1
Is there a way to add a class to a specific collection container and/or its buttons, especially for pre-built buttons? For example, the Column Visibility container has the buttons-columnVisibility class for each of its buttons. However, the Page Length container does not. I need to be able to style the Page Length buttons specifically and am not sure how do accomplish this. I did look into buttons.dom but it seems that this is a global setting for all buttons/containers.
Question 2
On the Multi-level collections example it's noted that only a single collection can be shown at a time. This is certainly fine for what I am trying to do, however, when I click on a button to open a sub-collection (like Column Vis), the sub-collection is rendered relative to its parent button and it causes a gap between the sub-collection and the main menu button (see screenshot). Is there a way to force it to render relative to the root (Table Actions) button?
Any help you can provide would be greatly appreciated!
Thanks,
Kurt
↧
HTML5/Excel/CSV/PDF not selecting all visible columns
Hello,
We have a lot of "metadata" hidden in columns that are not visible in the DataTable. When using the Buttons export/copy functions without the columns explicitly defined in exportOptions, all data (including the hidden data) is made available, which is obviously not ideal.
However, when adding ":visible" to the columns option, we are only getting the first column, nothing more.
This only happens when we provide a custom container (created dynamically based on the data's column names) for the DataTable to live. When removing the container (and also the footer callback), the copy works as expected, copying only the visible data.
Any thoughts?
Thank you!
↧
columnToggle initial state
Is there a way we can set the initial state of the columns associated with columnToggle?
Seems that when I hide the columns using DataTables options, that setting is overridden by the Buttons settings and they are shown initially.
For example, if I have a className "details" added to columns I wanted to be hidden by default, but want to allow toggling on or off, how would that be accomplished?
Thank you!
↧