前端数据分页——table表数据分页方法(1)

我们在页面展示一个table表格的时候，当数据量较大时，常常会考虑到数据分页的问题，数据分页一般有三种方式，分别是前端数据分页，后端数据分页，数据库分页。

前端数据分页：是把所有数据加载到前端，然后在前端用js实现数据的分页，这种分页方式是最方便简单的，但是也是效果最差的。因为当数据量很大时，前端加载数据耗时很久，页面会因为加载数据而无法正常显示，体验很差。并且因为数据是一次性加载到前端，当数据库有新数据更新时，如果不刷新页面重新读取数据库，就无法获取最新数据。

后端数据分页：是在后端将数据全部查出来，，将前端需要显示的部分数据筛选出来，传回前端。这种方式相对于前端数据分页来说效果要好很多。前端只用回传当前页要显示的少量数据，前端接收到的数据量也很少，传输负担就会小很多，可以减轻页面加载延迟。后端数据分页的缺点和前端刷新一样，如果想获取新数据，就要重新从数据库中加载所有数据到后端。

数据库分页：数据库分页是最好的分页方式，在后端拼接查询sql的时候，就把前端需要展示部分的数据条件拼接出来。每次都重新查询数据库，可以获取到最新数据，每次从数据库查询的数据量，只有前端当前要显示的那一部分，大大减少了数据的传输，缺点是sql的拼接比较复杂。

作者对三种分页方式都进行了总结，分为三篇文章。本文为前端数据分页方法。

一、第一次刷新页面逻辑

首先第一次刷新页面时，固定显示第一页数据，当数据超过一页时，按照每页最大条数正常显示，当数据不足一页时，显示所有数据。其中everypage是用来控制每页最大显示条数的

/** ajax刷新数据 **/
    function Refresh() {
        //获取筛选条件
        var taskid = $("#taskId").val();
        //每页显示条数
        var everypage = @ViewData["PageShowNum"];

        $.ajax({
            type: "GET",
            url: "/Task/Refresh",
            data: { "taskid": taskid },
            dataType: "text",
            success: function (data) {
                if (data == "") {
                    $("#alert").html("数据刷新异常");
                } else {
                    var str = "";
                    var newdata = JSON.parse(data);
                    //数据量大于一页时分页
                    if (newdata.dataInfo.length != 0 && newdata.dataInfo.length >= everypage) {
                        for (var i = 0; i < everypage; i++) {
                            str += "<tr><td>" + newdata.dataInfo[i].recordTime +
                                "</td><td>" + newdata.dataInfo[i].userName +
                                "</td><td>" + newdata.dataInfo[i].taskID +newdata.dataInfo[i].info + "</td></tr>";
                        }
                    }
                    //数据量小于一页时，直接显示
                    else if (newdata.dataInfo.length != 0 && newdata.dataInfo.length < everypage) {
                        for (var i = 0; i < newdata.dataInfo.length; i++) {
                            str += "<tr><td>" + newdata.dataInfo[i].recordTime +
                                "</td><td>" + newdata.dataInfo[i].userName +
                                "</td><td>" + newdata.dataInfo[i].taskID +newdata.dataInfo[i].info + "</td></tr>";
                        }
                    }

                    $("#tableText").html(str);
                    //总页数
                    var pagenum = Math.ceil(newdata.dataInfo.length / everypage);
                    ShowPageFloot("1", @ViewData["AllPageNum"]);
                }
            }
        });

        return true;
    }

二、页面跳转功能

我们再做一个用于点击跳转页面的页脚样式

/** 显示页面跳转功能 **/
    function ShowPageFloot(getpageclick, pagenum) {
        var pagehtml = "当前第 " + getpageclick + " 页，共 <span id = \"lastpagenum\">" + pagenum + "</span> 页，" +
            "<input type=\"text\" id=\"pageclick\" style=\"width: 30px; margin - right: 5px;\" name=\"pageclick\"/>" +
            "&nbsp;&nbsp;<input type=\"submit\" id =\"jumppage\" onclick=\"Jump()\" value=\"跳转\" /> <input type=\"hidden\" id=\"hidpagenum\" value=\"" + pagenum +"\">";
        $("#page").html(pagehtml);
    }

生成的样式如下：

三、前端数据分页逻辑

在跳转功能的input框中输入要跳转的页面数字，点击跳转，跳转到指定页面，页面跳转部分js代码如下，在执行完跳转之后，记得调用跳转页面的页脚样式，从新刷新页脚数据：

/** 触发页面跳转 **/
    function Jump() {
        //每页显示条数
        var everypage = @ViewData["PageShowNum"];
        //计算数据分页总页数，向上取整
        var pagenum = Math.ceil(newdata.dataInfo.length / everypage);
        //获取输入的，将要跳转页的页码
        var getpageclick = $("#pageclick").val();
        //如果输入页码大于最大页数，跳转最后一页
        if (getpageclick > pagenum)
            getpageclick = pagenum;
        //如果输入页数小于第一页，跳转第一页
        if (getpageclick < 1)
            getpageclick = 1;
        //判断当前显示页，第一条数据，的序列数
        var begindata = (getpageclick - 1) * everypage;
        //判断当前显示页，最后一条数据，的序列数
        if (begindata + everypage > newdata.dataInfo.length) {
            enddata = newdata.dataInfo.length;
        }
        else {
            enddata = begindata + everypage;
        }
        //将计算出的起始数据和截止数据显示出来
        var str = "";
        if (newdata.dataInfo.length != 0) {
            for (var i = begindata; i < enddata; i++) {
                str += "<tr><td>" + newdata.dataInfo[i].recordTime +
                    "</td><td>" + newdata.dataInfo[i].userName +
                    "</td><td>" + newdata.dataInfo[i].taskID + newdata.dataInfo[i].info + "</td></tr>";
            }
        }
        $("#tableText").html(str);
        //ShowPageFloot(getpageclick, pagenum);
    }