Following https://www.datatables.net/manual/styling/bootstrap-simple.html, it doesn't include the original datatables css.
If I remove the script in the source:
(From the comment it reads like not important?)
<script type="text/javascript">
// For demo to fit into DataTables site builder...
$('#example')
.removeClass( 'display' )
.addClass('table table-striped table-bordered');
</script>
There will be no styling to the table, see https://jsfiddle.net/gLrf9o8t/
It appears that the demo is cheating... Does it mean all datatables style classes become useless if I don't include the original css file?
However if I include the orginal css back in, the paging bar looks very weird, see https://jsfiddle.net/r45f6dt6/
If you're using the DataTables.Bootstrap CSS, you also need to manually apply Bootstrap classes to the table. You cannot change those classes after DataTables has been initialized as you are with the script above because they will not be applied to the DataTables grid. If you must change classes programmatically, init DataTables as a callback on that function.
<table id="example" class="table table-striped table-bordered" ... >
Demo
Note that I've removed the base DataTables CSS link.
Related
I'm trying to make use of the #extend of sass so that I don't mix markup and html together. As explained in this article.
In short, instead of writing
<div class="alert alert-primary>This is an alert!</div>
You'd instead write something like
<div class="banner">This is an alert!</div>
.banner {
#extend .alert;
#extend .alert-primary;
}
Such that styling and content stay nicely separated.
The problem: When using this with webpack (sass-loader) and components (e.g. Vue.js or Angular), I run into a problem where including a bootstrap partial will now result in the complete compilation of the entire bootstrap file into css.
This results into a class .btn[data-v-3614b62c] and another .btn[data-v-45ac961c] etc. for every component that uses the partial bootstrap/scss/_buttons.scss and that for all classes defined in that partial.
Even if I don't use it.
In the long run, this will be detrimental for the application since its size will increase rapidly and I image the browser will slow down with that many css classes to parse.
The question(s): How do I make sure sass doesn't duplicate the entire imported partial?
Can I enable some kind of tree shaking where it only includes the classes I use?
Do I have to change my file structure so that sass understands I only need certain classes inside the partial rather than everything?
Code example
This is a vue component using bootstrap
<template>
<form class="form">
<input type="text" class="input">
<button class="button-submit">Send</button>
<button class="button-cancel">Cancel</button>
</form>
</template>
<style lang="scss" scoped>
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
#import "node_modules/bootstrap/scss/root";
#import "node_modules/bootstrap/scss/buttons";
.form {
.button-submit {
#extend .btn;
#extend .btn-primary;
}
.button-cancel {
#extend .btn;
#extend .btn-danger;
}
}
</style>
This will result in the entire partial _buttons.scss to be compiled into css instead of only .form .button-submit and .form .button-cancel.
Live example
https://codesandbox.io/embed/musing-feynman-8w2kx.
To see the problem I have:
Right click on the example to the right and click Inspect
In the Elements tab, navigate to #document > html > head
At the bottom you'll have several style elements
Two of them will contain all the button css where only the [data-v-######] attribute is different and at the end are my couple of lines code.
Note that the same happens for production builds. The css is then simply bundled up in a single file, but duplicates are still around.
If you are #importing the same CSS rules into different components, then you will get the same rules duplicated across all modules. That's just how it works.
You should only be #importing modules that define abstract declarations like variables, mixins, functions, etc, not actual styles.
The only way you can de-duplicate the styles globally is if you use something like mini-css-extract-plugin to extract and combine all the CSS into a single file and then run it through something like cssnano which will discard duplicate rules (although with scoped CSS, this probably won't work).
Modules are typically built independently of other modules and there isn't a simple way to know if a rule has been declared already by a previous module. In development you may be using style-loader which operates on a per-module basis and injects styles into the webpage on demand; there's just no way it can work out which styles should be injected in case some particular style has already been injected by another component.
It just gets messy; keep it simple by not duplicating styles in the first place.
If you really want to use #extend, then make a separate .scss file which is the only module that #imports the bootstrap styles, and define all your extensions in there.
I am trying to inject vue tags dynamically using v-html. However, it does not render as expected. I have attached a link to a jsFiddle example, where I try to add a v-icon via v-html. Instead of the tag being correctly injected, it strips the tags away and only renders the content inbetween.
Example:
The following code works fine, but it is not dynamic. What If I want other html tag(s) beside v-icon?
<table>
<tr>
<td><v-icon>mdi-car-side</v-icon></td>
The following code does not work, but is dynamic. It just places the icon name on the screen, and strips away the tags.
<table>
<tr>
<td v-html="dynamicData"></td>
https://jsfiddle.net/cgbwe31t/1/
I have read the blurb here https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML about 'Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine', but I'm not sure that applies in this case.
In case anyone was wondering, the best solution is to use v-slot to insert any html you want.
I have jquery datatable, and I know there is a "responsive" plugin to it, but I dont like the behavior as much as the bootstrap table-responsive class.
I should be able to just wrap my jquery datatable in a div with this class, but that doesn't seem to work for me. I basically want the table to scroll horizontal when too big.
I have tried wrapping the table in a div, that didn't work.
I have tried setting the class of the div that gets generated from the datatable, that didnt seem to have any effect either.
For those of you not familiar, bootstrap responsive tables scroll (see here):
http://getbootstrap.com/css/#tables-responsive
Jquery datatables responsive plugin, folds the table into a plus/minus (very elegant in some cases, but not mine)
https://datatables.net/extensions/responsive/
Try adding <div class="table-responsive"></div> container after the table has been initialized, see the sample code below:
$('#example').DataTable({
"initComplete": function(settings, json){
$('#example').wrap('<div class="table-responsive"></div>');
}
});
The reason <div class="table-responsive"> didn't work because <table> has to be direct child of <div class="table-responsive">, but DataTables changes hierarchy and the styles no longer apply.
Alternativelly, there is scrollX option that seems to be doing the same.
$('#example').DataTable({
'scrollX': true
});
See this JSFiddle for demonstration.
Hy guys!
On my site I noticed that on some pages I don't have a Jquery library included. But on other pages I see it in my head tag:
<head>
...
<script type="text/javascript" src="/assets/fe9bd624/jquery.js"></script>
<script type="text/javascript" src="/assets/fe9bd624/jquery.ba-bbq.js"></script>
...
</head>
In my theme layout/main.php I don't have Jquery files in head tag. So question is: what controls inserting Jquery on my pages, and how to insert it on all pages. Thx.
jQuery would only be inserted automatically if you call the registerCoreScript method. There's nothing built into Yii to force jQuery upon you.
However, it could be that your using a widget or extension somewhere that uses jQuery, which would make it's own call to the registerCoreScript. (CGridView for example)
If you use any widget or component or extension which needs jquery & using function registerCoreScript than jquery will be loaded automatically otherwise YII does not load any JQuery.
In every view that requires jquery you can put this on top:
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
You can put it into your layout also if you want to include in all pages in a particular layout.
I am using the no configuration option and have taken the following steps:
put the js files into root/public/javascripts
put the image files into root/public/images
put the demo css files into root/public/stylesheets
put css call in the head section of my layout file
<%= stylesheet_link_tag "demo_table", :media => "all" %>
put the initialization script in the head section of my layout file:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script >
first line of my table layout is:
<table width="100%" style="border-collapse:collapse; " id="example">
I restarted my server. Nothing happens. What am i missing?
The zero config relies on having a properly formatted table, which your example isn't showing. It must also have <thead> and <tbody> elements to render properly. Ensure that's properly setup first.
Second, open the page in Chrome or Firefox, view source. Click on the links to the Datatables.js and Datatables.css files as well as Jquery.js (or whatever each of these files is named) Do they open? If not, there's your problem.
Javascript is essentially platform independent. Sure, you get information TO the script in different manners in Rails, PHP, .net, etc, but there's no reason that this doesn't work in any of the major scripting language.
I have been using the RailsDatatables plugin in my rails apps without any problem. Maybe give that a try?