I'm a very new programmer with no experience with tabletools or swf paths whatsoever. I'm trying to implement Table Tools to print/export/etc but so far only print is working for me. Most solutions have said that means the swf path is incorrect. But I have no idea what to put as my swf path. Could anybody please help? Sorry for such a basic question. :(
Here are my plugins and script for dataTables:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css" />
<script>
$(document).ready(function () {
$('#table_id').DataTable({
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
});
});
</script>
You can browse tabletools files available for cdn here: datatable tabletools plugin files
by visiting the link you will find version list, click one for example 2.2.2
so scroll down to the bottom and see magic:
swf
//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls.swf
//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf
Related
I would like to know if someone could help me with a responsive Datatable that I have been creating for a website. I have been creating it with Bootstrap 4. I am going to show the code of the head of the website here, because I guess that the mistake is there, since the Datatable itself is fine, and only the search box, the pages buttons and the entries option are totally out of the place where they should be. So I would like some help specifically with those elements. Could you see if there are any problems with the:
Search box
Page buttons
Options
If you see any other mistake in my "head" code and you would like to tell me about it, I would appreciate it. Thank you all.
<!DOCTYPE html>
<html lang="cz">
<head>
<title> Semestrální projekt (měnit)</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 3000
})
});
</script>
<script>
$(document).ready(function() {
$('#tabulka').DataTable();
} );
</script>
<script src="DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="DataTables-1.10.18/js/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="css/styl2.css" type="text/css">
</head>
I am answering my own question, since I have already solved it by myself, and I suppose it may help other people.
The problem why the Datatable was not working (displaying) properly was really due to the "head" code that was formatted wrongly.
The code should be formatted like this:
<!DOCTYPE html>
<html lang="cz">
<head>
<title>Semestrální projekt</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.carousel').carousel({
interval: 3000
})
});
</script>
<script src="DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function()
{
$('#tabulka').DataTable();
});
</script>
<script src="DataTables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap4.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="css/styl.css" type="text/css">
</head>
The mistake was simply that the version of the Bootstrap that was being using to create the responsive Datable was not specified in the code. If you look at the "head" code in the question, the Javascript and CSS files of the Datatable are included in it, but for a "general Bootstrap" (say it). Like this:
<script src="DataTables-1.10.18/js/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap.css" type="text/css">
While if you look at the "head" code here in the answer, the version of the Bootstrap that was being using is already specified, which was the Bootstrap 4. See the specific part of the code below:
<script src="DataTables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap4.min.css" type="text/css">
In this case, this solved the problem. If you use the Bootstrap 4, and you have a similar problem, try this solution.
Besides that, in the "head" code in the question, there are two "jquery" files, which is not necessary. In the answer here, you may see that there is only one (the jquery 3.3.1), the javascript and CSS files of Bootstrap, and the javascript and CSS of the Datatable (specifying the version of the Bootstrap that was being used to create the Datatable, which is the version 4).
I am developing a Chrome Extension. I tried the below code for datepicker. But it is not working in extension file. Successfully working in a normal html file.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display inline</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Date: <div id="datepicker"></div>
</body>
</html>
Im trying to do the same thing the first thing is that you cant have script in your html file you have to get it from a .js file.
as its not allowed to be written in .html for chrome extension
I have already an exsisting html file which use another librairies and stuff, I want to use in my new ionic application.
So I would like to use it as an ion-view. so I would like to know if it would be possible to include an html file in the ion-view ? which look like :
<ion-view>
<io-content>
</ion-view>
</ion-content>
this is the existing HMTL file where I use different libraries and css file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./assets/js/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/ofc.css" rel="stylesheet" type="text/css" />
<script src="./assets/js/jquery-1.7.1.min.js"></script>
<script src="./assets/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="pouchdb-3.4.0.min.js"> </script>
<script type="text/javascript" src="blob-util.min.js"> </script>
<script type="text/javascript" src="moment.js"> </script>
<script src="properties.js"> </script>
</head>
<body>
<div data-role="page" id="p1">
</div>
<script src="core.js"></script>
</body>
</html>
Why would you do this? I believe this question comes from a problem you haven't described yet.
Normally all libraries used in an Ionic app are included in the index.html and not within each <ion-view> or <ion-content>. In these Ionic directives you only load the HTML needed for that view.
I suggest you start reading from the beginning:
Getting Started with Ionic
Ionic documentation
CodePen examples Ionic
Is there a way to have Webpack scan Javascript files for require("file.js") and require("file.css") and insert <script type="text/javascript"> and <link rel="stylesheet"> (respectively) to any HTML file that includes the root Javascript file?
For example. Given:
Main.html
<html>
<head>
<script type="text/javascript" src="main.js"></script>
[...]
Main.js
require("./login.js");
require("./login.css");
I expect to get this output:
Main.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css"/>
<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="main.js"></script>
[...]
Bonus points: ability to require("login.scss") and end up with <link rel="stylesheet" type="text/css" href="login.css"/> (meaning, take into consideration the fact that SCSS files will get converted to CSS).
According to the author of Webpack, this feature does not exist yet.
I have filed this feature request: https://github.com/webpack/webpack/issues/754
i have created a little python script that allows me to import files(.js, .css, .younameit) from a directory to the html.
before:
<html>
<head>
<!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
</head>
after:
<html>
<head>
<script src="../tsc_out/script1.js"></script>
<script src="../tsc_out/script2.js"></script>
<script src="../tsc_out/script3.js"></script>
<script src="../tsc_out/script4.js"></script>
<script src="../tsc_out/script5.js"></script>
</head>
https://github.com/seven-jerry/html-importer
I use Pure CSS to make my website responsive, but when this site runs on my own computer, it looks fine:
But after I uploaded it to my remote server, it's like too far from right border of the window:
I've debugged the site on both servers with iPhone Safari remote debugger, I'm sure every CSS and Javascript source was loaded correctly. Here's my index.html page:
<!doctype html>
<html lang="en" ng-app="martianblog">
<head>
<title>{{.Title}}|{{.Subtitle}}</title>
<meta name="viewport" content="width=device-width" initial-scale=1.0>
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/pure/0.3.0/pure-min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/lib/notification.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/highlight.js/7.4/styles/monokai_sublime.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/custom.css">
</head>
<body>
<div notifications="bottom right"></div>
<div class="pure-u-1" ui-view></div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/moment.js/2.4.0/moment.min.js"></script>
<script type="text/javascript" src="/static/js/lib/highlight.pack.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/marked/0.2.9/marked.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/angular.js/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="/static/js/lib/angular-sanitize.min.js"> </script>
<script type="text/javascript" src="http://cdn.staticfile.org/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/static/js/app.js"></script>
<script type="text/javascript" src="/static/js/controllers.js"></script>
<script type="text/javascript" src="/static/js/filters.js"></script>
<script type="text/javascript" src="/static/js/directives.js"></script>
<script type="text/javascript" src="/static/js/lib/notification.js"></script>
</body>
</html>
Here's my custom css file's link
My computer's system: Mac OS X Mavericks
My remote server's system: Ubuntu 12.04 GNU/Linux 3.2.0-24-virtual i686
Nginx version on my remote server: nginx/1.1.19
As others have mentioned, very difficult to suggest anything without at least a link to your css file(s).
Some things to check: html doctype declaration, browser cache, file encoding types, any fixed widths that may have been set in your CSS....... Perhaps you have uploaded a file that has a capital letter in its filename? May not be an issue locally, but could be an issue on your server.
edit: I have checked out your site and it looks full width to me, are you sure you have fully cleared your cache?
Your viewport is currently set to:
<meta name="viewport" content="width=device-width" initial-scale=1.0>
Perhaps this should be:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />