Bootstrap Pagination not working with displayed content - javascript

Want to make dynamic bootstrap pagination with displaying different content on clicking Paginations.

Try this, I hope this will work for you
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="main" style="text-align:center;">
<h2 style="text-align:center;">Pagination with Div Structur</h2>
<div class='blk content4'>
<!--// show here ur div structure-->
Pagination content here.
</div>
<div class="pagi"></div>
</div>
<script type="text/javascript">
$('.pagi').bootpag({
total: 27,
page: 1,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '<span aria-hidden="true">←</span>',
last: '<span aria-hidden="true">→</span>',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on("page", function (event, num) {
$(".content4").html("Page " + num); // or some ajax content loading...
}).find('.pagination');
</script>
</div>
</body>
</html>

Related

Call JS function onclick

The sample code below loads a page with a "Show 3D" clickable div. Onclick, it should load a 3D viewer and display associated data.
function showPDB(path,id) {
var stage = new NGL.Stage(id, {backgroundColor:'white'});
stage.loadFile(path).then(function (o) {
o.addRepresentation("cartoon", {color: 'white' });
o.autoView();
});
};
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/ngl#latest/dist/ngl.min.js"></script>
</head>
<body>
<div class="row">
<div class="col" data-toggle="collapse" data-target="#show_0" id="_show_0" onclick="showPDB('https://alphafold.ebi.ac.uk/files/AF-P08047-F1-model_v4.pdb', 'viewport_0')">
<b>Show 3D</b>
</div>
</div>
<div id="show_0" class="collapse">
<div class="row">
<div class="col">
<div id="viewport_0" style="width:100%; height:800px;"></div>
</div>
</div>
</div>
</body>
</html>
It seems that "Show 3D" needs to be clicked twice for the 3D viewer to load. I would like it to load upon a single click.
I guess this function should be triggered only when the inside of the collapsible element has been fully loaded. I tried to tweak in this direction but I could not find a fix yet.
As it is a collapsible, just give some time to the collapsible to load. TO do that, you can wrap the entire script inside a set timeout like below
function showPDB(path,id) {
setTimeout(() => {
var stage = new NGL.Stage(id, {backgroundColor:'white'});
stage.loadFile(path).then(function (o) {
o.addRepresentation("cartoon", {color: 'white' });
o.autoView();
});
});
};

select tag created in ajax request doesn't be shown in HTML file

I want to load some options via ajax request and show them into select tag HTML. After I get data and create a select tag manually, the HTML file doesn't show the select tag. I used jquery and put the codes in other files.
I try to put ajax request in both $(document).ready() and function but it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META SECTION -->
<title>Atlant - Responsive Bootstrap Admin Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<!-- END META SECTION -->
<!-- CSS INCLUDE -->
<link rel="stylesheet" type="text/css" id="theme" href="/public/css/theme-default.css"/>
<!-- EOF CSS INCLUDE -->
</head>
<body onload="onLoadCenterName()">
<!-- START PAGE CONTAINER -->
<div class="page-container">
<!-- PAGE CONTENT -->
<div class="page-content ">
<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
<div class="row">
<div class="col-md-12">
<form id="addSiteForm" class="form-horizontal"
style="margin-top: 20px;margin-left: 50px;margin-right: 50px">
<div class="panel panel-default">
<div class="panel-heading ">
<h3 class="panel-title "><strong>Add New Site</strong></h3>
</div>
<div class="panel-body">
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Select User Type</label>
<div class="col-md-6 col-xs-12">
<select id="addSiteSelectCenterInput" class="form-control select">
</select>
<span class="help-block">Select type of the user account </span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
<!-- START PRELOADS -->
<audio id="audio-alert" src="/public/audio/alert.mp3" preload="auto"></audio>
<audio id="audio-fail" src="/public/audio/fail.mp3" preload="auto"></audio>
<!-- END PRELOADS -->
<!-- START SCRIPTS -->
<!-- START PLUGINS -->
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap.min.js"></script>
<!-- END PLUGINS -->
<!-- START THIS PAGE PLUGINS-->
<script type='text/javascript' src='/public/js/plugins/icheck.js'></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.mCustomScrollbar.js"></script>
<!-- END THIS PAGE PLUGINS-->
<!-- START TEMPLATE -->
<!-- <script type="text/javascript" src="/public/js/settings.js"></script>-->
<script type='text/javascript'
src='/public/js/plugins/validationengine/languages/jquery.validationEngine-en.js'></script>
<script type='text/javascript' src='/public/js/plugins/validationengine/jquery.validationEngine.js'></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap-select.js"></script>
<script type='text/javascript' src='/public/js/plugins/noty/jquery.noty.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topCenter.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topLeft.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topRight.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/themes/default.js'></script>
<script type="text/javascript" src="/public/js/plugins.js"></script>
<script type="text/javascript" src="/public/js/actions.js"></script>
<script type="text/javascript" src="/public/js/addSite.js"></script>
<!-- END TEMPLATE -->
<!-- END SCRIPTS -->
</body>
</html>
addSite.js
function onLoadCenterName() {
$.ajax({
type: 'GET',
url: '/centers/getAllCenters',
dataType: 'json',
contentType: 'application/json',
success: function (data) {
console.log("SUCCESS : ", data);
let selectList = document.getElementById("addSiteSelectCenterInput");
$.each(data, function (key, value) {
console.log(key, value._id, value.centerName);
const option = document.createElement("option");
option.value = value._id;
option.text = value.centerName;
selectList.appendChild(option);
// $('#addSiteSelectCenterInput')
// .append($("<option></option>")
// .attr("value", )
// .text(value.centerName));
});
console.log(selectList);
noty({
text: 'Successful load centers ',
layout: 'topRight',
type: 'success',
timeout: true
}).setTimeout(5000);
$.mpb("update", {
value: 100, speed: 5, complete: function () {
$(".mpb").fadeOut(200, function () {
$(this).remove();
});
}
});
},
error: function (e) {
console.log("ERROR : ", e);
noty({
text: 'There was an error',
layout: 'topRight',
type: 'error',
timeout: true
}).setTimeout(5000);
$.mpb("update", {
value: 100, speed: 5, complete: function () {
$(".mpb").fadeOut(200, function () {
$(this).remove();
});
}
});
}
});
}
in chrom console, result is here:
<select id="addSiteSelectCenterInput" class="form-control select" style="display: none;">
<option value="5d0f86f0a2b7a41bdcd3c91f">sdf</option><option value="5d0f9c4067731820fcabf1eb">scaasdad</option></select>
According to your console result, the <select> is not visible because it has the attribute style="display: none;".
There is nothing in the code that you have provided that would add that attribute, so you obviously haven't given us all the relevant code.
So you either need to remove that attribute... or don't hide the control in the first place.
To show it via jQuery use .show()...
$("#addSiteSelectCenterInput").show()
Or in vanilla JS change the style.display property...
document.getElementById("addSiteSelectCenterInput").style.display = "";

JQuery Datatable header is not aligned with the tbody?

I have set of data that should display in JQuery Datatables with options to filter, and scroll without losing column headers. All features work so far but there is problem with the column header. If you click on the link and check run example you will see the problem. The column header is on the left while tbody is centered. I have tried fixing this problem and changing my HTML code, removing some of the JQuery table attributes but still no success. Please if anyone knows how to fix this problem or if there is any problem with my code please elt me know. Here is example:
$('#btnGet').on('click', function() {
buildTable();
});
var dataTable;
function GenerateTable(tblID) {
// Setup - add a text input to each footer cell
$('#rptTbl thead tr').clone(true).appendTo('#rptTbl thead');
$('#rptTbl thead tr:eq(1) th').each(function(i) {
//var title = $(this).text();
$(this).html('<input type="text" placeholder="Search" />');
$('input', this).on('keyup change', function() {
if (dataTable.column(i).search() !== this.value) {
dataTable.column(i).search(this.value).draw();
}
});
});
dataTable = $('#' + tblID).DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print',
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
],
orderCellsTop: true,
fixedHeader: {
header: true,
footer: true
},
scrollX: true,
scrollY: "400px",
scrollCollapse: true,
iDisplayLength: 25,
language: {
"emptyTable": "No records were found."
}
});
}
function buildTable() {
var htmlTbl = '<table id="rptTbl" class="table table-bordered"><thead><tr><th>Area</th></tr></thead><tbody><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr></tbody></table>';
$('#rptData').empty().append(htmlTbl);
GenerateTable('rptTbl');
}
<!DOCTYPE html>
<html>
<head>
<title>Test JQuery Datatables</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- *** Start: CSS for DataTables. *** -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
<!-- *** End: CSS for DataTables. *** -->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- *** Start: JS for DataTables. *** -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<!-- *** End: JS for DataTables. *** -->
</head>
<body>
<div class="container">
<div id="report_filters" class="collapse in">
<div class="row">
<div class="form-group col-xs-10 col-sm-5 col-md-3 col-lg-3">
<button type="button" id="btnGet" class="btn btn-primary btn-block" data-toggle="collapse" data-target="#report_data,#report_filters">Get Report</button>
</div>
</div>
</div>
<div id="report_data" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#report_data,#report_filters">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
</button>
</div>
</div>
<div id="rptData" class="table-responsive"></div>
</div>
</div>
</body>
</html>
Add a drawCallback function in dataTable options
dataTable = $('#' + tblID).DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print',
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
],
orderCellsTop: true,
fixedHeader: {
header: true,
footer: true
},
scrollX: true,
scrollY: "400px",
scrollCollapse: true,
iDisplayLength: 25,
drawCallback: function( settings ) {
// Reset margin to 0 after datatable render
var ele = document.querySelector('.dataTables_scrollBody');
if(ele){
ele = ele.querySelector('.dataTable');
if(ele){
ele.style.margin = 0;
}
}
},
language: {
"emptyTable": "No records were found."
}
});

