一些框架自带分页,但是我还是造个轮子吧:
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
}
}
-