Pagination with JS how to implements

Pagination with JS how to implements - javascript

I want to implement a paging, using Jquery or angular in my application but I'm not sure how ... I'm getting the back end of it ..
my inforation is alredy filter by API i using this method
#RequestMapping( value = "/distritosPaginacao", params = { "page", "size" }, method = RequestMethod.GET)
public Page<Distritos> findPaginated( #RequestParam("page") int page, #RequestParam("size") int size) {
Page<Distritos> resultPage = distritosService.paginacao(page, size);
return resultPage;
}
and in my js i have this ...
app.controller("buscaDistritoController", function($scope, $http, $location) {
$scope.distritos = [];
$scope.distrito = {}; // binding com o form
carregarDistritos = function() {
token = localStorage.getItem("userToken");
var search = $location.search();
var page = search.page||0;
var size = search.size||15;
var sort = search.sort||'type,desc';
$http({
method: 'GET',
url: '/user/distritosPaginacao?page=' + page + '&size=' + size + '&sort=' + sort
}).then(function(response) {
$scope.distritos = response.data.content;
$scope.page = response.data.totalPages;
$scope.sort = sort;
}, function(response) {
console.log(response.data);
console.log(response.status);
});
};
});
my html
<div ng-controller="buscaDistritoController">
<div class="container">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3>Distritos</h3>
<br></br>
<button id="btnSalvar" type="button" data-toggle="modal" data-target="#modalAdicionarDistrito" class="btn btn-default ">Adicionar novo distrito</button>
<button id="btnImprimir" type="button" class="btn btn-default pull-right ">Imprimir</button>
<div >
<div class=" jPager">
<div class="input-group col-lg-3 col-md-3 col-sm-3 col-xs-12 pull-left">
<select class="form-control" data-pager-action='pagesize'>
<option value="5">Ver 5</option>
<option value="15">Ver 15</option>
<option value="20">Ver 20</option>
<option value="25">Ver 25</option>
<option value="50">Ver 50</option>
<option value="100">Ver 100</option>
</select>
</div>
<div class="input-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
<span class="input-group-addon btn btn-primary" data-pager-action='first'><i class="fa fa-angle-left"></i> Primeira</span>
<span class="input-group-addon btn btn-primary" data-pager-action='previous'><i class="fa fa-angle-double-left"></i> Anterior</span>
<input type="text" class="form-control" data-pager-action='pagenum'>
<span class="input-group-addon btn btn-primary" data-pager-action='next'><i class="fa fa-angle-double-right"></i> Próxima</span>
<span class="input-group-addon btn btn-primary" data-pager-action='last'><i class="fa fa-angle-right"></i> Última</span>
</div>
</div>
</div>
<div>
<div class="panel-body">
<table id="idTabela" class="table">
<thead>
<tr>
<th>Id</th>
<th>Nome</th>
<th>Código DNE</th>
<th>Opções</th>
</tr>
</thead>
<tbody ng-repeat="dis in distritos ">
<tr>
<td>{{dis.idDistrito}}</td>
<td>{{dis.nome}}</td>
<td>{{dis.codigoDne}}</td>
<td>
<div class="btn-group">
<button id="opcoes" type="button" class="btn btn-danger vermDigifred btn-xs dropdown-toggle glyphicon glyphicon-pencil" data-toggle="dropdown"> </button>
<ul class="dropdown-menu" role="menu">
<li><a id="btnExcluirRegistro" ng-click="excluirDistritos(dis)"><span class="glyphicon glyphicon-trash"></span> Excluir registro</a></li>
<li> <a id="btnAlterarRegistro" data-toggle="modal" data-target="#modalAlterarDistrito" ng-click="alterarDistritos(dis)" ><span class="glyphicon glyphicon-edit"></span> Alterar registro</a></li>
</ul>
</div>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I have no idea how to implement the next and return buttons and also the buttons see results by pages.
can anybody help me? I'm not very experienced.

Related

responsive datatables not working when we select data in dropdown

