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') == undefine形容夏天的成语d ? 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>`;        } el {            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处理数据实现分页功能的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。