How to toggle pagination of a jquery datatable on button click? - javascript

I have tried with the following ideas, but it all has few issues:
Idea #1:
var $oTable = $('#table').DataTable();
$oTable .settings()[0].oFeatures.bPaginate = !($oTable .settings()[0].oFeatures.bPaginate);
$oTable.draw('page');
Issue: It toggles the pagination but page-numbers at the bottom remains as it is. For example, if the datatable has pages with pagination, and we toggled the pagination it toggles fine but the div at the bottom of datatable that contains all the 5 page-numbers of the table, doesn't hide. I need to write extra code to hide the div that contains page-numbers.
Idea #2:
var $oTable = $('#table').DataTable();
if ($oTable.page.len() == -1) {
$oTable.page.len(10).draw('page');}
else {
$oTable.page.len(-1).draw('page');}
Issue: It toggles the pagination but page-numbers at the bottom of the table doesn't hide. Considering the example of last scenario, in this scenario it becomes one page instead of 5 pages. But the problem is the div containing page-numbers remains visible. Again, I need to write extra code to hide the div that contains page-numbers.
Please help me out so that I can toggle the pagination of the datatable and at the same time the div containing page-numbers gets hide.

The developer says that
There is no option to enable and disable features in DataTables on-the-fly at this time
here: https://datatables.net/forums/discussion/35146/on-the-fly-change-of-option so I guess that settles that.

Related

Bootstrap collapse section and expand another with one button

I have a bunch of HTML fields logically separated as such: half the fields reside in: div id="general" and the other half reside in: div id="advanced"
What I'm trying to implement (and failing) is the following:
The fields in the general div to be shown (by default). A button with the caption "Advanced" shown. And the fields in the advanced div to be hidden.
When this button is clicked, the following should occur:
General section collapses hiding all it's fields
Advanced section expands showing all it's fields
Button caption is changed to "General".
Subsequent clicks toggles the above.
E.g. upon the next click, the advanced section now is hidden, general section now is shown, and button caption changes to "Advanced"
Notes: This seems trivial but being new to web front-end, I can't get this easily. If my div section is incorrect, then scrap it. I suspect I'm on the right track, and just need some jQuery code to collapse and expand divs.
Below are my attempts:
I used the Bootstrap collapse plugin with accordian markup, but this isn't what I want. It comes close though, but each section has a heading/button. I'd like one heading/button to toggle each section in an opposite manner.
I used the Bootstrap collapse plugin without the accordian markup, but same result as attempt 1 - two button again.
I tried using jQuery to do this dynamically, but can't get the logic (or syntax) correct.
I'm using Bootstrap, but happy to go with jQuery (or JavaScript) solution if it can't be done solely in Bootstrap with the collapse plugin.
You can do it using jquery by toggling a class on element which decides which fields to be shown.
for e.g. Take an outer div, and put general and advanced div inside outer div and show only the fields based on outer div class like advanced using css. And bind a button to toggle the class on the outer div.
Checkout JSFiddle here : http://jsfiddle.net/eqhw2mxx/2/
Check the JSFiddle :- JSFiddle
$("#advanced").addClass('hide');
$(".button").click(function(){
$("#advanced").toggleClass('hide');
$("#general").toggleClass('hide');
if($(this).attr("value") == "Advanced"){
$(this).attr("value","General");
}
else if($(this).attr("value") == "General"){
$(this).attr("value","Advanced");
}
});

simple jquery div swap with anchor links

I have 4 links, and 4 content boxes which the first content box is visible and the other 3 are hidden. I believe I need to use javascript to toggle these content boxes. When I click the second link it should show the second content box and hide the first one. if it was possible to fade in and out that would be awesome. Please help I have been searching for a tutorial doing exactly this and I just cant put it together
According to your current structure, I changed the HTML code and come up with this jQuery:
$("a").click(function(){
$("div").fadeOut("slow")
$("#"+$(this).text()).fadeIn("slow");
});
Check out this Fiddle..

Change displayed price based on a button click

Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.
// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..
The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.
You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps

scrolling page to a particular panel using jsf and javascript

I have an xhtml page with a set of panels stacked one above the other. Each panel has a datatable with a particular column as a hyperlink. When I click on the hyperlink in the first data table, the second datatable is rendered. When I click on the hyperlink in the second datatable, the third datatable is rendered. I wanted my page to scroll down and display the newly rendered datatable in the center of the screen and not load the page back to the top of the screen. How can I achieve it. below is the code that I have written to achieve that, but with no luck.
Each of the hyperlink in the table has the following code written,
<p:commandLink value="#{abc}" action="#{myBean.myFunction}"
ajax="false" oncomplete="focusPanel3()">
<f:setPropertyActionListener
target="#{myBean.xyz}" value="#{abc}">
</f:setPropertyActionListener>
</p:commandLink>
The javascript is as follows
function focusPanel3() {
var el = document.getElementById("panel3");
el.scrollIntoView();
window.scroll(0, 1200); //Also tried this line. No luck even then
}
In my Bean, i am setting the rendered attribute of the next panel to true.
You can check jQuery smooth scroll out, this answer can guide you. Or jQuery scrollTo plugin and this answer includes a basic demo as well. Do not forget giving the correct HTML generated cliend ID when you are using document.getElementById.

Bootstrap: accordion strips ui-droppable class on expand

New to Bootstrap and having some issues with accordion. Hoping someone would help me resolve it.
Basically I have an empty accordion and a drop down menu. Every time a selection made in the drop down menu, it is added to the accordion, with full .accordion-group mark up, but with empty .accordion-body div. After that this accordion-group set as droppable and .ui-droppable class is automatically added.
After that I am able to drag and drop a bunch of other divs into the .accordion-group and those divs are appended to .accordion-body of this particular group. This part works fine, however, as soon as i click to expand any given .accordion-group, .ui-droppable class gets stripped from ALL of them.
How do I stop it from removing .ui-droppable class??
Steps to reproduce:
Use html markup from Bootstrap page:
(For some reason I am unable to format HTML as code here by indenting it with 4 spaces,so im just pasting the link to it)
http://twitter.github.com/bootstrap/javascript.html#collapse
Add JS, which makes groups droppable
$('#accordion2').find('.accordion-group').each(function() {
$(this).droppable();
});
Inspect elements to make sure .ui-droppable class is set
Click to expand a group. Any group.
Inspect elements. .ui-droppable has been stipped from ALL of them
Resolved this, but I think it is a very stupid way to achieve the result, so I am not happy with how Bootstrap handles toggles. I really don't think there is a need to loop though every .accordion-group to re-apply droppable attributes every single time someone opens OR closes a section.
Going to re-do it with just a button and a div for each section.
Here is the solution:
$('#host-groups').on('shown', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
$('#host-groups').on('hidden', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
/facepalm

Categories

Resources