I'm using angularjs datatable and trying to use button plugin in this page https://l-lin.github.io/angular-datatables/#/withButtons
.withButtons([
'columnsToggle',
'colvis',
'copy',
'pdf',
'excel',
{
text: 'Some button',
key: '1',
action: function (e, dt, node, config) {
alert('Button activated');
}
}
]);
I get Unknown button type: 'columnsToggle', and 'colvis'
but when I remove 'columnsToggle', and 'colvis' from code it run without any problems but other button not display except custom button
{
text: 'Some button',
key: '1',
action: function (e, dt, node, config) {
alert('Button activated');
}
}
copy,pdf, excel don't appears,Can anyone help me to fix the problem please?
I had the same problem as you and I find out all the datatables-buttons js files needed to be included:
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.jqueryui.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.colVis.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.flash.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.html5.js"></script>
<script type="text/javascript" src="~/Scripts/datatables-buttons/js/buttons.print.js"></script>
for excel and csv add this cdn
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
for PDF file option add this cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
Related
Trying to create an excel export button using the same code I used in another application.
Unfortunately, I am receiving the following error:
Uncaught Cannot extend unknown button type: excelHtml5
Here is the portion of code that produces the buttons above the datatable:
"dom": 'Bfrtip',
"buttons": [
{
text: '<i class="fa fa-search"></i> Search All',
className: 'searchAll btn btn-success btn-sm',
action: function (e, dt, node, config)
{
$('#searchAllModal').modal('show');
}
},
{
extend: 'excelHtml5', /*** here is the problem ***/
title: 'Matchback Rail Export Results',
text: '<i class="fa fa-download"></i> Export Results',
className: 'btn btn-secondary btn-sm',
customize: function( xlsx )
{
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="A"]', sheet).attr( 's', '2' );
},
exportOptions:
{
columns: [1,2,3,4,5,6,7,8,9,10]
}
},
{
extend: 'colvis',
text: '<i class="fa fa-toggle-on"></i> Toggle Columns',
className: 'btn btn-secondary btn-sm'
}
]
The page does not like the "extend: 'excelHtml5'" portion of the code. There's no problem with the "extend: 'colvis'" portion.
I checked to see what libraries I am using:
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js" type="text/javascript"></script>
Upon creating the question, the first suggestion I was given was this:
"Uncaught Cannot extend unknown button type: copyHtml5" - How to use `datatables.net-buttons-bs4`
But that question seems to refer to the .net platform.
What am I missing that will help remove this error?
* UPDATE *
I updated the datatables buttons library from 1.5.2 to 1.5.1. In addition, I was missing the following requirements:
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
This solved my problem.
In this documentation says that it requires the Buttons extension and other requirements, do you meet all the requirements?
I'm dealing with Martin Wendt's jQuery Context-menu plugin and I'm trying to integrate it in my FullCalendar plugin. The issue is that nothing happens on right-clicking on the event. So, no context-menu pops-out.
I got the following jquery code in my default.html file that displays the calendar:
$('#calendar').fullCalendar({
eventRender: function(event, element) {
var originalClass = element[0].className;
element[0].className = originalClass + ' hasmenu';
},
//
});
$('#calendar').contextmenu({
delegate: '.hasmenu',
menu: [
{title: 'Copy', cmd: 'copy', uiIcon: 'ui-icon-copy'},
{title: '----'},
{title: 'More', children: [
{title: 'Sub 1', cmd: 'sub1'},
{title: 'Sub 2', cmd: 'sub1'}
]}
],
select: function(event, ui) {
alert('select ' + ui.cmd + ' on ' + ui.target.text());
}
});
As you can see, it seems like there's nothing wrong with the code since I completely followed the procedures to enable the jquery context-menu to pop-out when right-clicking on an event. Here are also the dependencies required for the context-menu plugin:
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
rel="stylesheet" />
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="assets/jquery.ui-contextmenu.min.js"></script>
In order to fulfill it, in the beginning of my section, I included the dependencies for FullCalendar and the Contextmenu :
<link href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' rel='stylesheet' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='//code.jquery.com/jquery-1.11.3.min.js'></script>
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<script src='../jquery.ui-contextmenu.min.js'></script>
The jquery.ui-contextmenu.min.js file got bumped up to the main folder where my fullcalendar.min.js is present as you can notice.
I made a fiddle based on the above code where the context menu does appear but gets displayed behind bits of the calendar and is inaccessible.
https://jsfiddle.net/xc7styt5/
If you change the z-index of class ui-contextmenu it should function.
https://jsfiddle.net/p52gohwn/
.ui-contextmenu {
z-index: 1;
}
(there may be a better way)
I'm facing a huge problem since this morning, i'm trying to export my table into a pdf file. The script works fine if i put it in a without nothing else, the page load and the dl starts.
But i want it in a button ! And when i put it like this :
$(document).ready(function () {
$('#downloadPDF').on('click', function (e) {
console.log("test");
e.preventDefault();
$('table').tableExport({
type: 'pdf',
jspdf: {
orientation: 'l',
format: 'a3',
margins: {
left: 10,
right: 10,
top: 20,
bottom: 20
},
autotable: {
styles: {
fillColor: 'inherit',
textColor: 'inherit'
},
tableWidth: 'auto'
}
}
});
});
});
<button type="button" id="downloadPDF" class="btn btn-default">Default</button>
I get this error in the chrome console :
Uncaught TypeError: $(...).tableExport is not a function(anonymous function) # Auto:290jQuery.event.dispatch # jquery-1.10.2.js:5109elemData.handle # jquery-1.10.2.js:4780
I can't understand why. Because it works well when it's not in an event.
To do it, you need a table export plugin.
Add these imports in your page :
<script type="text/javascript" src="tableExport.js">
<script type="text/javascript" src="jquery.base64.js">
//and these if you want export to pdf
<script type="text/javascript" src="jspdf/libs/sprintf.js">
<script type="text/javascript" src="jspdf/jspdf.js">
<script type="text/javascript" src="jspdf/libs/base64.js">
Obviously, replace src paths by where you downloaded it.
I try to display images from an url at a page. But it wont display. I dont know what wrong but I need help from someone.
This is html code. Index.html
<html><head>
<title>Hello World</title>
<style>
.hello {
background:#000000;
background-image:url(http://24.media.tumblr.com/tumblr_l4l2wdQYkw1qayuxao1_500.png);
}
.world {
background:#ffffff;
background-image:url(http://37.media.tumblr.com/tumblr_l41spq8tIq1qz7ywoo1_500.png);
background-repeat:no-repeat;
}
</style>
<script type="text/javascript" src="touch/sencha-touch.js"></script>
<link href="touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="app.js"></script>
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
This is the code for app.js
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
tabBar: {
ui: 'light',
layout: {
pack:'center'
}
},
items: [
{docked:'top', xtype:'toolbar', title:'Hello World'},
{cls:'hello', title:'Hello'},
{cls:'world', title:'World'}
]
});
}
Above is a code that make from this tutorial http://www.sencha.com/learn/taking-sencha-touch-apps-offline/
can any one help me solve this problem. Thank you.
At the bottom of the launch function, add the tabpanel to the viewport. You have created the tabpanel, but it is merely an object in memory at this point. It is not rendered anywhere.
launch: function () {
...
Ext.Viewport.add(this.tabs);
}
I use NestedSortableWidget. I use this scripts:
<script type="text/javascript" src="../../Scripts/jquery-1.js"></script>
<script type="text/javascript" src="../../Scripts/interface-1.js"></script>
<script type="text/javascript" src="../../Scripts/inestedsortable.js"></script>
and
<script type="text/javascript">
jQuery(function($) {
$('#spans-divs-regular').Sortable(
{
accept: 'page-item4',
opacity: 0.8,
helperclass: 'helper',
onChange: function(serialized) {
$('#left-to-right-ser').html("sds:" + serialized[0].hash);
}
}
);
});
</script>
I doesn't need nested items but sortable. I only need to send postback to save items' state. So when I use $('#spans-divs-regular').Sortable onchange doesn't work. But if use $('#spans-divs-regular').NestedSortable onchange works only when I change nesting elements.
Here is my simple html page: source_html. I need your help.
Solution
I solved this problem a long time ago. So I don't remember the solution very well.
But I found my final script:
<script type="text/javascript">
jQuery(function($) {
$('#spans-divs-regular').Sortable(
{
accept: 'page-item4',
opacity: 0.8,
helperclass: 'helper',
onChange: function(serialized) {
$.post('/Persons/PersonViewOrderList?sort', serialized[0].hash + '');
},
autoScroll: true,
handle: '.sort-handle',
fx:300,
revert: true
})
});
</script>