I have an HTML table. There are buttons in the rows of this table that allow me to perform operations. Whhen exporting the table with jQuery table2excel, these buttons are also taken into account and an unwanted result comes out.
Is there any way I can exclude these buttons?
Including it in the .noExl class did not work. It ignores the whole line.
$("#excelBtn").click(function () {
$("#table").table2excel({
exclude: ".noExl",
name: "Worksheet Name",
filename: "SomeFile",
fileext: ".xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
});
Related
I'm developing a stock manager webapp for a company.
I have this page where the administrator can edit and delete products that they added in a table (dataTable), I managed to make this possible by using this tutorial:
https://www.webslesson.info/2017/05/live-table-data-edit-delete-using-tabledit-plugin-in-php.html
Everything works fine but I had this issue where the 2 edit and delete buttons weren't showed on other pages of my table except from the 1st, I managed to resolve this issue with attached code
Everything right now works fine but i have a huge graphic problem. While i'm searching, every time I tap a letter or a backspace, the last column as you can see from the attachment is cloning itself every time.
Error of multiple columns
I've already tried to debug the search method but I don't think it's related to that... it's a standard method.
Do you think it can possibly be a problem related to the fact that the last column with the 2 button (edit and delete) is automatically added with a js of the library extension I'm using and it's not hardcoded? so every time I redraw the table it is like an external element to redraw?
var table = $('#dataTable').DataTable();
// Document ready
$(function() {
editTable();
});
// Assuming "table" is the variable name of your datatable
table.on('draw', editTable);
function editTable() {
$('#dataTable').Tabledit({
url: 'updateDB.php',
columns: {
identifier: [0, "id"],
editable: [
[1, 'name'],
[4, 'quantity'],
[5, 'threshold'],
]
},
restoreButton: false,
onSuccess: function(data, textStatus, jqXHR) {
if (data.action == "delete") {
document.getElementById(data.id).remove();
}
}
});
};
I have a div box which will get the tinymce extension like this:
<div id="notice"></div>
<script>
tinymce.init({
selector: '#notice',
inline: true,
menubar: false,
skin: "oxide-dark",
toolbar: 'bold italic bullist',
plugins: ['lists','autoresize','textpattern'],
toolbar_location: 'bottom',
deprecation_warnings: false
});
</script>
I would like to realize that a list will be automatically generate if I write something like this:
- my first list item
this works, but only If I press the enter key at the end.
Problem: The enter key create directly a new list item, which I have to delete manually if I would like to have only one item (more steps as needed)
Result looks like this:
Any idea, how can I solve it without pressing the enter key?
I have a datatable with a button to export its data to a pdf file using pdfmake. So far so good until I received the request to add one more value to one of the columns (and this value should not appear in the exported data). The column I'm having this problem has the following composition:
<td>{{client.lot}}<br><p>{{client.lot.total_negotiations}} client(s) negotiating!</p></td>
(Ok, I know this is not the best way to split all cells of the column into two rows)
What I'm trying to do is to export the data only with the "first row" (before the <br> tag). How can I accomplish this? There's any workaround adjusting the table or the pdf?
You can use the exportOptions.format() function provided by DataTables to do this.
For example, assuming we start with the following table data (where there are 2 cells containing data which needs to be formatted):
Then the resulting PDF will look as follows:
The DataTables configuration for this is:
$(document).ready(function() {
$('#example').DataTable( {
"dom": 'B<"clear">lfrtip',
buttons: [{
extend: 'pdf',
text: 'Save as PDF',
exportOptions: {
modifier: {
page: 'current'
},
format: {
body: function ( data, rowIdx, colIdx ) {
if (colIdx == 1) {
var brIdx = data.indexOf("<br>");
if (brIdx >= 0) {
return data.substring(0, brIdx);
} else {
return data;
}
} else {
return data;
}
}
}
}
}]
} );
} );
This uses a function to inspect the contents of each cell. In my case, I ignore any data which is not in column index 1 (the 2nd column in the table).
For each cell of data in this column, I check for the existence of a <br> tag in the data. If one exists, then all data from this tag to the end of the string is discarded.
All other cells in all other columns are passed through to the PDF unchanged.
You may need to adjust this, depending on your specific needs (e.g. if you need to handle multiple columns, maybe to clean up that trailing hyphen in "Lote 14 -", etc.).
You may want move the export logic to its own separate function, as well, and then call that function from the DataTable config instead (so the logic does not clutter the DataTable configuration code).
Background information on this export function can be found here: exportData - specifically, see the format section on that page. This is the general buttons function used by the exportOptions configuration in the above example.
I'm trying to display two gridviews using the dhtmlx scheduler library. The way we are using the scheduler is so that employees can sign out. Right now, we can view it as a monthly view but we also want to have a day view too.
I was able to create the grid, but when I try to click button it does not display the day report.
Here is a code snippet
scheduler.locale.labels.grid_tab = "Month";
scheduler.createGridView({
name:"grid",
fields:[ // defines columns of the grid
{id:"date", label:'Date', sort:'date', width:300, align:"left"},
{id:"employee", label:'Employee', sort:'str', width:400, align: "*"},
{id:"room_description", label:'Destination', sort:'str', width:600, align:'left'}
],
paging:true,
unit:"month",
step:1
});
scheduler.locale.labels.grid_tab2 = "Day Report";
scheduler.createGridView({
name:"day_grid",
fields:[ // defines columns of the grid
{id:"date", label:'Date', sort:'date', width:300, align:"left"},
{id:"employee", label:'Employee', sort:'str', width:400, align: "*"},
{id:"room_description", label:'Destination', sort:'str', width:600, align:'left'}
],
paging:true,
unit:"day",
step:1
});
Your code seems to work on scheduler demos
http://docs.dhtmlx.com/scheduler/snippet/b9320394
The only thing is that you need to define label for a day_grid view correctly, the variable should be named "day_grid_tab" instead of "grid_tab2"
scheduler.locale.labels.day_grid_tab = "Day Report";
In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId