jQuery实现数据分页显示Demo

来源：互联网发布：自助认证发票软件编辑：程序博客网时间：2024/05/23 11:46

此小Demo只为记下这段自己写过的代码功能：前端页面（非数据库后台分页）jQuery无刷新分页

<!DOCTYPE html><html lang="zh"><head>    <title>jQuery数据分页显示Demo</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0">    //导入jQuery包    <script src="jquery/jquery-1.10.2.min.js" type="text/javascript"></script>    <script src="jquery/jquery.number.js" type="text/javascript"></script>    <script>        var a = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12","13","14","15","16");        //每页数据量        var mypage = 4;        //整除页数        var pagenumber = parseInt(a.length / mypage);        //余数，不能整除的情况        var remainder;        if(a.length%mypage==0){            remainder=0;        }else{            remainder=1;        }        var tablehtml;        var spanhtml;        var tag = 1;        $(document).ready(function () {            for (var i = (tag - 1) * mypage; i < tag * mypage; i++) {                if(a[i]==null){                    tablehtml += "<tr>" +                            "<td>" + "<br>" + "</td>" +                            "</tr>";                }else{                    tablehtml += "<tr>" +                            "<td>" + a[i] + "</td>" +                            "</tr>";                }            }            ;            $('#table').html("");            $('#table').html(tablehtml);            spanhtml = "<span>共" + (pagenumber+remainder) + "页|第" + tag + "页</span>";            for (var i = 1; i <= (pagenumber+remainder); i++) {                spanhtml += "<a href='#' onclick='gotonetxt(" + i + ")'>" + i + "</a>";            }            ;            $('#info').html("");            $('#info').html(spanhtml);        });        function gotonetxt(tag) {            tablehtml = "";            spanhtml = "";            for (var i = (tag - 1) * mypage; i < tag * mypage; i++) {                if(a[i]==null){                    tablehtml += "<tr>" +                            "<td>" + "<br>" + "</td>" +                            "</tr>";                }else{                    tablehtml += "<tr>" +                            "<td>" + a[i] + "</td>" +                            "</tr>";                }            }            ;            $('#table').html("");            $('#table').html(tablehtml);            spanhtml = "<span>共" + (pagenumber+remainder) + "页|第" + tag + "页</span>";            for (var i = 1; i <= pagenumber+remainder; i++) {                spanhtml += "<a href='#' onclick='gotonetxt(" + i + ")'>" + i + "</a>";            };            $('#info').html("");            $('#info').html(spanhtml);        }        ;    </script></head><body><table id="table"></table><div class=""></div>    <span id="info">    </span></body></html>

结果图片：每页四行数据，显示总行数，当前行数，点击对应行数，跳转对应页码对应行数

0 0