js写的一个简单分页

一些框架自带分页，但是我还是造个轮子吧：

1。分页调用【写法示例，一般在json处理完成后使用】：

后端需要输出

1）所有数据总数

2）每页数量和每页数据

            'limit'=>$_limit,
            'total'=>$res_total,
            'content'=> $res,

3）js调用数据渲染

                    // 分页
                    setTimeout(function () {
                        var _limit = datas.limit;
                        var _total = datas.total;
                        var _uri = "data_daily_list.php?nav=data&tags=options"+"&account_charge_id="+account_charge_id+"&agent_id="+agent_id+"&state="+state;
                        var _word1 = "page";
                        var _page1 = page;

                        paginition(_limit, _total, _uri, "list-daily", "daily-happenning-div", _word1, _page1);
                    },800);

2。分页自动渲染【思路，仅供参考】：

// 处理分页
        let tags = getThisUrlParam("", "tags"); // 分页类型标识
        if (tags === "keyword_func") {

            let radio = getThisUrlParam("", "radio");
            let keyword = getThisUrlParam("", "keyword");
            let date_1 = getThisUrlParam("", "date_1");
            let date_2 = getThisUrlParam("", "date_2");
            let page = getThisUrlParam("", "page");
            let state = getThisUrlParam("", "state");

            keyword_func_post(radio, keyword, date_1, date_2, page, state);

            $(".input-keyword").val(keyword);
            $(".date-1").val(date_1);
            $(".date-2").val(date_2);

            let that_radio = $(".keyword-class");
            for(let i=0; i<that_radio.length; i++){

                if (that_radio.eq(i).val() === radio) {
                    that_radio.eq(i).attr("checked", true);
                }
            }

        }else if(tags === "options"){

            let account_charge_id = getThisUrlParam("", "account_charge_id");
            let agent_id = getThisUrlParam("", "agent_id");
            let page = getThisUrlParam("", "page");
            let state = getThisUrlParam("", "state");

            options_post(account_charge_id, agent_id, page, state);

            setTimeout(function () {
                $(".account_charge_id-"+account_charge_id).addClass("span-item-active");
                $(".agent_id-"+agent_id).addClass("span-item-active");
            }, 1500);


        }else if(tags === "daily_list" || tags === null){
            let page = getThisUrlParam("", "page");
            daily_list_post(page);
        }

3。分页核心处理【可以整个使用，不需要修改】：

// 处理分页-整页
// paginition(_limit, _total, _uri, class_append列表渲染类, class_only分页div的唯一类, word1网址中的key（一般叫做page）, num1当前第几页,)
function paginition(_limit, _total, _uri, class_append, class_only, word1, num1) {
    console_log("分页已经启动");
    $("."+class_only).remove();

    var limit = _limit; // 一页显示多少条数据
    var total = _total; // 数据总记录数
    var uri = _uri; // 主页面地址（带参数）
    var now_page = num1; // 当前第几页
    if (!now_page){now_page=1}

    var first_page = 1; // 首页
    var end_page = (total-total%limit)/limit+1; // 最后一页
    var all_page = end_page; // 总共有多少页

    var before_page = 1; // 计算前一页
    var after_page = now_page*1+1;

    var div_total = '<span class="limit">共'+ _total +'条数据</span>';

    var first_url = uri+"&"+ word1 +"=" + first_page;
    var first = '<a href="'+ first_url +'" class="first-a page-a"><span class="first-span">首页</span></a>';

    var before_url = uri+"&"+ word1 +"=" + before_page;
    var before = '<a href="'+ before_url +'" class="before-a page-a"><span class="before-span">上页</span></a>';

    var now_url = uri+"&"+ word1 +"=" + now_page;
    var now = '<a href="'+ now_url +'" class="now-a page-a"><span class="before-span">'+ now_page+ '/' + all_page +'</span></a>';

    var array_url = "";
    var array = '<a href="'+ array_url +'" class="before-a page-a"><span class="before-span">'+ 1 +'</span></a>';

    var after_url = uri+"&"+ word1 +"=" + after_page;
    var after = '<a href="'+ after_url +'" class="after-a page-a"><span class="after-span">下页</span></a>';

    var end_url = uri+"&"+ word1 +"=" + end_page;
    var end = '<a href="'+ end_url +'" class="end-a page-a"><span class="end-span">尾页</span></a>';

    var div = '<div class="pagination-div '+ class_only +'">'+ div_total + first + before + now + after + end +'</div>'

    $("."+class_append).parent().parent().append(div);


    if (now_page <= 1){ // 前一页超范围
        $("."+class_only).find(".before-a").addClass("hide");
    }else{
        before_page = now_page-1;
    }

    if (now_page >= end_page){ // 后一页超范围
        console_log("超范围");
        $("."+class_only).find(".after-a").addClass("hide");
        $("."+class_only).find(".end-a").addClass("hide");
    }else{
        after_page = now_page+1;
    }

    if (end_page === 1){ // 只有一页
        // $("."+class_only).find(".first-a").addClass("hide");
        $("."+class_only).find(".after-a").addClass("hide");
        $("."+class_only).find(".before-a").addClass("hide");
        $("."+class_only).find(".end-a").addClass("hide");
    }
}

4。js获取url兼容模式参数【不需要修改，直接使用】：

/*
 * return string
 * js获取 url后的参数值，如果存在键，则返回键的值，如果不存在则返回null
 * string key: 键名，调用getUrlParam("sex")则返回0
 * */
function getThisUrlParam(url, key) { // 返回值
    // 兼容模式url地址，例如：poop.html?page=3&ok=222#p=2#name=kd
    var url_str = "";
    if(!url){
        url_str = window.location.href;
    }else {
        url_str = url;
    }
    // 正则匹配url中的参数，如果存在键，则返回键的值，如果不存在则返回null
    var regExp = new RegExp("([?]|&|#)" + key + "=([^&|^#]*)(&|$|#)");
    var result = url_str.match(regExp);
    if (result) {
        return decodeURIComponent(result[2]); // 转义还原参数
    } else {
        return null; // 没有匹配的键即返回null
    }

}

-