Home / Unlabelled / There is pagination in code from cms swtm

There is pagination in code from cms swtm

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Page Text Management</title>
	<link rel="shortcut icon" href="https://showtime.co.id/images/favicon.ico" type="image/x-icon">
	<link href="/Content/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

	<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js">

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>


	<link rel="stylesheet" href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

	<style>
	#activedd {
	background: #ffc6db;
	}
	</style>

	<!-- Custom styles for this template-->
	<link href="/Content/css/sb-admin-2.css" rel="stylesheet">
	<link href="/Content/css/custom.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="/Content/css/daterangepicker.css">

	</head>
	<body id="page-top">
	<div class="loading">Loading…</div>
	<!-- Page Wrapper -->
	<div id="wrapper">

	<!-- Sidebar -->
	<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

	<!-- Sidebar - Brand -->
	<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">

	<img src="https://cdn.showtime.co.id/images_2/images/v2/showtime-logo-beta.png" alt="Showtime" class="img-logo">
	</a>

	<!-- Divider -->

	<hr class="sidebar-divider my-0">
	<div id="qwe"></div>

	<!-- Nav Item - Dashboard -->
	<li class="nav-item" id="Dashboard">
	<a class="nav-link" href="/">
	<i class="fas fa-fw fa-tachometer-alt"></i>
	<span>Dashboard</span>
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePortal" aria-expanded="true" aria-controls="collapsePortal">
	<i class="fas fa-fw fa-cog"></i>
	<span>Portal and text management</span>
	</a>
	<div id="collapsePortal" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar" style="">
	<div class="bg-white py-2 collapse-inner rounded">
	<a class="collapse-item" href="/Portal">Portal banners</a>
	<a class="collapse-item" href="/Portal/PageText">Pagetext</a>
	<a class="collapse-item" href="/Home/MailBox">Mailbox</a>
	</div>
	</div>
	</li>

	<li class="nav-item">
	<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseEvent" aria-expanded="true" aria-controls="collapseEvent">
	<i class="fas fa-list"></i>
	<span>Event</span>
	</a>
	<div id="collapseEvent" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar" style="">
	<div class="bg-white py-2 collapse-inner rounded">
	<a class="collapse-item" href="/Home/Content">Content event approval</a>
	<a class="collapse-item" href="/Home/Showcase">Content showcase approval</a>
	<a class="collapse-item" href="/Home/Users">Participants</a>
	</div>
	</div>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseArtist" aria-expanded="true" aria-controls="collapseArtist">
	<i class="fas fa-list"></i>
	<span>Artist</span>
	</a>
	<div id="collapseArtist" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar" style="">
	<div class="bg-white py-2 collapse-inner rounded">
	<a class="collapse-item" href="/Home/Approval"> Artist Approval</a>
	<a class="collapse-item" href="/Home/ContentArtist"> Content approval</a>
	<a class="collapse-item" href="/Home/Withdraw"> Withdrawal transaction</a>
	<a class="collapse-item" href="/Home/Wallet"> Wallet approval</a>
	</div>
	</div>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseAdmin" aria-expanded="true" aria-controls="collapseAdmin">
	<i class="fas fa-list"></i>
	<span>Admin</span>
	</a>
	<div id="collapseAdmin" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar" style="">
	<div class="bg-white py-2 collapse-inner rounded">
	<a class="collapse-item" href="/Home/NonCcContent">Content upload</a>
	</div>
	</div>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseCP" aria-expanded="true" aria-controls="collapseCP">
	<i class="fas fa-list"></i>
	<span>CP</span>
	</a>
	<div id="collapseCP" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar" style="">
	<div class="bg-white py-2 collapse-inner rounded">
	<a class="collapse-item" href="/Home/Promotion">Promotion Management</a>
	</div>
	</div>
	</li>

	<li class="nav-item">
	<a class="nav-link" href="/Login/LogOut">
	<i class="fas fa-sign-out-alt"></i>
	<span>Logout</span>
	</a>
	</li>
	</ul>
	<!-- End of Sidebar -->
	<!-- Content Wrapper -->
	<div id="content-wrapper" class="d-flex flex-column">

	<!-- Main Content -->
	<div id="content">

	<!-- Topbar -->
	<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
	<h2>content management system</h2>
	<!-- Sidebar Toggle (Topbar) -->
	<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
	<i class="fa fa-bars"></i>
	</button>

	<!-- Topbar Navbar -->
	<ul class="navbar-nav ml-auto">

	<!-- Nav Item - User Information -->
	<!--<li class="nav-item dropdown no-arrow">
	<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
	data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	<span class="mr-2 d-none d-lg-inline text-gray-600 small">Douglas McGee</span>
	<img class="img-profile rounded-circle"
	src="img/undraw_profile.svg">
	</a>-->
	<!-- Dropdown - User Information -->
	<!--<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
	aria-labelledby="userDropdown">
	<a class="dropdown-item" href="#">
	<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
	Profile
	</a>
	<a class="dropdown-item" href="#">
	<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
	Settings
	</a>
	<a class="dropdown-item" href="#">
	<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
	Activity Log
	</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
	<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
	Logout
	</a>
	</div>
	</li>-->

	</ul>

	</nav>
	<!-- End of Topbar -->
	<!-- Begin Page Content -->
	<div class="container-fluid">





	<div id="succesUpdateData">
	</div>



	<div class="modal fade" id="exampleModal" 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">Page Text</h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	<span aria-hidden="true">×</span>
	</button>
	</div>
	<div class="modal-body">
	<div class="form-group">
	<select class="form-control" id="lang">
	<option value="">Select Language</option>
	<option value="en">English</option>
	<option value="id">Indonesia</option>
	<option value="pt">Portuguese</option>
	<option value="my">Myanmar</option>
	</select>
	</div>
	<div class="form-group">
	<label for="text">Key</label>
	<input type="text" class="form-control" id="key" placeholder="Enter Key">
	</div>
	<div class="form-group">
	<label for="text">Text</label>
	<textarea type="text" rows="5" class="form-control" id="text" placeholder="Enter Text">
	</textarea>
	</div>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
	<button type="button" onclick="saveChanges();" class="btn btn-primary">Save changes</button>
	</div>
	</div>
	</div>
	</div>

	<div class=" page-fBot2">
	<div class="card shadow mb-4">
	<div class="card-header py-3">
	<h6 class="m-0 font-weight-bold">Page Text Management </h6>
	</div>
	<div class="card-body">
	<div class="row">
	<div class="col-md-3">
	<input type="text" id="txtKey" placeholder="Search..." class="form-control"/>
	</div>

	<div>
	<button type="button" id="btnSearch" class="btn btn-primary" onclick="search()" hidden>Search</button>
	</div>
	<div class="col-xs-12 col-md-3">
	<select class="form-control" id="listEvent">
	<option value="">Select Language</option>
	<option value="en">English</option>
	<option value="id">Indonesia</option>
	<option value="pt">Portuguese</option>
	<option value="my">Myanmar</option>
	</select>
	</div>

	<div class="col-md-3">
	<button onclick="resetModal()" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
	Add New Text
	</button>
	</div>
	</div>
	</div>
	</div>
	<div class="card shadow mb-4">
	<div class="card-header py-3">
	<h6 class="m-0 font-weight-bold"></h6>
	</div>
	<div class="card-body">
	<div class="table-responsive">
	<table class="table" width="100%" cellspacing="0">
	<thead>
	<tr>
	<td scope="col">Key</td>
	<td scope="col">Text</td>
	<td scope="col">Language Code</td>
	<td scope="col">Action</td>
	</tr>
	</thead>
	<tbody id="listContent">
	</tbody>
	</table>
	</div>

	<nav aria-label="...">
	<ul class="pagination" id="paging">
	</ul>
	</nav>

	</div>
	</div>

	</div>



	</div>
	<!-- /.container-fluid -->

	</div>
	<!-- End of Main Content -->
	<!-- Footer -->
	<footer class="sticky-footer bg-white">
	<div class="container my-auto">
	<div class="copyright text-center my-auto">
	<span>Copyright © EightElements 2020</span>
	</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>

	<!-- Bootstrap core JavaScript-->
	<script src="/Content/vendor/jquery/jquery.min.js"></script>
	<script src="/Content/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

	<!-- Core plugin JavaScript-->
	<script src="/Content/vendor/jquery-easing/jquery.easing.min.js"></script>

	<!-- Custom scripts for all pages-->
	<script src="/Content/js/sb-admin-2.js"></script>
	<script src="/Content/vendor/chart.js/Chart.min.js"></script>
	<!-- Page level plugins -->
	<script src="/Content/vendor/datatables/jquery.dataTables.min.js"></script>
	<script src="/Content/vendor/datatables/dataTables.bootstrap4.min.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
	<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

	<script>
	$(document).ready(function () {
	stopLoading();
	changeActive();
	})
	function startLoading() {
	$(".loading").show();
	}
	function stopLoading() {
	$(".loading").hide();
	}
	function validator(id) {
	var variable = $("#" + id);
	var check = variable.val();
	if (check === null \|\| check === '' \|\| check === 0 \|\| check === '0') {
	variable.focus();
	return false;
	}
	return true;
	}
	function changeActive() {
	var path = 'PortalPageText';
	if (path == 'HomeIndex') {
	$("#Dashboard").addClass("nav-item active");
	}
	else if (path == 'PortalIndex' \|\| path =='portalCategory') {
	$("#PortalManagement").addClass("nav-item active");
	}
	else if (path == 'PortalPageText') {
	$("#PageTextManagement").addClass("nav-item active");
	}
	else if (path == 'HomeContent' \|\| path == 'homedetail' \|\| path == 'homedetail2') {
	$("#ContentManagement").addClass("nav-item active");
	}
	else if (path == 'HomePromotion') {
	$("#Promotion").addClass("nav-item active");
	}
	else if (path == 'HomeShowcase' \|\| path == 'homeshowcasedetail2') {
	$("#ShowcaseManagement").addClass("nav-item active");
	}
	else if (path == 'HomeUsers' \|\| path == 'homeUsersDetail') {
	$("#UserManagement").addClass("nav-item active");
	}
	else if (path == 'HomeMailBox') {
	$("#mailBox").addClass("nav-item active");
	}
	else if (path == 'HomeApproval' ) {
	$("#Approval").addClass("nav-item active");
	}
	else if (path == 'HomeNonCcContent') {
	$("#NonCcContent").addClass("nav-item active");
	}


	}



	</script>
	<script src="/Scripts/api.js"></script>

	<script>
	var lang = "";
	var id = 0;
	var listText = [];
	var indexId = 0;
	var page = 0;
	var pageSize = 10;
	var keySearch = "";
	var convertPage = 0;

	$(document).ready(function () {
	//getAllEventParticipant();
	search();
	})

	$("#txtKey").on("input", function () {
	search();
	});

	$("#listEvent").on('change', function () {
	lang = this.value;
	//GetPageText();
	convertPage = 5;
	getAllEventParticipant(convertPage);

	})

	function GetPageText() {
	GetAllPageText(lang).then(response =>
	JSON.parse(response)
	).then(data => {
	listText = data;
	drawListContent(data);
	});
	}

	function getAllEventParticipant(convertPage, keySearch) {
	if (convertPage > 0) { page = 0; }
	keySearch = $("#txtKey").val();
	$.get('/rest/GetAllPageText?lang=' + lang + '&startIndex=' + page + '&pageSize=' + pageSize + '&keySearch=' + keySearch, function (data, status) {
	var json = JSON.parse(data);
	if (json.PageTexts.length == 0) {
	notFound();
	$("#listContent").empty();
	$("#paging").empty();
	} else {
	drawListContent(json.PageTexts);
	listText = json.PageTexts;
	console.log(json);
	drawPaging(json.PageCount);}

	});
	}
	function movePage(i) {
	page = i;
	console.log(i)
	getAllEventParticipant();
	}

	function drawPaging(count) {
	var countpage = 2;
	var nextpad = 3;
	var totalpage = count > pageSize ? count / pageSize : 1;
	var limitpage = nextpad + page >= totalpage ? totalpage : page + nextpad;
	var firstpage = page - countpage >= 0 ? page - countpage : 0;

	$("#paging").empty();
	if (page <= 0) {
	$("#paging").append(`<li class="page-item disabled ">
	<a class="page-link" href="#" tabindex="-1" onclick="movePage(${page - 1})">Previous</a> </li>`)
	} else {

	$("#paging").append(`<li class="page-item ">
	<a class="page-link" href="#" tabindex="-1" onclick="movePage(${page - 1})">Previous</a> </li>`)
	}

	for (var i = firstpage; i < limitpage; i++) {
	if (i == page) {
	$("#paging").append(`<li class="page-item active" aria-current="page">
	<a class="page-link" onclick="movePage(${i})" href="#">${i + 1}</a> </li>`)
	} else {
	$("#paging").append(`<li class="page-item" aria-current="page">
	<a class="page-link" onclick="movePage(${i})" href="#">${i + 1}</a></li>`)
	}
	}

	if (page >= totalpage -1) {
	$("#paging").append(`<li class="page-item disabled">
	<a class="page-link"href="#" tabindex="-1" ">next</a></li>`)
	} else {
	$("#paging").append(`<li class="page-item">
	<a class="page-link"href="#" tabindex="-1" onclick="movePage(${page + 1})">next</a> </li>`)
	}
	}
	//End Pagination

	function updateModal(index) {
	indexId = index;
	var value = listText[index];
	id = value.Id;
	$("#text").val(value.Text);
	$("#key").val(value.Key);
	$("#lang").val(value.LanguageCode);
	}
	function resetModal() {
	id = 0;
	indexId = 0;

	$("#key").val('');
	$("#text").val('');
	$("#text").empty('');
	$("#lang").val('');
	var text = document.createTextNode(value.Text);
	}
	function validate(key, text, lang) {
	var message = '';
	if (key == '') {
	message += 'Key cannot be empty \n';
	}
	if (text == '') {
	message += 'Text cannot be empty \n';
	}
	if(lang == ''){
	message += 'Language cannot be empty \n';
	}
	return message;
	}
	function saveChanges() {
	var text = $("#text").val();
	var key = $("#key").val();
	var lang = $("#lang").val();
	var valideteResult = validate(key, text, lang);
	if (valideteResult != '') {
	error(valideteResult);
	return;
	}

	AddOrUpdatePageText(id, key, text, lang).then(response => {
	if (response == 'ok') {
	$("#succesUpdateData").html(`<div class="alert alert-success alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
	<i class="fas fa-check"> Success Update ... </i>
	</div>`);
	setTimeout(function () {
	$("#succesUpdateData").html("");
	}, 2000)
	}

	getAllEventParticipant();
	}
	);
	$('#exampleModal').modal('hide');
	//$('#exampleModal').modal('toggle');
	}
	function drawListContent(response) {
	$("#listContent").empty();
	var content = '';
	response.map((value, index) => {
	content += `<tr><td>${value.Key}</td>`;
	content += `<td>${value.Text}</td>`;
	content += `<td>${value.LanguageCode}</td>`;
	content += `<td><a onclick='updateModal(${index})' href="javascript:void(0)" data-toggle="modal" data-target="#exampleModal">
	<i class="fas fa-edit fa-lg"></i></a>`;
	content += `<a onclick='deleteById(${value.Id})'><i class="fas fa-trash pagetext-delete"></i></a>`;
	content += `</td></tr>`;
	})
	$("#listContent").append(content);
	}

	function deleteById(id){
	swal({
	title: "Are you sure?",
	text: "Once deleted, you will not be able to recover",
	icon: "warning",
	buttons: true,
	dangerMode: true,
	})
	.then((willDelete) => {
	if (!willDelete) {
	return;
	}
	var url = "/Rest/DeletePageText/" + id;
	$.ajax({
	type: "GET",
	url: url,
	success: function (response) {
	if (response) {
	swal("Success", "Deleted Successfully", "success")
	.then(x => location.reload());
	}
	},
	error: function () {
	alert("Error deleteById function")
	}
	});
	});
	}

	var t = document.getElementById("txtKey");
	t.addEventListener("keyup", function (event) {
	if (event.keyCode === 13) {
	event.preventDefault();
	document.getElementById("btnSearch").click();
	}
	});

	function search() {
	keySearch = $("#txtKey").val();
	lang = "";
	convertPage = 5;
	getAllEventParticipant(convertPage, keySearch);
	}

	function notFound() {
	//swal("Not Found", "Data Not Found...", "error");
	}
	function Success() {
	swal("Success", "Success Update Data", "success");
	}
	function error(msg) {
	swal("error", msg, "error");
	}


	</script>


	</body>
	</html>

There is pagination in code from cms swtm

There is pagination in code from cms swtm

Reviewed by Leo on Maret 09, 2023 Rating: 5

Tidak ada komentar

Langganan: Posting Komentar (Atom)