JS处理数据实现分页功能

这几天有小伙伴讨论起了分页的相关问题，这里我也简单讲下前端如何简单便捷的利用js（库）写出优雅，好用的分页工具。

分页是个很简单又超多接触的技术点，粗略来讲分如下两种：

真分页——每次根据页码、页大小获取数据并展示。

假分页——一次性获取所有数据，根据页码、页大小展示。

公认比较好的做法是真分页，这样可以避免很多问题（如内存占用过多）。

有一点需要注意，单纯的前端是无法独立完成数据分页的（废话），所以后端支持是必须的。

作为支持，webapi除了返回所请求的数据，还应返回数据总量以便计算页数：

如上图所示，我们可以看出数据总量27，分页大小10（这边只请求了10条数据）。

如果你拥有如上图的webapi的支持，就可以接着往下写了。

我使用对象字面量封装的方法：

var post = {
    url: function () {
        return "webapi路径";
    },
    ///返回带分页信息
    //[ele]填充信息元素id
    ///[ele2]填充分页元素id
    //[tagname]信息元素一级元素名
    ///[tag2name]信息元素二级元素名
    //[index]页码
    pager: function (ele, ele2, tagname, tag2name, index, where) {
        //页大小
        var size = $.cookie('pagesize') == undefined ? 10 : $.cookie('pagesize');
        //封装的ajax
        load(post.url(), {参数列表}, function (data) {<br data-filtered="filtered">　　　　　　  //展示数据
            $(ele).html(createhtml(data.rows, tagname, tag2name));
            //设置分页信息
            $(ele2).attr('index', index).attr('rowcount', size).attr('total', data.total);
            //填充分页
            pagertool(ele, ele2, post, tagname, tag2name, where);
        });
    }
}

load、createhtml和pagertool是我自己封装的几个方法，代码如下：

///公共加载方法
//[turl]访问地址
///[postdata]提交数据(标准post格式)
//[callback]回调函数(可匿名)
function load(turl, postdata, callback) {
    jquery.support.cors = true;
    try {
        $.ajax({
            url: turl,
            timeout: 10000,
            type: "post",
            data: postdata,
            success: function (data) {
                if (data != null) {
                    json = eval("(" + data + ")");
                    callback(json);
                }
            }
        });
    } catch (e) {
        mbox.show(e.message);
    }
}
 
///创建html结构
//[data]数据源
///[tagname]一级元素标签名称
//[tag2name]二级元素标签名称
function createhtml(data, tagname, tag2name) {
    var html = '';
    for (var i = 0; i < data.length; i++) {
        html += `<${tagname}>`;
        $.each(data[i], function (i, v) {
            html += `<${tag2name}>${v}</${tag2name}>`;
        });
        html += `</${tagname}>`;
    }
    return html;
}

pagertool方法：

//公共分页工具条
///[dataele]数据主体
//[ele]分页主体
///[obj]被传入的类
//[where]条件
///[w]按照何种方式搜索
function pagertool(dataele, ele, obj, tag1, tag2, where) {
    var total = $(ele).attr('total') - 0;
    var rowcount = $(ele).attr('rowcount') - 0;
    var index = $(ele).attr('index') - 0;
    var count = total % rowcount == 0 ? total / rowcount : math.floor(total / rowcount) + 1;
    var html = '';
    html += '<p class="page">';
    html += '<a href="javascript:void(0)" class="prepage">上一页</a>';
    for (var i = 1; i <= count; i++) {
        if (index != i) {
            html += `<a href="javascript:void(0)" class="nowpage">${i}</a>`;
        } else {
            html += `<a href="javascript:void(0)" class="nowpage" style="background:#acddea; color:#226f83; border:#93d3e4 1px solid;">${i}</a>`;
        }
    }
    html += '<a href="javascript:void(0)" class="nextpage">下一页</a>';
    html += '</p>';
    $(ele).html('').html(html);
    //上一页
    $(ele).find('a[class=prepage]').bind('click', function () {
        var index = $(this).parent().parent().attr('index') - 0;
        if (index > 1) {
            $(this).parent().parent().attr('index', index - 1);
            obj.pager(dataele, ele, tag1, tag2, index - 1, where);
        }
    });
    //下一页
    $(ele).find('a[class=nextpage]').bind('click', function () {
        var index = $(this).parent().parent().attr('index') - 0;
        if (index < count) {
            $(this).parent().parent().attr('index', index + 1);
            obj.pager(dataele, ele, tag1, tag2, index + 1, where);
        }
    });
    //当前页
    $(ele).find('a[class=nowpage]').bind('click', function () {
        var index = $(this).parent().parent().attr('index') - 0;
        $(this).parent().parent().attr('index', $(this).text());
        obj.pager(dataele, ele, tag1, tag2, $(this).text(), where);
    });
}

调用方式会是这样的：

post.pager(testbox, pagerbox, 'ul', 'li', 1, `筛选数据的条件`);

使用了如上代码，即可按照所返回的json数据的格式自动映射到容器内（按照传入的tagname生成dom）：

切换后效果：

分页工具条，生成在页面是这样的：

<p class="page"><br data-filtered="filtered">    <a href="javascript:void(0)" class="prepage">上一页</a><br data-filtered="filtered">    <a href="javascript:void(0)" class="nowpage" style="background:#acddea; color:#226f83; border:#93d3e4 1px solid;">1</a><br data-filtered="filtered">    <a href="javascript:void(0)" class="nowpage">2</a><br data-filtered="filtered">    <a href="javascript:void(0)" class="nowpage">3</a><br data-filtered="filtered">    <a href="javascript:void(0)" class="nextpage">下一页</a><br data-filtered="filtered"></p>

到此这篇关于js处理数据实现分页功能的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持。