Home pagination in javascript how to create pagination in javascript

how to create pagination in javascript

2:37 PM
Read
Pagination code in javascript.

View demo

<!DOCTYPE html>
<html>

<head>
    <style>
        #showPagination ul {
            padding: 0;
        }

        #showPagination li {
            display: inline;
            list-style: none;
        }

        .mainContainer {
            max-width: 1000px;
            margin: 30px auto;
            background: #f8f8f8;
            border: 1px solid #ccc;
            padding: 20px;
        }

        .containerBox {
            background: #fff;
            padding: 10px;
        }

        .fltr {
            float: right;
        }

        .mainContainer button, .mainContainer input[type='button'] {
            background: #0bf;
            color: #fff;
            padding: 3px 10px;
            cursor: pointer;
            border: 0;
            margin-right: 1px;
        }

        #showPagination li button {
            background: #0bf;
            color: #fff;
            padding: 5px 10px;
            cursor: pointer;
            border: 0;
            margin-right: 1px;
        }
    </style>
    <script>
        var studentData = [];
        var stId = '';
        var perPage = 2;

        function selectPageNumbers() {
            var selectPage = document.getElementById('selectPageNo').value;
            perPage = selectPage;
            showStudentData();
        }

        function saveStudent() {
            var stUName = document.getElementById('stName').value;
            var stURoll = document.getElementById('stRoll').value;
            var stUContact = document.getElementById('stContact').value;

            var studentGrid = {
                Name: stUName,
                Roll: stURoll,
                Contact: stUContact
            }
            studentData.push(studentGrid);

            document.getElementById('stName').value = '';
            document.getElementById('stRoll').value = '';
            document.getElementById('stContact').value = '';
        }

        function pagination() {
            // for pagination
            var totalRecords = studentData.length;
            var totalPage = totalRecords / perPage;
            var finalPages = String(totalPage).split('.');

            if (finalPages.length > 1) {
                totalPage = Number(finalPages[0]) + 1;
            }

            if (totalPage > 1) {
                var pText = '<ul>';
                for (var i = 1; i <= totalPage; i++) {
                    pText += '<li><button onclick="showStudentData(' + i + ')">' + [i] + '</button></li>';
                }
                pText += '</ul>';
                document.getElementById('showPagination').innerHTML = pText;
            }
        }

        function showStudentData(defaultPage = 0) {

            if (defaultPage != 0) {
                defaultPage = defaultPage - 1;
            }

            var strartFrom = defaultPage * perPage;
            var endTo = Number(strartFrom) + Number(perPage);

            if (endTo > studentData.length) {
                endTo = studentData.length;
            }

            var text = '';
            for (var i = strartFrom; i < endTo; i++) {
                text += '<tr>';
                text += '<td>' + studentData[i].Name + '</td>';
                text += '<td>' + studentData[i].Roll + '</td>';
                text += '<td>' + studentData[i].Contact + '</td>';
                text += '<td><button onclick="editRow(' + [i] + ')">Edit</button><button onclick="removeRow(' + [i] + ')">Delete</button></td>';
                text += '</tr>';
            }
            document.getElementById('showStudendAllData').innerHTML = text;
            pagination();
        }

        function removeRow(stuDentId) {
            studentData.splice(stuDentId, 1);
            showStudentData();
        }

        function editRow(stuDentId) {
            stId = stuDentId;
            document.getElementById('stName').value = studentData[stuDentId].Name;
            document.getElementById('stRoll').value = studentData[stuDentId].Roll;
            document.getElementById('stContact').value = studentData[stuDentId].Contact;

            document.getElementById('saveStudentId').style = 'display:none';
            document.getElementById('updateId').style = 'display:inline-block';

        }

        function updateRow() {

            var stUName = document.getElementById('stName').value;
            var stURoll = document.getElementById('stRoll').value;
            var stUContact = document.getElementById('stContact').value;

            var studentGrid = {
                Name: stUName,
                Roll: stURoll,
                Contact: stUContact
            }

            studentData[stId] = studentGrid;

            showStudentData();

            document.getElementById('stName').value = '';
            document.getElementById('stRoll').value = '';
            document.getElementById('stContact').value = '';

            document.getElementById('saveStudentId').style = 'display:inline-block';
            document.getElementById('updateId').style = 'display:none';

        }

        function searchData() {
            var inpSearVal = document.getElementById('searchDataId').value;
            var text = '';
            for (var i = 0; i <= studentData.length - 1; i++) {
                if (studentData[i].Name === inpSearVal || studentData[i].Roll == inpSearVal || studentData[i].Contact == inpSearVal) {
                    text += '<tr>';
                    text += '<td>' + studentData[i].Name + '</td>';
                    text += '<td>' + studentData[i].Roll + '</td>';
                    text += '<td>' + studentData[i].Contact + '</td>';
                    text += '<td><button onclick="editRow(' + [i] + ')">Edit</button><button onclick="removeRow(' + [i] + ')">Delete</button></td>';
                    text += '</tr>';
                }
                document.getElementById('showStudendAllData').innerHTML = text;
            }
        }

        function junkData() {
            for (var i = 0; i <= 103; i++) {
                var junkObj = {
                    Name: "Sheo" + (i + 1),
                    Roll: (i + 1),
                    Contact: Math.random() * 1000
                }
                studentData.push(junkObj);
            }
            showStudentData();
        }

    </script>

</head>

<body onload="junkData()">
    <div class="mainContainer">
        <input type="text" id="stName" placeholder="Student Name" required>
        <input type="text" id="stRoll" placeholder="Student Roll" required>
        <input type="text" id="stContact" placeholder="Student Contact" required>
        <input type="button" value="Save Student Grid" id="saveStudentId" onclick="saveStudent()">
        <input type="button" id="updateId" value="Update" onclick="updateRow('1')" style="display:none">
        <br>
        <br>
        <div><input type="button" value="Show Data" onclick="showStudentData(0)"> </div>
        <br>
        <div class="containerBox">
            <div class="fltr">
                <label>Show</label>
                <select id="selectPageNo" onchange="selectPageNumbers()">
                    <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>
                    <option value="500">500</option>
                </select>
            </div>
            <input type="text" id="searchDataId"><button onclick="searchData()">Search</button>
            <br>
            <br>
            <table border="1">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Roll Number</th>
                        <th>Contact Number</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="showStudendAllData">

                </tbody>

            </table>
            <div id="showPagination">

            </div>
        </div>
    </div>

</body>

</html>

Tags :

No comments:

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )
Copyright Reserved to Anything Learn. Powered by Blogger.