Hopscotch Button Click Not Working

Any ideas on why the following Hopscotch doesn't the following work? We want a user to be able to click on a button to start the tour.
Many Thanks!
<html>
<head>
<title>My First Hopscotch Tour</title>
<link rel="stylesheet" href="css/hopscotch.css">
</head>
<body>
<h1 id="header">My First Hopscotch Tour</h1>
<div id="content">
<p>Content goes here...</p>
</div>
<button id="myBtn">Click Me</button>
<script>
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "My Header",
content: "This is the header of my page.",
target: "header",
placement: "bottom"
},
]
};
$("#myBtn").click(function(){
hopscotch.startTour(tour);
});
</script>
<script src="js/hopscotch.js"></script>
</body>
</html>
Add Jquery Script:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/hopscotch.js"></script>
See Demo Here: http://codepen.io/ihemant360/pen/OXmqXR
You should include the jquery library in the head section of your file.
ie:
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>

bootpag - Not working Basic Example

I am trying to use a plugin for dynamic pagination.
The plugin is-
Bootpag - Dynamic Pagination
In the Home page of the plugin, I found an example, and I tried to use that as an example and what I have done is like this-
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div id="content">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
// init bootpag
$('#page-selection').bootpag({
total: 10
}).on("page", function(event, /* page number here */ num){
$("#content").html(num); // Changing div content to dynamic content
});
</script>
</body>
</html>
But it is not working.
Can anyone please help?
Thanks in advance for helping.
I have solved it by this way-
$('#show_paginator').bootpag({
total: 23,
page: 3,
maxVisible: 10
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
More customised version-
$('#show_paginator').bootpag({
total: 53,
page: 2,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '←',
last: '→',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
Even more customization can be done by this options-
Warning
Here I am using a CDN (http://botmonster.com/jquery-bootpag/jquery.bootpag.js) for showing content. But it is not recommended.
Hardly recommendation is to download this file and put it locally.
Because there is no official CDN for bootpeg.
Even More
If want to update paginator at run time, call the paginator like this-
$('#show_paginator').bootpag({total: 55});
Even more, can be found from here.
I think u have your complete answer.

Categories

Resources