which JS and CSS files to use
which JS and CSS files to use
weaVaer
Posts: 2Questions: 1Answers: 0
I'm trying to implement an example of Editor using options : jQuery styling, serverSide, inline-editing, select, buttons and responsive.
These options have different examples on https://editor.datatables.net/examples/ so after some hard work and deep digging on forums, I managed to combine the code options from those examples and succeed in fetching/displaying/editing data.
Wanna comment at this point that DataTables & Editor is an awesome piece of work & engineering despite its a bit steep learning curve. Documentation really helps.
Back to the problem;
with my good working example utilizing said options has some 'responsiveness' display issues so working on that but I'm a bit confused about ;
{which JS and CSS files to properly include in index.php of my web app}
and/or
{if my current setup has some conflicts in that aspect}
and/or
{if I'm missing anything}
I'd be the most happiest if anyone can shed some light on my dilemma.
Thanks in advance
Currently I'm using
DataTables-1.10.15 & Editor-PHP-1.6.3 (trial)
http://debug.datatables.net/uhebus
and my setup is in my index.php is ;
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1" />
<!-- files for the app/JQuery -->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.1.11.4.overcast.css">
<!-- files for DataTables -->
<link rel="stylesheet" type="text/css" href="css/dataTables.jqueryui.min.css">
<link rel="stylesheet" type="text/css" href="css/responsive.jqueryui.min.css">
<link rel="stylesheet" type="text/css" href="css/buttons.jqueryui.min.css">
<link rel="stylesheet" type="text/css" href="css/select.jqueryui.min.css">
<link rel="stylesheet" type="text/css" href="css/editor.jqueryui.min.css">
<!-- files for the app -->
<link rel="stylesheet" type="text/css" href="css/docscommon.css">
<link rel="stylesheet" type="text/css" href="css/popup.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- files for the app/JQuery -->
<script src="scr/jquery-3.2.1.min.js"></script>
<script src="scr/jquery-ui.1.12.1.min.js"></script>
<script src="scr/jquery.color-2.1.2.min.js"></script>
<!-- files for DataTables -->
<script src="scr/jquery.dataTables.min.js"></script>
<script src="scr/dataTables.responsive.min.js"></script> <!-- ? -->
<script src="scr/responsive.jqueryui.min.js"></script> <!-- ? -->
<script src="scr/dataTables.jqueryui.min.js"></script>
<script src="scr/dataTables.buttons.min.js"></script>
<script src="scr/buttons.jqueryui.min.js"></script>
<script src="scr/dataTables.select.min.js"></script>
<script src="scr/dataTables.editor.min.js"></script>
<script src="scr/editor.jqueryui.min.js"></script>
<!-- files for the app -->
<script src="scr/jquery.popup.min.js"></script>
<script src="scr/docscommon.js"></script>
<script src="scr/main.js"></script>
....
This question has accepted answers - jump to:
Answers
Hi,
I'd very much suggest using the download builder. That will give you the exact files and include HTML to use for DataTables, Editor and any other extensions you select.
Allan
Thx for the quick response.
I understand but there isn't an example combined like I do.
I'm gonna try the download builder, ok.
but at least please tell me about this specific question;
I want Editor + jQuery styling + Responsive.
Should I use
dataTables.responsive.min.js
or
responsive.jqueryui.min.js
or
both
?
The reason I ask is, logically it should be responsive.jqueryui.min.js but if I use it alone without including dataTables.responsive.min.js then I got js errrors on my console like
TypeError: a.Responsive is undefined [responsive.jquery.ui.min.js:5:451]
without even creating any dataTable, at first load of the main page.
I am confused.
Do I need to use both ?
Do I need to use responsive.jqueryui.min.js at all ?
Maybe this page about styling will help clarify what is needed:
https://datatables.net/manual/styling/jqueryui
Kevin
The download builder will resolve those questions for you @weaVaer. I wrote it for exactly this sort of thing!
Allan