Complete javascript grid code
How to create complete javascript grid?
Code demo
Code demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<script>
var stuDataArr = [];
var editID = '';
var perPage = 5;
var activePage = 1;
var allTotalPages;
function stuSave() {
var stName = document.getElementById('stuName').value;
var stRoll = document.getElementById('stuRoll').value;
var stCont = document.getElementById('stuCont').value;
var rowObjec = {
name: stName,
roll: stRoll,
contact: stCont
}
stuDataArr.push(rowObjec);
document.getElementById('stuName').value = '';
document.getElementById('stuRoll').value = '';
document.getElementById('stuCont').value = '';
}
function pagination() {
var pages = stuDataArr.length;
var totalPages = pages / perPage;
var finalPages = String(totalPages).split('.');
if (finalPages.length > 1) {
finalPages = Number(finalPages[0]) + 1;
}
if(finalPages >1){
var pg = '<ul>';
for (var i = 1; i <=finalPages; i++) {
pg += '<li><button
id="page' + i + '" onclick="showData(' + i + ')">' + i + '</button></li>';
}
pg += '</ul>';
document.getElementById('showPagiOutput').innerHTML = pg;
}
allTotalPages = finalPages;
}
function showData(defaultPage=0) {
if(defaultPage != 0){
defaultPage = defaultPage - 1;
}
var stratFrom = defaultPage * perPage;
var endTo = Number(stratFrom) + Number(perPage);
if(endTo > stuDataArr.length ){
endTo = stuDataArr.length;
}
var text = '';
for (var i = stratFrom; i < endTo; i++) {
text += '<tr>';
text += '<td>' + stuDataArr[i].name + '</td>';
text += '<td>' + stuDataArr[i].roll + '</td>';
text += '<td>' + stuDataArr[i].contact + '</td>';
text += '<td><button
onclick="Edit(' + [i] + ')">Edit</button><button onclick="Delete(' + [i] + ')">Delete</button></td>';
text += '</tr>';
}
document.getElementById('showDataContainer').innerHTML = text;
document.getElementById('page'+activePage).style.background = '#eee';
if(defaultPage===0){
activePage=1
}else{
activePage = defaultPage + 1;
}
document.getElementById('page'+activePage).style.background = '#0bf';
}
function Delete(val) {
stuDataArr.splice(val, 1);
showData();
}
function Edit(val) {
editID = val;
document.getElementById('stuName').value = stuDataArr[editID].name;
document.getElementById('stuRoll').value = stuDataArr[editID].roll;
document.getElementById('stuCont').value = stuDataArr[editID].contact;
document.getElementById('stuSaveId').style = 'display:none;';
document.getElementById('stuUpdateId').style = 'display:inline-block;';
}
function stuUpdate() {
stuDataArr[editID].name = document.getElementById('stuName').value;
stuDataArr[editID].roll = document.getElementById('stuRoll').value;
stuDataArr[editID].contact = document.getElementById('stuCont').value;
document.getElementById('stuName').value = '';
document.getElementById('stuRoll').value = '';
document.getElementById('stuCont').value = '';
document.getElementById('stuSaveId').style = 'display:inline-block;';
document.getElementById('stuUpdateId').style = 'display:none;';
showData();
}
function stuSearchData() {
var searchd = document.getElementById('stuSearchId').value;
var text = '';
for (var i = 0; i <= stuDataArr.length - 1; i++) {
if (stuDataArr[i].name == searchd || stuDataArr[i].roll == searchd || stuDataArr[i].contact == searchd) {
text += '<tr>';
text += '<td>' + stuDataArr[i].name + '</td>';
text += '<td>' + stuDataArr[i].roll + '</td>';
text += '<td>' + stuDataArr[i].contact + '</td>';
text += '<td><button
onclick="Edit(' + [i] + ')">Edit</button><button onclick="Delete(' + [i] + ')">Delete</button></td>';
text += '</tr>';
}
document.getElementById('showDataContainer').innerHTML = text;
}
}
function junkData() {
for (var i = 1; i <= 51; i++) {
var rowObjec = {
name: "Sheo" + i,
roll: i,
contact: "986284595" + i
}
stuDataArr.push(rowObjec);
}
pagination();
showData();
}
function selePerPage(){
var selectppVale = document.getElementById('selectPageIDPer').value;
perPage = Number(selectppVale);
pagination();
showData();
}
function upatePage(){
var valPerPag =document.getElementById('gotoDirectPage').value;
showData(valPerPag);
}
function prevPage(){
if(activePage!=0){
showData(activePage-1);
}
}
function nextPage(){
if(activePage != allTotalPages){
showData(activePage+1);
}
}
</script>
<style>
#showPagiOutput ul {
list-style: none;
padding: 0;
}
#showPagiOutput ul li {
list-style: none;
display: inline-block;
margin: 1px;
}
.removeCls{ background:transparent; color: #000;}
.activeCls{ background:#0bf; color: #fff;}
</style>
</head>
<body onload="junkData()">
<div>
<input type="text" id="stuName" placeholder="Student Name">
<input type="text" id="stuRoll" placeholder="Student Roll
Number">
<input type="text" id="stuCont" placeholder="Student
Contact">
<button id="stuSaveId" onclick="stuSave()">Save</button>
<button id="stuUpdateId" onclick="stuUpdate()" style="display:none;">Update</button>
</div>
<br><br>
<input type="text" id="stuSearchId" placeholder="Search"><button onclick="stuSearchData()">Search</button>
<br><br>
<button onclick="showData()">Show Data</button>
<br><br>
<div>
<select id="selectPageIDPer" onchange="selePerPage()">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
Search page direct: <button onclick="prevPage()">Prev</button> <input type="text" id="gotoDirectPage" placeholder="Enter page
no." onkeyup="upatePage()"> <button onclick="nextPage()">Next</button>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Roll Number</th>
<th>Contact Number</th>
<th>Action</th>
</tr>
</thead>
<tbody id="showDataContainer"></tbody>
</table>
<div id="showPagiOutput"></div>
<br><br>
</body>
</html>
No comments:
Note: Only a member of this blog may post a comment.