I have a simple MVC proj, using BootStrap4 and dataTables.Net.
Link to DataTables.net It makes an Ajax call after page loads to retrieve data for a table. But as per the Docs I have gone through. I can not get the buttons to display on the page. There are no errors and everything loads as expected only without the Buttons.
It appears to work correcty in Explorer, but not Chrome.
I believe it has to do with the ajax call to retrieve the data but haven't figured it out yet.
The Call on the Layout page to Initialize CSS and JS:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/schit")
Heres the Bundles in the BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/schit").Include(
"~/Scripts/DataTables/media/js/jquery.dataTables.min.js"
,"~/Scripts/DataTables/extensions/Buttons/js/dataTables.buttons.js"
, "~/Scripts/DataTables/extensions/Buttons/js/dataTables.html5.js"
, "~/Scripts/DataTables/extensions/Buttons/js/buttons.print.js"
, "~/Scripts/DataTables/extensions/Buttons/js/buttons.colVis.js"
, "~/Scripts/DataTables/extensions/Buttons/js/buttons.flash.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"
, "~/Content/DataTables/media/css/jquery.dataTables.min.css"
, "~/Content/DataTables/extensions/Buttons/css/buttons.dataTables.css"
));
<table id="ListTable">
<thead>
<tr>
<th>
Center
</th>
<th>
Account
</th>
<th>
Ledger
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<script type="text/javascript">
$(function () {
$('#ListTable').DataTable({
ajax: '/Home/GetStuff',
dataSrc: 'data',
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
text: 'copy'
},
'excel',
'csv',
'pdf'
],
columns: [
{ data: 'Center' },
{ data: 'Account' },
{ data: 'Ledger' }
]
});
});
Posting to help save someone else some time... I have to give credit to DataTables.net they have pretty good support but the documentation can be tricky.
After doing some more digging and with the guidence of the DataTables.Net Forum. Heres what I came up with. I ended up using the DataTables.Net Downloader to Generate all the CSS and Js Files into 2 bundles files with all the features that I was trying to add. So instead of DLing them individually It was just 2 files in the bundles. Heres the Downloader Link
Then the Bundles ended up like this.
bundles.Add(new ScriptBundle("~/bundles/DataTables").Include(
"~/DataTables/dataTables.min.js"
));
bundles.Add(new StyleBundle("~/Content/DataTables").Include(
"~/DataTables/dataTables.min.css"
))
Then on the Layout page or your HTML page where the tables are going to live. include the scripts and content
Place Content in the Head.
#Styles.Render("~/Content/DataTables")
Place the Script before the closing tag
#Scripts.Render("~/bundles/DataTables")
On the page my HTML was pretty much Unchanged. I did add the BootStrap CSS Classes for tables.
<table id="MyTable" class="table table-striped table-bordered table-hover table-condensed" style="width:100%">
<thead>
<tr>
<th>
Center
</th>
<th>
Account
</th>
<th>
Ledger
</th>
</tr>
</thead>
<tbody>
In the Script Section for that page.
Couple things here... the Documentation is kinda scattered but , there are a few different ways to set this up. For example there 'May' be a Ajax section, and the buttons can either be declared directly or instantiated separately with the New constructor.
<script type="text/javascript">
$(function () {
var table = $('#MyTable').DataTable({
ajax: {
url: 'Ajax Call for data',
dataSrc: 'data'
},
columns: [
{ data: 'Center' },
{ data: 'Account' },
{ data: 'Ledger' }
]
});
new $.fn.dataTable.Buttons( table, {
buttons: [
'copy', 'excel', 'pdf'
]
});
table.buttons( 0, null ).container().prependTo(
table.table().container()
);
});
</script>
Related
I am working on application with spring boot front-end in angular js, html. The application contains many angular JS tables. Now we have requirement to apply freezing of header (first row) and first column in the table.
We have tried many solution to freeze both of them together in one table, but in some cases only header get freeze in other cases only columns are.
We have tried to fix header :
https://github.com/daniel-nagy/fixed-table-header/blob/master/README.md
https://github.com/cornflourblue/angu-fixed-header-table
To freeze column, I tried :
<td style="position:absolute;width:50px; left:0;"> : http://jsfiddle.net/dkeo1mLh/
Only one work at a time, but I need header and column freeze working at same time.
Sample angular js table is :
example.js
angular.module('plunker', ['ui.bootstrap']);
function ListCtrl($scope, $dialog) {
$scope.items = [
{name: 'foo', value: 'foo value'},
{name: 'bar', value: 'bar value'},
{name: 'baz', value: 'baz value'}
];
}
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ListCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Name1</th>
<th>Value1</th>
<th>Name2</th>
<th>Value2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}}1</td>
<td>{{item.value}}1</td>
<td>{{item.name}}2</td>
<td>{{item.value}}2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Can anyone suggest any solution for angular js table that help in freezing header and column ? CSS solution tried but table format looks not proper, so needed solution in js or angular js.
I want to populate a datatable from a php call in my $(document).ready function, but I don't want to configure the table for server side processing (I want subsequent sorting/filtering/sorting to happen client side). Below is my current code. Note: I ran the php On the server and pasted the output into a text file. If I use the path to the text file as my url, I get the intended result. So I think that datatables is trying to read my php file as json, and, of course failing. How do I get it to use the output from the php file instead of the php file itself?
Code:
<html>
<head>
<title>NCompass Failed Fax Monitor</title>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#faxList').DataTable({
ajax: {
url: 'php/Data.php',
dataSrc: 'transactions'
},
columns: [
{ data: 'PROCESS_DATE' },
{ data: 'PROCESS_STATUS' },
{ data: 'PDF_FILE_NAME' },
{ data: 'REF_ID' },
{ data: 'ADDITIONAL_INFO' }
]
});
});
</script>
</head>
<body>
<h2>NCompass Failed Fax Monitor</h2>
<br>
<table width="100%" class="display" cellspacing="0" id="faxList">
<thead>
<tr>
<th>Process Date</th>
<th>Status</th>
<th>PDF File</th>
<th>Reference ID</th>
<th>Error Description</th>
</tr>
</thead>
</table>
</body>
</html>
I am new in jquery and I don't know very much about it but I have been trying to generate Excel and PDF from HTML using jquery. For that I use following code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Assignment to generate excel</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="~/Contents/jquery-1.9.1.js"></script>
<script src="~/tableExport/tableExport.js"></script> <!-- #*Main file which does export feature *# -->
<script src="~/tableExport/jquery.base64.js"></script> <!-- #*Main file which does convert the content to base64 *# -->
<script src="~/tableExport/html2canvas.js"></script> <!-- #*Main file which does export to image feature *# -->
<script src="~/tableExport/jspdf/libs/base64.js"></script> <!-- #*Main file which does convert the content to base64 for pdf *# -->
<script src="~/tableExport/jspdf/libs/sprintf.js"></script> <!-- #*Main file which does export feature for pdf *# -->
<script src="~/tableExport/jspdf/jspdf.js"></script> <!-- #*Main file which does export feature for pdf *# -->
</head>
<body>
<table id="activity" border="1" width="50%" >
<tr>
<th>Country</th>
<th>Population</th>
<th>Date</th>
<th>%ge</th>
</tr>
<tr>
<td>Chinna</td>
<td>1,363,480,000</td>
<td>March 24, 2014</td>
<td>19.1</td>
</tr>
<tr>
<td>India</td>
<td>1,241,900,000</td>
<td>March 24, 2014</td>
<td>17.4</td>
</tr>
<tr>
<td>United States</td>
<td>317,746,000</td>
<td>March 24, 2014</td>
<td>4.44</td>
</tr>
<tr>
<td>Indonesia</td>
<td>249,866,000</td>
<td>July 1, 2013</td>
<td>3.49</td>
</tr>
<tr>
<td>Brazil</td>
<td>201,032,714</td>
<td>July 1, 2013</td>
<td>2.81</td>
</tr>
</table>
onClick ="$('#activity').tableExport({type:'pdf',escape:'false'});"
<script>
$(document).ready(function () {
$('#exportexcel').bind('click', function (e) {
$('#activity').tableExport({ type: 'excel', escape: 'false' });
});
$('#exportpdf').bind('click', function (e) {
$('#activity').tableExport({ type: 'pdf', escape: 'false' });
});
$('#exportimage').bind('click', function (e) {
$('#activity').tableExport({ type: 'png', escape: 'false' });
});
$('#exportcsv').bind('click', function (e) {
$('#activity').tableExport({ type: 'csv', escape: 'false' });
});
$('#exportppt').bind('click', function (e) {
$('#activity').tableExport({ type: 'powerpoint', escape: 'false' });
});
$('#exportxml').bind('click', function (e) {
$('#activity').tableExport({ type: 'xml', escape: 'false' });
});
$('#exportword').bind('click', function (e) {
$('#activity').tableExport({ type: 'doc', escape: 'false' });
});
$('#exporttxt').bind('click', function (e) {
$('#activity').tableExport({ type: 'txt', escape: 'false' });
});
});
</script>
</body>
</html>
But when I run this code in browser then I get following output
I don't have idea how to use onClick event on this case so when I click on export excel or export PDF button I generate this files.
If anybody have idea about it then please help me.
Thanks in advance.
onclick is a HTML attribute that needs to go with an element's tag, like border or id on your table tag. When the element that it is applied to is clicked, the code inside it runs.
To achieve what you want, you need to add a button and put the onclick attribute on that button, like this:
<button onclick="$('#activity').tableExport({type:'pdf',escape:'false'});">Export</button>
This method produces output which looks like this:
The other way to do this (and the way it would usually be done) is using jQuery's on function inside a script tag. To do this, put the following at the bottom of your $(document).ready callback:
$("button").on("click", function() {
$('#activity').tableExport({type:'pdf',escape:'false'});
});
I am trying to paginate a table which has 500 entries, with 10 entries per page.
To implement this I came across a GitHub page.
But it did not work. I would like to know what I am missing here.
Also my code ,
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title> Pagination example </title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
<body ng-controller="PageDetails as pg">
<table dir-paginate="comments in pg.comment | itemsPerPage: 10" >
<thead>
<tr>
<th>POST_ID</th>
<th>ID</th>
<th>NAME</th>
<th>EMAIL</th>
<th>BODY</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="comments in pg.comment">
<td>{{comments.postId}}</td>
<td>{{comments.id}}</td>
<td>{{comments.name}}</td>
<td>{{comments.email}}</td>
<td>{{comments.body}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls></dir-pagination-controls>
</body>
</html>
script.js
(function() {
angular.module('plunker', []);
angular.module('plunker').controller('PageDetails', PageFn);
function PageFn($http) {
var pg = this;
pg.comment = [];
details();
function details() {
$http({
method: 'GET',
url: 'http://jsonplaceholder.typicode.com/comments'
}).success(function(data, status) {
console.log(data);
pg.comment = data;
}).error(function(data, status) {
console.log(data);
});
}
pg.add = function() {
pg.newComment.id = pg.comment[pg.comment.length - 1].id + 1;
pg.comment.push(pg.newComment);
pg.newComment = null;
};
}
})();
Firstly download the dirPagination.js from here.
Include the dirPagination.js file on your page like :
<script src="~/Content/dirPagination.js"></script>
After that add dir-paginate directive for pagination in script
file.code given below :
angular.module('plunker', ['angularUtils.directives.dirPagination']);
Then in tr tag add given line of code :
<tr dir-paginate="comments in
pg.comment|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
Then add pagination control in your HTML page for putting buttons of First,Next,Previous and Last.Code given below :
<dir-pagination-controls
max-size="10"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
If you study the demo on the page of angularUtils, you can see that they use:
1) include file with the library in html:
<script src="dirPagination.js"></script>
2) angular utility library is included as a dependancy in the application, see in script.js
var myApp = angular.module('myApp', ['angularUtils.directivses.dirPagination']);
So you need to add those 2 things in your app file to make pagination to work.
change
<table dir-paginate="comments in pg.comment | itemsPerPage: 10" >
to
<table>
then change
<tr ng-repeat="comments in pg.comment">
to
<tr dir-paginate="comments in pg.comment | itemsPerPage: 10" >
I'm having trouble accessing a declaratively created datagrid by ID, so that I can set its datastore.
Here's my code, but tree is coming back as undefined.
Thanks in advance for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: true"></script>
</head>
<body>
<table data-dojo-id="myTree" dataType="dojox.grid.TreeGrid" summary="This is a test">
<thead>
<tr>
<th field="a" width="200px">A</th>
<th field="items" aggregate="sum" itemAggregates="count">
<table>
<thead>
<tr>
<th field="name" width="200px">Name</th>
<th field="count" width="200px">Count</th>
</tr>
</thead>
</table>
</th>
</tr>
</thead>
</table>
</body>
<script>
require(["dijit/registry", "dojo/data/ItemFileReadStore"], function( Registry, ReadStore ) {
var store = new ReadStore();
var tree = Registry.byId("myTree");
console.log(tree);
// tree.setStore( store );
});
</script>
</html>
Your code has several issues leading to your problem.
dataType is not a thing; you want data-dojo-type (you're probably confusing it with the deprecated dojoType)
Setting data-dojo-id creates a global variable, not an ID for Dijit's registry; set id instead
You're never actually running dojo/parser on the document, either, so even with these issues addressed, you won't end up with an actual widget
Here is a fixed example:
<body>
<table id="myTree" data-dojo-type="dojox/grid/TreeGrid" summary="This is a test">
...
</table>
</body>
<script>
require([
"dojo/parser",
"dijit/registry",
"dojo/data/ItemFileReadStore",
"dojox/grid/TreeGrid"
], function(parser, registry, ReadStore) {
parser.parse();
//var store = new ReadStore(...);
var tree = registry.byId("myTree");
console.log(tree);
// tree.setStore( store );
});
</script>