Ads Top

Complete javascript grid code

How to create complete javascript grid?

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:

Copyright Reserved to Anything Learn. Powered by Blogger.