I am trying to use the bootstrap pagination plugin but I am a little lost as to how I can display content using this feature. The code will display "page" followed by the page number. Can anyone tell me how to add text in paragraphs? Please see the code below:
<p id="content"></p>
<p id="pagination-here"></p>
<script>
$('#pagination-here').bootpag({
total: 7, // total pages
page: 1, // default page
maxVisible: 5, // visible pagination
leaps: true // next/prev leaps through maxVisible
}).on("page", function(event, num) {
$("#content").html("Page " + num); // or some ajax content loading...
// ... after content load -> change total to 10
$(this).bootpag({
total: 10,
maxVisible: 10
});
});
</script>
Hi Please try this....
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pagination&stacked=h
http://getbootstrap.com/components/#pagination-default
Thanks
Related
I have a pagination indicator that shows the number of results on a given page, for example; page 1 would show '1-5' and page 2 shows '6-10 out of 50 results' etc.
I have set the logic in place and it appears to be working, however for the results to update on any other page except for page 1, I would have to refresh the page every time. Therefore '1-5' always appears. I'm still learning vue and I'm sure it must be some silly mistake here.
What can I do to have the results update when I change page?
Pagination.vue
<!-- Results counter -->
<PaginationResultIndicator :total-items="paginationData.totalItems"
:first-item="firstItem"
:last-item="lastItem"/>
// Script
data: () => ({
currentPage: -1,
limit: undefined,
firstItem: undefined,
lastItem: undefined
}),
created() {
this.currentPage = this.paginationData.current;
this.limit = this.paginationData.totalItems / this.paginationData.totalPages
this.lastItem = this.limit * this.paginationData.current;
this.firstItem = this.lastItem - this.limit + 1;
},
Your should replace data:() =>{... to data(){...}
https://v2.vuejs.org/v2/style-guide/index.html#Component-data-essential
We downloaded html template: https://codyhouse.co/gem/sliding-panels-template.
As for the full-page navigation, the .cd-primary-nav is placed below the .cd-projects-container. When the user clicks the .cd-nav-trigger, the .slide-out class is added to the project previews to reveal the navigation.
We want change position of full page navigation, place it over cd-projects-container. In other words, we want to set navigation page opened by default.
I have basic knowledge of css but I can not do what we want. Can anybody help and explain how it works? Thanks in advance.
try this:
Clone this repo https://github.com/CodyHouse/sliding-panels-template (this is the original template. The other repo you passed is different).
In the code, make this seven changes:
// In style.css
// at the end, that is line 788, add:
.hide-in-default { opacity: 0; }
// In index.html
// Add class .nav-visible to `<a>` in line 16
<a class="cd-nav-trigger cd-text-replace nav-visible" href="#primary-nav">Menu<span aria-hidden="true" class="cd-icon"></span></a>
// Add class .hide-in-default to `<div>` in line 18:
<div class="cd-projects-container hide-in-default">
// replace line 134 with:
<nav class="cd-primary-nav nav-visible nav-clickable" id="primary-nav">
// In main.js
// in line 29 add:
removeHideInDefault();
// in line 67 add:
function removeHideInDefault() {
try {
var projectsContainer = document.querySelector('.cd-projects-container');
var isHidden = projectsContainer && projectsContainer.classList.contains('hide-in-default');
if (isHidden) projectsContainer.classList.remove('hide-in-default');
} catch (reason) {
console.error(reason);
}
}
// finally, replace line 80 with:
projectPreview.addClass('bg-loaded slide-out');
Hope it helps.
I want to include datatable information in the print view.
Example I want to show this information in the print view: Showing 1 to 9 of 9 entries
Any help will be appreciated.
I've just played with the print option myself to see if I can wing it; including the footer didn't do much but add the same footer to the bottom of the table in print view; however; if you use the custom message you may be able to produce a good result; you can for example set a custom message showing total entries above or below your printed document.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
messageBottom: function () {
var oTable = $('#example').DataTable();
var info = oTable.page.info();
var count = info.recordsTotal;
return 'Showing total entries of ' + count;
}
}
]
} );
});
You can play with either messageBottom or messageTop; or display both with two different messages.
i am trying to display just the most recent tweet on my home page i see a working example however it is not limited to one how do i make this return just one tweet?
example: http://jsfiddle.net/pborreli/pJgyu/
Thanks
If you change your code to -
$(function(){
$('#tweets').tweet({
count: 1,
username: "jquery"
});
});
And your external reference in jsfiddle to -
http://tweet.seaofclouds.com/jquery.tweet.js
Then it should work.
http://jsfiddle.net/zSLWt/1/
You can use another jquery twitter plugin
Steps:
Add a markup
<div id="twitter">
results will be here
</div>
Call plugin method like
<script type="text/javascript">
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "jquery",
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
slideDuration: 750,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true,
showTimestamp: true
});
});
</script>
Picked ui datepicker as calendar and used cluetip to show events. Script is working until I change the month (push button <- or ->).
Main idea was to set title to the element that holds date and on hover show & split text in lines using cluetip.
EDIT: Here is example - hope it will help to understand my problem.
Here is the javascript code:
$(document).ready(function() {
var dates =[ // adding events
[new Date(2010,8,01),new Date(2010,8,03),"Event1 | text | next line"]
];
$('#calendar').datepicker({
beforeShowDay: highlightEvents,
});
function highlightEvents(date) {
for (var i = 0; i < dates.length; i++) {
if (dates[i][0] <= date && dates[i][2] >= date) {
return [true, 'odd', dates[i][2]]; } // odd == style
}
$('td.odd').cluetip({ // cluetip main function
splitTitle: '|',
cluetipClass: 'jtip',
arrows: true,
dropShadow: true,
});
});
Html code:
<div id="calendar"></div>
Thanks in advance!
Thanks to UberNeet post:
jQuery UI Datepicker with jQuery tipsy
Found the answer.
// Because the the event `onChangeMonthYear` get's called before updating
// the items, we'll add our code after the elements get rebuilt. We will hook
// to the `_updateDatepicker` method in the `Datepicker`.
// Saves the original function.
var _updateDatepicker_o = $.datepicker._updateDatepicker;
// Replaces the function.
$.datepicker._updateDatepicker = function(inst){
// First we call the original function from the appropiate context.
_updateDatepicker_o.apply(this, [inst]);
// No we can update the Tipsys.
addTipsys(inst.drawYear, inst.drawMonth+1, inst.id);
};
Hope this will help someone.