jq动态分页

最新推荐文章于 2022-04-07 10:39:57 发布

fjnh

最新推荐文章于 2022-04-07 10:39:57 发布

阅读量399

点赞数 1

分类专栏： jq动态获取json数据进行分页文章标签： jquery javascript json

本文链接：https://blog.csdn.net/qq_41810380/article/details/109582508

版权

jq动态获取json数据进行分页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
    <meta charset='utf-8'>
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
 <style type="text/css">
 </style>
</head>
<body >
    <table class="table5">
                <thead>
                <tr>
                    <th class="th1">推荐好友排序</th>
                    <th class="th2">好友QQ</th>
                    <th class="th3">好友昵称</th>
                    <th class="th4">电话</th>
                </tr>
                </thead>
                <tbody class="friend-box" id="friend_ul" style="text-align: center">

                <div style="text-align: center">
                    <em><b class="nowpages">1</b>/<b class="allpages">1</b></em>
                    <a href="javascript:;" class="btnprv page_pre" onclick="">上一页</a>

                    <a href="javascript:;" class="btnnext page_next"
                       onclick="">下一页</a>
                </div>
                </tbody>
            </table>



    <script type="text/javascript">
        //测试数据
        obj = [
            { rolename: "张1", userid: "123456789", tel: "666" },
            { rolename: "张2", userid: "123456789", tel: "666" },
            { rolename: "张3", userid: "123456789", tel: "666" },
            { rolename: "张4", userid: "123456789", tel: "666" },
            { rolename: "张5", userid: "123456789", tel: "666" },
            { rolename: "张6", userid: "123456789", tel: "666" },
            { rolename: "张7", userid: "123456789", tel: "666" },
            { rolename: "张8", userid: "123456789", tel: "666" },
            { rolename: "张9", userid: "123456789", tel: "666" },
            { rolename: "张10", userid: "123456789", tel: "666" },
            { rolename: "张11", userid: "123456789", tel: "666" },
            { rolename: "张12", userid: "123456789", tel: "666" },
            { rolename: "张13", userid: "123456789", tel: "666" },
            { rolename: "张14", userid: "123456789", tel: "666" },
            { rolename: "张15", userid: "123456789", tel: "666" },
        ];
            var cur_page = 1;
            if (obj.length > 0) {
                $.each(obj, function (k, v) {
                    v["userid_special"] = replaceStr(v["userid"],4,3);
                    if (k < 9) {
                        v["index"] = "0" + (k + 1);
                    } else {
                        v["index"] = k + 1;
                    }
                });
            }
            var ps = 7;
            var start = (cur_page - 1) * ps;
            var end = cur_page * ps;
            var total = Math.ceil(obj.length / ps);
            total = total == 0 ? 1 : total;
            var cur_friends = obj.slice(start, end);
            $(".allpages").text(total);            
            $(".page_pre").unbind().click(function () {
                        cur_page--;
                        cur_page = cur_page || 1;
                        var start = (cur_page - 1) * ps;
                        var end = cur_page * ps;
                        var cur_friends = obj.slice(start, end);
                        renderPage(cur_friends);
                    });
            $(".page_next").unbind().click(function () {
                cur_page++;
                cur_page = cur_page >= total ? total : cur_page;
                var start = (cur_page - 1) * ps;
                var end = cur_page * ps;
                var cur_friends = obj.slice(start, end);
                renderPage(cur_friends);
            });
            //好友渲染函数
            var renderPage = function (cur_friends) {       
                    $(".nowpages").text(cur_page);
                    $('#friend_ul tr').remove();
                    $.each(cur_friends, function (k, v) {
                        var html = "<tr><td class='munber'>"+v['index'] +"</td><td class='friend_qq_special' >"+v['userid_special'] +"</td><td class='rolename'>"+v['rolename'] +"</td><td class='tel' >"+v['tel'] +"</td></tr>";        
                         $("#friend_ul").append(html);
                    });

            };
            renderPage(cur_friends);


// *屏蔽qq号
function replaceStr(str,start,len){
    var star = '';
    for(var i=0;i<len;i++) {
        star += '*';
    }
    return str.substring(0,start-1) + star + str.substring(start+len-1, str.length);
}

    </script>
</body>
</html>