I am using to use Datatables to display reports and records. But I am having an issue where the file export buttons and the pagination at the bottom are only showing as links not as buttons.
Here is a screenshot of my screen
This is what I have loaded in my page
<link href="/Vendor/bootstrap/v3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/bootstrap/v3.3.6/js/bootstrap.min.js"></script>
<link href="/Vendor/datatables/v1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/datatables/v1.10.12/js/jquery.dataTables.min.js"></script>
<link href="/Vendor/datatables/v1.10.12/extensions/Buttons/css/buttons.bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.flash.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/JSZip/jszip.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/pdfmake/build/pdfmake.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/pdfmake/build/vfs_fonts.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.html5.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.print.min.js"></script>
Note, that I only want to use the datatable with bootstrap style.
Here is the code that I use to setup the datatable.
$('#reportTable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
columns: [
{ data: 'Category', title: 'Category' },
{ data: 'Svp', title: 'SVP' },
{ data: 'Rvp', title: 'RVP' },
{ data: 'Division', title: 'Division' },
{ data: 'ContactType', title: 'Contact Type' },
{ data: 'TotalRecords', title: 'Total Records' },
]
});
What am I missing here? How can I fix this issue
UPDATED
I fixed the Export buttons but including the following file
Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.bootstrap.min.js
The only open issue now is the pages at the bottom
You are missing the dataTables.bootstrap.min.js script file include. If you downloaded these files from the official DataTables download page and the file path of the other files can be extrapolated to this one, I'd take a look and see if it exists here:
Vendor/datatables/v1.10.12/js/dataTables.boostrap.min.js
If it doesn't you may have to go back to the download page and make sure you get this script file.
Related
I am using jQuery QueryBuilder plugin. I initiated my queryBuilder then used SQL Parser to set a rule from SQL.
After, I want to set my queryBuilder to read-only which means the queryBuilder will be disabled. You won't be able to add other rules or change the current rule.
Based on documentation, it should be as this but couldn't make it work.
$('#queryBuilder').queryBuilder('setRulesFromSQL', { flags: {
filter_readonly: true,
operator_readonly: true,
value_readonly: true,
no_delete: true },
rules: ["name in ('Alex','Adam')"] });
Any suggestions please what am I doing wrong ? Thank you very much.
$(document).ready(function() {
$('#queryBuilder').queryBuilder({
filters: [
{ id: 'name',
label: 'Name',
type: 'string',
value_separator: ',',
operators: ['in']
}
]
});
// here I set the rule from sql query without ready only feature and it works fine
$('#queryBuilder').queryBuilder('setRulesFromSQL', "name in ('Alex','Adam')");
//Here I want to update the previous method to include read only feature.
//There will be only that rule and you can't change it.
//I couldn't make it work although I believe I did write the correct syntax
$('#queryBuilder').queryBuilder('setRulesFromSQL', { flags: {
filter_readonly: true,
operator_readonly: true,
value_readonly: true,
no_delete: true },
rules: ["name in ('Alex','Adam')"]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder#2.5.2/dist/css/query-builder.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder#2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>
<div id="queryBuilder"></div>
Flags at rule level works for me
https://querybuilder.js.org/#methods
Hopes that helps
When I try to create a BarChart in js view tab, it gives me this error.
Here is my html code
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<link rel="stylesheet" type="text/css" href="Styles/MainPage.css"/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.viz"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("empcrud");
//sap.ui.localResources("Styles");
var app = new sap.m.App("AppId", { initialPage: "idEMainPage1" });
var page = sap.ui.view({ id: "idEmpDetails1", viewName: "empcrud.EmpDetails", type: sap.ui.core.mvc.ViewType.JS });
var page1 = sap.ui.view({ id: "idEMainPage1", viewName: "empcrud.MainPage", type: sap.ui.core.mvc.ViewType.JS });
var page2 = sap.ui.view({ id: "idGrafPage1", viewName: "empcrud.Grafik", type: sap.ui.core.mvc.ViewType.JS });
app.addPage(page).addPage(page1).addPage(page2);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
And here is my view code where I use sap.viz.ui5
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [
{
axis: 1,
name: 'Uname',
value: "{Uname}"
}
],
measures: [
{
name: 'Modno',
value: '{Modno}'
},
],
data: {
path: "/results"
}
});
var oBarChart = new sap.viz.ui5.Bar({
width: "80%",
height: "400px",
plotArea: {
//'colorPalette' : d3.scale.category20().range()
},
title: {
visible: true,
text: 'Modno Grafiği'
},
dataset: oDataset
});
When I try to paste my view code in html script its works fine, also with xml view it works. I think its about the connection between js view and html. However view can not see sap.viz.Is there a way to define sap.viz in js or how can I overcome that?
Thanks.
The problem is about sapui lib, just add online core library and just works fine.
"https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
I am trying to get a click to open editable content of my dyniamically generated rows in modals, using datatables plugin.
I see an error:
Uncaught TypeError: Cannot read property 'display' of undefined.
I am using the following files apart from jquery and bootstrap.min.js:
<!-- Datatables -> these files are required to make the table headers fixed, sortable etc-->
<link href="../../../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="../../../vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
My code where I initialize my datatable looks like this:
dtEdit = $('#edit-element').DataTable({
"paging": false,
"info": false,
"bFilter": false,
"bPaginate": false,
retrieve: true,
"processing": true,
columns: [{
'data': 'status'
},
{
'data': '_id'
},
{
'data': 'email'
},
{
'data': 'role'
},
],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function ( row ) {
var data = row.data();
return 'Details for '+data[0]+' '+data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
}
});
Any pointers please?
P.S. -> I am trying to achieve something like this:
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html
To fulfill your requirement you should follow the given steps.
1. $(document).ready(function () );i.e. Use jquery DOM when the document is ready.
2. $('.my_button').click(function () );i.e. When you click your button modal should be loaded.
3. $('#mydatatable').DataTable(); i.e. Load the datatable at last inside the body of $(document).ready(function ());
$(document).ready(function ()
{
//When the button is clicked
$('.my_button').click(function () {
//Your code for modal
});<br>
$('#mydatatable').DataTable();
});
I want to present a pie chat, the data came from csv file (excel).
I have html file (index.html) and js file (loadData2.js),
when I print the data in js file I get It like : word,number
donald,8
trump,12
refused ,2
to,7
release ,3
his,6
so I see the data ok.
one field is a word and the other is a number.
I get an error: "Uncaught TypeError: $(...).CanvasJSChart is not a function(…)"
my html code:
<!DOCTYPE html>
<html>
<head>
<title>hw 1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="includes/loadData2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="canvas/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
<script>
(function(){
getData2();
})();
</script>
</div>
</body>
</html>
my js code:
function getData2()
{
console.log("hello");
$.get('data/words.csv', function(data) {
console.log(data);
//Better to construct options first and then pass it as a parameter
var options = {
exportEnabled: true,
animationEnabled: true,
title: {
text: "Exporting Chart as Image"
},
data: [
{
type: "splineArea", //change it to line, area, bar, pie, etc
dataPoints: [data]
}
]
};
$("#chartContainer").CanvasJS.Chart(options);
});
}
what I need to do to in order to see my chart on the screen?
Thanks,
You are including CanvasJs, and trying to use its jQuery plugin.
replace <script src="canvas/canvasjs.min.js"></script> by the right file and it'll work.
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>
To create a Chart using the regular library would go like this :
var options = {
exportEnabled: true,
animationEnabled: true,
title: {
text: "Exporting Chart as Image"
},
data: [
{
type: "splineArea", //change it to line, area, bar, pie, etc
dataPoints: [data]
}
]
};
var chart = new CanvasJS.Chart("chartContainer",options);
chart.render
In ExtJs 5.1 it is possible to create an Ext.tree.Panel from a Json-object given that the Json-object uses the named values root and children to declare the nesting, for example:
<!-- Example 1 -->
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript">
Ext.onReady(function(){
var normal_store = {
root:{
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
};
console.log(normal_store);
var tree_panel_1 = Ext.create('Ext.tree.Panel', {
title: 'tree_panel_1',
store: normal_store,
rootVisible: true,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
Lets say that I create a string-variable from a xml-file.
Then from the string-variable I create a Json-object.
The only thing I know in advance about the xml-file is, that it is valid xml, but nothing else like tag-names and attributes etc..
I can go from the xml-file to string-variable by using Jquery.
Likewise I can go from string-variable to Json-object by using the Xml-To-Json Library.
Having this Json-Object I have tried to populate an Ext.tree.Panel in a similar fashion as in example 1:
<!-- Example 2 -->
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<!-- jquery and jsonToXml imports -->
<script type="text/javascript" language="javascript" src="/jquery/jquery-1.11.3.js"></script>
<script src="/xmlToJson/jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script type ="text/javascript">
Ext.onReady(function(){
//i only know that it is valid xml, but nothing about how many tag types, names, attributes etc.
var xml = $.ajax({type: "GET", url: "path/to/varying.xml", async: false}).responseText;
var json = $.xml2json(xml);
console.log(json);
var tree_panel_1 = Ext.create('Ext.tree.Panel', {
title: 'tree_panel_1',
store: json,
rootVisible: true,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
But, it doesn't show the xml as a tree. I also know why:
ExtJs can only generate such a tree if the Json-object uses the named values root and children to identify the nesting level of the tree which is being produced.
So my questions are:
Question 1: Does anyone know wether it is possible to create trees from general Json-objects in ExtJs using Ext-capabilities like Json-Reader etc. pp.?
If Question 1 is negative: Do I have to write the iteration logic over the Json-object and build the Json-object with the proper named values root and children myself to pass them as a store?
All you need is to convert the result of $.xml2json(xml) (i.e. what you call "general" JSON-object) to JSON object that Ext.tree.Panel can understand — a JSON object with root, children etc. The actual implementation will depend on how your "general" JSON obtained from XML looks like. It will be just a matter of iterating over it and building new JSON. This can be implemented in a custom reader.