hello please help me guys to solve the problem i am facing. so here i want to insert data into datatables but using class and id because there is select function in it and in html i made an error but why error huh? it should be when we click on the data in the dropdown it will automatically appear in the table and the data will be automatically responsive`
'Use Strict';
$(document).ready(function () {
$('#tblLvl2Process').DataTable({
responsive: true,
"ordering": true,
"paging": true,
"info": true,
"bfilter": true,
"scrollx": false,
});
});
$("#selectMainProcess").change(function () {
var mainid = $(this).val();
var docid = $("#BPM_BPMDocNo").val();
var fusid = "" + mainid + "$" + docid + "";
$.ajax({
url: "/BPM/GetBPMCoreProcessList",
data: { sIdentifier: fusid },
type: "GET",
success: function (data) {
$("#selectCoreProcess").empty();
$("#selectLevel2Process").empty();
$.each(data, function (index, row) {
$("#selectCoreProcess").append("<option value ='" + row.CoreProcessCode + "'>" + row.CoreProcessText + "</ option>")
});
$('.selectpicker').selectpicker('refresh');
$(".allcorelist").hide();
$(".alllv2list").hide();
}
});
});
$("#selectCoreProcess").change(function () {
//hidden all row
$(".allcorelist").hide();
$(".alllv2list").hide();
//get core process id
var coreid = $(this).val();
var series = 1;
//dropdown level 2 type
var aListVal = [];
var aListText = [];
$("." + coreid + "").each(function () {
var codelv2 = $(this).find("#tdLevel2ProcessCode").text();
var textlv2 = $(this).find("#tdLevel2ProcessText").text();
aListVal.push(codelv2);
aListText.push(textlv2);
});
$("#selectLevel2Process").empty();
for (var i = 0; i < aListVal.length; i++) {
if (aListText[i] != "DELETE") {
$("#selectLevel2Process").append("<option value ='" + aListVal[i] + "'>" + aListText[i] + "</ option>")
}
}
$('.selectpicker').selectpicker('refresh');
//show selected
$("." + coreid + "").show();
//numbering
$.each($("." + coreid + ""), function () {
$(this).find(".num").html("" + series + "");
series = series + 1;
});
});
$("#selectLevel2Process").change(function () {
//hidden all row
$(".alllv2list").hide();
//get core process id
var lv2proid = $(this).val();
var series = 1;
//show selected
$("." + lv2proid + "").show();
//numbering
$.each($("." + lv2proid + ""), function () {
$(this).find(".num").html("" + series + "");
series = series + 1;
});
});
$("#btnSubmitNewLvl2P").click(function () {
var result;
result = $("#frmLv2P").valid();
if (result) {
var row;
$('a[href$="EDIT_Lv2P"]').off('click');
$('a[href$="DELETE_Lv2P"]').off('click');
if (sStateGridLvl2P == "-") {
var row = $('<tr id="' + $("#txtCode").val() + '" class="' + $("#txtMainCoreProcessCode").val() + ' allcorelist" >' +
'<td></td>' +
'<td class="num"></td>' +
'<td id="tdLevel2ProcessText">' + $("#txtLevel2Process").val() + '</td>' +
'<td id="tdLevel2ProcessDesc" style="white-space:pre-wrap">' + $("#txtDescription").val() + '</td>' +
'<td id="tdLevel2ProcessObj" style="white-space:pre-wrap">' + $("#txtObjective").val() + '</td>' +
'<td id="tdOtherEntity">' + $("#txtOtherEntityLv2P").val() + '</td>' +
'<td id="tdMainProcessCode" hidden>' + $("#txtMainProcessCode").val() + '</td>' +
'<td id="tdMainCoreProcessCode" hidden>' + $("#txtMainCoreProcessCode").val() + '</td>' +
'<td id="tdLevel2ProcessCode" hidden>' + $("#txtCode").val() + '</td>' +
'<td style="text-align:center;"><span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span></td>' +
'</tr>');
$("#tblLvl2Process tbody").append(row);
} else {
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[1].innerHTML = $("#txtLevel2Process").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[2].innerHTML = $("#txtDescription").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[3].innerHTML = $("#txtObjective").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[4].innerHTML = $("#txtOtherEntityLv2P").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[5].innerHTML = $("#txtMainProcessCode").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[6].innerHTML = $("#txtMainCoreProcessCode").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[7].innerHTML = $("#txtCode").val();
$("#tblStoreOtherEntityLv2P tbody").find("#" + $("#txtCode").val() + "").find("#tdOtherEntity").text($("#txtOtherEntityLv2P").val());
$.each($("." + $("#txtCode").val() + ""), function () {
var paramIME = $("#txtOtherEntityLv2P").val();
if (paramIME == "YES") {
$(this).find("#tdOtherEntity").html($("#txtOtherEntityLv2P").val());
}
});
}
$('a[href$="EDIT_Lv2P"]').on('click', function (e) {
e.preventDefault();
GoEditLv2P($(this));
});
$('a[href$="DELETE_Lv2P"]').on('click', function (e) {
e.preventDefault();
var thisvar = $(this);
BootstrapDialog.show({
title: 'CONFIRMATION',
message: 'Apakah anda yakin akan menghapus data ini ?',
type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // <-- Default value is false
draggable: true, // <-- Default value is false
buttons: [{
label: 'YES',
cssClass: 'btn-primary',
action: function (dialogItself) {
GoRemoveLv2P(thisvar);
dialogItself.close();
}
}, {
label: 'NO',
cssClass: 'btn-danger',
action: function (dialogItself) {
dialogItself.close();
}
}]
});
});
var series = 1;
$.each($("." + $("#txtMainCoreProcessCode").val() + ""), function () {
$(this).find(".num").html("" + series + "");
series = series + 1;
});
$("#tblLvl2Process").trigger('footable_collapse_all').trigger('footable_redraw');
$("#ModalLevel2Process").modal('hide');
//change dropdown level 2 process
var coreid = $("#selectCoreProcess").val();
var aListVal = [];
var aListText = [];
$("." + coreid + "").each(function () {
var codelv2 = $(this).find("#tdLevel2ProcessCode").text();
var textlv2 = $(this).find("#tdLevel2ProcessText").text();
aListVal.push(codelv2);
aListText.push(textlv2);
});
$("#selectLevel2Process").empty();
for (var i = 0; i < aListVal.length; i++) {
if (aListText[i] != "DELETE") {
$("#selectLevel2Process").append("<option value ='" + aListVal[i] + "'>" + aListText[i] + "</ option>")
}
}
$('.selectpicker').selectpicker('refresh');
sStateGridLvl2P = "-";
$("#txtLevel2Process").val("");
$("#txtDescription").val("");
$("#txtObjective").val("");
$("#txtMainProcessCode").val("");
$("#txtMainCoreProcessCode").val("");
$("#txtCode").val("");
$("#txtOtherEntityLv2P").val("");
$("#ModalLevel2Process").modal('hide');
};
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>#ViewData["Title"] - Standard Template 2020</title>
<!-- favicon -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
</head>
<body class="fixed-sn kalbe-skin">
<!-- Page Wrapper -->
<div class="preloader">
<div class="loading">
<img src="~/Image/1200px-Kalbe_Farma.svg.gif" width="200">
<p class="text-center pt-4 ml-4" style="font-size : 15px; font-weight : 500;">
Loading...
</p>
</div>
</div>
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary shadow-lg sidebar sidebar-dark accordion" id="accordionSidebar" style="margin: 0px; ">
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<header>
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class=" d-md-none rounded-circle border-0 mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="border-0 toggel-nav" id="sidebarToggle">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Topbar Navbar -->
<ul class="nav navbar-nav nav-flex-icons ml-auto" id="NavbarTop">
</ul>
</nav>
<!-- End of Topbar -->
</header>
<!-- Begin Page Content -->
<div class="container-fluid box">
<!--Main Layout-->
<main role="main" class="pb-3">
<div class="container-fluid">
<div class="shadow-sm tbl-1 p-3 mb-5" style="background : #F1F1F1;">
<div class="text-left text-table">
<h3 class="ml-2 mt-2" id="labelHeader">List Operational Risk</h3>
<div class="d-flex flex-row">
<div class="p-2">
<div class="form-group selct-kalbe" id="searchEntity">
<div class="" id="labelEntity">
<label for="selectSearchEntity">ENTITY</label>
</div>
<select class="form-control input-sm" id="selectSearchEntity" data-live-search="true" data-size="10" data-width="100%">
#foreach (var item in ListEntity)
{
<option value="#item.Value">#item.Text</option>
}
</select>
</div>
</div>
<div class="p-2 mt-4 pt-3 portfolio-item" id="labelDocNo" hidden>
<div class="form-group" style="float:right">
<label class="control-label" for="selectSearchDocNo">Doc No: </label>
</div>
</div>
<div class="p-2 mt-4 pt-3 portfolio-item" id="searchDocNo" hidden>
<div class="form-group">
<div>
<input class="form-control input-sm text-box single-line" id="selectSearchDocNo" type="text">
</div>
</div>
</div>
<div class="p-2 mt-4 pt-3">
<button type="submit" id="btnReload" class="btn btn-sm btn-kalbe"><span class="glyphicon glyphicon-repeat"></span> Reload</button>
</div>
</div>
<div class="row" style="margin-left : -7px;">
<div class="col-md-4 col-sm-12">
<input placeholder="Search" class="form-control input-sm" style="border-radius : 20px" type="text" id="ListOPR" aria-label="Search">
</div>
</div>
<div class="searchFilter row pt-3" style="margin-left : -7px;">
<div class="col-md-4 col-sm-12">
<div class="form-group" id="selectSearchEntity">
<div class="" id="">
<label for="selectSearchEntity">TABLE FILTER</label>
</div>
<select class="mdb-select colorful-select dropdown-primary md-form" multiple id="searchFilterSelect" style="border-radius : 20px" data-size="10" data-width="100%" onchange="filterColumnOnChange()">
<option value="DocNo">Doc. No.</option>
<option value="RefDoc">Ref. Doc. No</option>
<option value="Entity">Entity</option>
<option value="Process">Process</option>
<option value="LastUpdate">Last Update</option>
<option value="LastRevisit">Last Revisit Status</option>
</select>
<button type="button" id="btnSelectAll" class="btn btn-sm btn-primary" onclick="SelectAll()"><span class="glyphicon glyphicon-ok"></span> SELECT</button>
<button type="button" id="btnRemove" class="btn btn-sm btn-danger" onclick="RemoveFilter()"><span class="glyphicon glyphicon-remove"></span> REMOVE ALL</button>
</div>
</div>
</div>
<div class="d-flex flex-row mt-4 ml-1">
<div class="p-2">
<button id="PICProcessInput" type="button" class="btn btn-sm btn-default btn-arrow-right rounded-pill" title="PIC Process Input">0/0</button>
</div>
<div class="p-2">
<button id="SuperiorPICProcessInput" type="button" class="btn btn-sm btn-default btn-arrow-right" title="Superior PIC Process Review">0/0</button>
</div>
<div class="p-2">
<button id="PICRMReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="PIC RM Review">0/0</button>
</div>
<div class="p-2">
<button id="PICSBUReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="PIC SBU Review">0/0</button>
</div>
</div>
<div class="d-flex flex-row mt-4 ml-1">
<div class="p-2">
<button id="PICRADevReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="PIC RA Dev Review">0/0</button>
</div>
<div class="p-2">
<button id="HeadEntityReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="Head Entity Review">0/0</button>
</div>
<div class="p-2">
<button id="Approved" type="button" class="btn btn-sm btn-default btn-arrow-right" title="Review">0/0</button>
</div>
</div>
<div class="row mt-5">
<div class="col-md-3">
<button type="button" id="btnExportLMRModal" class="btn btn-warning btn-sm" style="margin-right:10px"><span class="glyphicon glyphicon-save-file"></span> Export List Mandatory Risk</button>
</div>
<div class="col-md-3" style="margin-right: 37px;">
<button type="button" id="btnExportLRAA" class="btn btn-warning btn-sm" style="margin-right:20px"><span class="glyphicon glyphicon-save-file"></span> Export List Risk Above Tolerance</button>
</div>
<div class="col-md-3">
<button type="button" id="btnExportURR" class="btn btn-warning btn-sm" style="margin-right:10px"><span class="glyphicon glyphicon-save-file"></span> Export Updated Risk Register</button>
</div>
<div class="col-md-3">
<button type="button" id="btnExportLOR" class="btn btn-warning btn-sm" style="margin-right:0px"><span class="glyphicon glyphicon-save-file"></span> Export List Operational Risk</button>
</div>
<div class="col-md-3">
<button type="button" id="btnExportLKR" class="btn btn-warning btn-sm" style="margin-right:10px"><span class="glyphicon glyphicon-save-file"></span> Export List Key Risk</button>
</div>
<div class="col-md-3">
<button type="button" id="btnNewOR" class="btn btn-primary btn-sm divbtnNew" style="margin-right:10px; display:none"><span class="glyphicon glyphicon-file"></span> New Operational Risk</button>
</div>
</div>
</div>
#{Html.RenderPartial("Loading");}
<div class="card card-custom">
<!-- Editable table -->
<div class="card ">
<div class="card-body">
<!-- Collapse buttons -->
<!-- / Collapse buttons -->
<div class="row">
<div class="col-sm-10 col-md-12 col-lg-12 col-xs-12 col-12">
<div id="divTblListOR" class="table-responsive" style="overflow: hidden;">
<table id="tblListOR" class="table table-striped table-condensed text-left display responsive nowrap text-left" width="100%">
<thead>
<tr>
<th class="theadCollapse">Collapse</th>
<th>No</th>
<th class="theadDocNo">Doc. No.</th>
<th class="theadRefDoc">Ref. Doc. No</th>
<th class="theadEntity">Entity</th>
<th class="theadProcess">Process</th>
<th class="theadLastUpdate">Last Update</th>
<th class="theadLastRevisit">Last Revisit Status</th>
#*
<th>Supporting Document</th>*#
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Editable table -->
</div>
</div>
</div>
</main>
<!--Main Layout-->
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer page-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<a>© 2020 - Standard Template 2020 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</body>
</html>

There are methods for DataTable() that take care of what you want to do. Note that I have changed the IDs for the new table row TD elements into classnames - because you shouldn’t duplicate id’s. Rather than do inline styles, set up a new classname prewrap
<style>
.prewrap{
white-space: pre-wrap;
}
</style>
Somewhere at the top of your script, get a reference for the DT
const t = $('#tblLvl2Process').DataTable();
and in your loop:
// to replace your TR insert in your loop -- insert the data
t.row.add( [
"",
"",
$("#txtLevel2Process").val(),
$("#txtDescription").val(),
$("#txtObjective").val(),
$("#txtOtherEntityLv2P").val(),
$("#txtMainProcessCode").val(),
$("#txtMainCoreProcessCode").val(),
$("#txtCode").val(),
'<span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span>'
] ).node();
// add id and class to the tr
t.id = $("#txtCode").val();
t.addClass(' + $("#txtMainCoreProcessCode").val() + ' allcorelist')
// now the tds
$(t).find('td').eq(1).addClass('num');
$(t).find('td').eq(2).addClass('tdLevel2ProcessText');
$(t).find('td').eq(3).addClass('tdLevel2ProcessDesc prewrap');
$(t).find('td').eq(4).addClass('tdLevel2ProcessObj prewrap');
$(t).find('td').eq(5).addClass('tdOtherEntity');
$(t).find('td').eq(6).addClass('tdMainProcessCode');
$(t).find('td').eq(7).addClass('tdMainCoreProcessCode');
$(t).find('td').eq(8).addClass('tdLevel2ProcessCode');
t.draw( false );
I can't test this, but that should take care of it.

How to get the text value in a div html by clicking on button

I want to get the text between the div tag by clicking on the button event
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> 7000
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> 15000
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
I have this type of divs its around three or four I want to detect the value 12000 and the month 6 Months by clicking on this button
How can I achieve that.

Try
$(".price-footer .btn").on( "click", function(event) {
const parent = $(this).parents('.pricing-table');
const priceText = $('.price', parent).text().trim();
const priceParts = priceText.split(' ');
console.log(`priceText: ${priceParts[1]}`);
// Output: "priceText: 12000"
const permonthText = $('.permonth', parent).text().trim();
console.log(`permonthText: ${permonthText}`);
// Output: "permonthText: 6 Months"
});
Demo - https://codepen.io/vyspiansky/pen/MWybEEr

You can add ids to the elements you want to extract the contents of, then you can use document.getElementById(id) to get those elements, and use .innerText to extract the string contents.
Then with a string.replace() you can remove any non-numerical values, and convert the monetary value into a number.
const dollarAmount = parseFloat(document.getElementById("dollar-info").innerText.replace(/[^0-9.]/g, ''))
const month = document.getElementById("month-info").innerText
console.log(dollarAmount)
console.log(month)
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div id="dollar-info" class="price text-primary">
<span class="dollar">&#8377</span>12000.80
</div>
<span id="month-info" class="permonth">6 Months</span>
</div>

Assuming you have many price tables you can loop each table as below example. You can wrap you data in a certain class and get the text value of that class div. Click the button on the to get the value in the example below
$(document).ready(function(){
$('.pricing-table').each(function(){
var $table = $(this);
$table.on('click', '.btn-primary', function(){
var price = $table.find('.price').text().trim();
var permonth = $table.find('.permonth').text().trim();
alert("price is " + price + " for " + permonth);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>

There are so many options to do this. Here is my example with the snippet and code sandbox.
// jquery
const findValues = (target, value) => target.parents().eq(1).find(value);
$(document).on("click", ".btn", (e) => {
const $target = $(e.target);
// dollar is optional
const $dollar = findValues($target, ".dollar");
const $value = findValues($target, ".value");
const $month = findValues($target, ".permonth");
$("#test").text(`${$dollar.text()} ${$value.text()} ${$month.text()}`);
});
// // vanilla js
const test1 = document.querySelector("#test1");
document.querySelectorAll(".btn").forEach((btn) => {
btn.addEventListener("click", ({ target }) => {
const nodes = target.parentNode.parentNode;
const dollar1 = nodes.querySelector(".dollar");
const value1 = nodes.querySelector(".value");
const month1 = nodes.querySelector(".permonth");
test1.innerText = `${dollar1.textContent} ${value1.textContent} ${month1.textContent}`;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> <span class="value">7000</span>
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> <span class="value">12000</span>
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> <span class="value">15000</span>
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div id="test"></div>
<div id="test1"></div>
https://codesandbox.io/s/eager-voice-2w640?file=/src/index.js

Angular FileUploader - has URL with undefined

I have a following controller:
controllersAdmin.controller( 'productCreate' , [ '$scope' , '$http' , '$timeout', 'checkToken', 'categoriesService', 'FileUploader', function( $scope , $http, $timeout, checkToken, categoriesService, FileUploader ){
$scope.product = {};
// get products
$http.post( 'api/admin/products/get', {
token: checkToken.raw()
}).then( function( data ){
$scope.products = data.data;
if($scope.products.length > 0) {
$scope.product['id'] = Number($scope.products[$scope.products.length-1].id)+1;
} else {
$scope.product['id'] = 1;
}
}, ( function(){
console.log( 'Error on communicate with API.' );
}));
// init uploader
var uploader = $scope.uploader = new FileUploader({
token: checkToken.raw(),
url: 'api/admin/images/upload/' + $scope.product['id']
});
In a template controlled by this controller i have following:
<h3>Upload product photo</h3>
<div ng-show="uploader.isHTML5">
<!-- 3. nv-file-over uploader="link" over-class="className" -->
<div class="well my-drop-zone" nv-file-over="" uploader="uploader">
Drag & drop photo here
</div>
</div>
<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
<input class="btn btn-default" type="file" nv-file-select="" uploader="uploader" multiple /><br/>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td>
<strong>{{ item.file.name }}</strong>
<!-- Image preview -->
<!--auto height-->
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
<!--auto width-->
<div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
<!--fixed width and height -->
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
</td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
First I am getting data by $http.post from my API.
Then I initialize file uploader based on $scope.product['id'], however it shows me URL: api/admin/images/upload/undefined so $scope.product['id'] is undefined outside $http.post.
How do I access this variable after getting data from $http?

The $http.post method returns a promise because it is an asynchronous action.
Because of that you are initialization the uploader before the function inside the then is executed, so $scope.product['id'] still has an undefined value.
Try to initialize the uploader ($scope.uploader) inside the on fulfill function of the promise.
E.g:
$http.post( 'api/admin/products/get', {
token: checkToken.raw()
}).then( function( data ){
$scope.products = data.data;
if($scope.products.length > 0) {
$scope.product['id'] = Number($scope.products[$scope.products.length-1].id)+1;
} else {
$scope.product['id'] = 1;
}
var uploader = $scope.uploader = new FileUploader({
token: checkToken.raw(),
url: 'api/admin/images/upload/' + $scope.product['id']
});
}, (function(){
console.log( 'Error on communicate with API.' );
}));
To avoid getting an error because $scope.uploader is not yet defined (it's creation is delayed by the http call) you can use ng-if="uploader !== undefined" before using the upload directive.

Display data in many html's doesn't work using angular

I want to display data in HTML. First HTML disc-log.html looks like:
<div>
<h2>Discs</h2>
<jhi-alert></jhi-alert>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 no-padding-left">
<!--<button class="btn btn-primary" ui-sref="disc.new" >-->
<!--<span class="glyphicon glyphicon-plus"></span>-->
<!--<span >-->
<!--Create new Disc-->
<!--</span>-->
<!--</button>-->
</div>
</div>
</div>
<br/>
<div class="table-responsive">
<table class="jh-table table table-striped">
<thead>
<tr>
<!--<th><span>ID</span></th>-->
<th><span>Name</span></th>
<th><span>Connection</span></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="disc in vm.discs track by disc.id">
<!--<td><a ui-sref="disc-detail({id:disc.id})">{{disc.id}}</a></td>-->
<td>{{disc.name}}</td>
<td>
<a ui-sref="connection-detail({id:disc.connection.id})">{{disc.connection.userHost}}</a>
</td>
<td class="text-right">
<div class="btn-group flex-btn-group-container">
<button type="submit"
ui-sref="disc-detail({id:disc.id})"
class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-eye-open"></span>
<span class="hidden-sm-down"></span>
</button>
<!--<button type="submit"-->
<!--ui-sref="disc.edit({id:disc.id})"-->
<!--class="btn btn-primary btn-sm">-->
<!--<span class="glyphicon glyphicon-pencil"></span>-->
<!--<span class="hidden-sm-down"></span>-->
<!--</button>-->
<button type="submit"
ui-sref="disc.delete({id:disc.id})"
class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove-circle"></span>
<span class="hidden-sm-down"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
After open this website, all data is displayed. But when I copied the table to another file, then the table is empty. Why? Should I add something in controllers or services?
Disc Log Controller:
(function() {
'use strict';
angular
.module('deviceManagerApp')
.controller('DiscLogController', DiscLogController);
DiscLogController.$inject = ['$scope', '$state', 'DiscLog'];
function DiscLogController ($scope, $state, DiscLog) {
var vm = this;
vm.discLogs = [];
loadAll();
function loadAll() {
DiscLog.query(function(result) {
vm.discLogs = result;
vm.searchQuery = null;
});
}
}
})();
Github repository:
https://github.com/Ice94/DeviceManager

In controller you are adding result in discLogs variable vm.discLogs = result; and in html you are using discs variable in ng-repeat <tr ng-repeat="disc in vm.discs track by disc.id">
That is why it does not display anything. Try to use same variable.
Note: "yourControllerName as vm" should be in your ng-controller attribute or controllerAs: 'vm' in your routes if using router

Angular.js return undfined in same code different pages

The application is running on sails.js as backend and Angular as frontend,
It is CRUD application and there two pages, one is the main Dashboard and other is Search.html that have advanced search functionalities.
here the thing two pages, use identical ng-repeat that inject same html page which contain same function with same controller that use same service.
Here how it goes, I click on the delete button which fire showCancelQuoteModal(quote), then I click on the confirmation and fire ng-click=cancelQoute which pass decisionFrom without any problems.
now in cancelQouteModalCtrl both qoute and decisionForm are passed without a problem to qouteLogService, where qoute still there and qoutelog contain cancellationReason.
and qoute.post should return createdQouteLog but it doesn't in search .html and does in Dashboard.html
when I started tracking and watching the var, everything disappear when the code get in Angular.js and the following stack
$scope.apply() / $scope.digest() /$scope.eval() /processQueue()
here the table of Dashboard.html and search.html
<table class="table table-striped table-responsive" ui-jq="footable" data-filter="#filter19"
data-page-size="{{pageControl.pageSize}}">
<thead>
<tr>
<th data-type="date">Last Update</th>
<th>Client</th>
<th>Phone</th>
<th>Dealer</th>
<th>Assigned To</th>
<th data-type="numeric">Status</th>
<th>Progress</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="quote in allQuotes | orderBy: '-updatedAt' track by quote.id"
ng-init="latestQuoteLog=findLatestQuoteLog(quote.quoteLogs)">
<td class="text-center" data-value="{{latestQuoteLog.createdAt}}">
{{latestQuoteLog.createdAt | date : 'dd-MMM-yy hh:mm a'}}
</td>
<td>{{quote.client.name}}</td>
<td>{{quote.client.phone | tel}}</td>
<td ng-if="quote.dealershipCompany">{{quote.dealershipCompany.name}}</td>
<td ng-if="!quote.dealershipCompany">Online</td>
<td>{{username(latestQuoteLog.assignedTo)}}</td>
<td data-value="{{latestQuoteLog.status}}">
<span class="label bg-{{quoteStatusIdToStatusName[latestQuoteLog.status]}}">
{{quoteStatusPrettyNames[latestQuoteLog.status]}}
</span>
</td>
<td>
<div class="progress-xs progress ng-isolate-scope w-sm m-t-sm" type="info">
<div class="progress-bar progress-bar-primary" role="progressbar"
aria-valuenow="{{quoteStatusProgress[latestQuoteLog.status]}}" aria-valuemin="0"
aria-valuemax="100" ng-
style="width: {{quoteStatusProgress[latestQuoteLog.status]}}%;"></div>
</div>
</td>
<td>
<div class=" btn-group">
<button class="btn btn-sm btn-icon btn-default"
ng-if="latestQuoteLog.status != quoteStatus.quoteCancelled"
ng-click="showCancelQuoteModal(quote)">
<i class="glyphicon glyphicon-remove" tooltip="Cancel Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="editQuote(quote)">
<i class="glyphicon glyphicon-edit" tooltip="Edit Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="viewQuote(quote)">
<i class="glyphicon glyphicon-eye-open" tooltip="View Quote"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.broker, 'AT', latestQuoteLog)"
ng-if="canAssign(latestQuoteLog, roles.broker)">
<i class="glyphicon glyphicon-arrow-right" tooltip="Assign To Broker"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.processor, 'AT', latestQuoteLog)"
ng-if="canAssign(latestQuoteLog, roles.processor)">
<i class="glyphicon glyphicon-arrow-right" tooltip="Assign To Processor"></i>
</button>
<button class="btn btn-sm btn-icon btn-default" ng-click="showModal(quote, roles.broker, 'CA')"
ng-if="canChangeAssignee(latestQuoteLog, roles.broker)">
<i class="glyphicon glyphicon-transfer" tooltip="Change Assignee"></i>
</button>
<button class="btn btn-sm btn-icon btn-default"
ng-click="showModal(quote, roles.processor, 'CA')"
ng-if="canChangeAssignee(latestQuoteLog, roles.processor)">
<i class="glyphicon glyphicon-transfer" tooltip="Change Assignee"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="9" class="text-center">
<ul class="pagination"></ul>
</td>
</tr>
</tfoot>
</table>
here cancelModal
<script type="text/ng-template" id="cancelQuoteModal.html">
<div class="modal-header">
<form name="decisionForm" class="form-horizontal wrapper input-set">
<div class="col-md-10">
<label>
<h4 class="font-thin">Why it is not sold ?</h4>
</label>
<select class="form-control" ng-model="reasonForRejection" name="reasonForRejection" required>
<option ng-repeat="reason in rejectionReasons" value="{{reason}}">
{{reason}}
</option>
</select>
<small
ng-show="(decisionForm.reasonForRejection.$invalid && !decisionForm.reasonForRejection.$pristine) || showErrors"
class="b-light m-t-n-sm m-b font-thin text-danger m-r">Reason is required.
</small>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-success" ng-click="cancelQuote(decisionForm)">Confirm Quote Cancellation</button>
<button class="btn btn-warning" ng-click="cancelBox()">Close!</button>
</div>
</script>
Here CancelModalController
.controller('cancelQuoteModalCtrl', ['$scope', '$modalInstance', 'quoteLogService', 'rejectionReasons', 'quote', function ($scope, $modalInstance, quoteLogService, rejectionReasons, quote) {
$scope.rejectionReasons = rejectionReasons;
$scope.reasonForRejection;
$scope.cancelQuote = function (decisionForm) {
if (decisionForm.$invalid) {
$scope.showErrors = true;
} else {
quoteLogService.create(quote, {
'status': 'quoteCancelled',
'cancellationReason': $scope.reasonForRejection
}, function (createdQuoteLog) {
$modalInstance.close('Quote cancelled successfully!');
}, function (err) {
$modalInstance.dismiss('Error creating new quoteLog');
console.log('Error creating new quoteLog', err);
});
}
};
$scope.cancelBox = function () {
$modalInstance.close();
};
}]);
And here QouteLogService.js
QuoteLogModule
.factory('quoteLogService', ['$localStorage', '$state', 'LoggedInRestangular', function($localStorage, $state, LoggedInRestangular) {
return {
create: function(quote, quotelog, success, error) {
quote.post('quotelog', quotelog).then(function(createdQuoteLog) {
success(createdQuoteLog);
}, function(err) {
error(err);
});
},

We Keep Coding

JavaScript is the programming language of the Web.

Pagination with JS how to implements - javascript

Related

responsive datatables not working when we select data in dropdown

How to get the text value in a div html by clicking on button

Angular FileUploader - has URL with undefined

Display data in many html's doesn't work using angular

Angular.js return undfined in same code different pages

Categories

Resources