一：分页封装page.js
/**
* 公共方法 version 2.0.1
* @Author 段文焯
* @Date 2020-06-30
*/
var Dwz = {
getPath : function(){ //获取项目根目录
var pathName = window.document.location.pathname,
rootName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
return rootName+"/";
}(),
configAjax : { //ajax请求数据配置
zero : false, //分页是否从零开始.默认不是
page : "page" || "page", //请求第几页数据
size : "size" || "size", //每页请求多少条数据
pagingData : "" || "", //返回数据位置，默认res,
totalPageCount : "" || "totalPages", //返回总页数(暂无用)
totalCount : "total" || "totalCount", //返回总条数
pageNo : "" || "pageNo", //返回当前页数(暂无用)
pageSize : "" || "pageSize", //返回当前条数(暂无用)
}
}
Dwz.GetPositionData = function(res,dataPosition){ //根据传入数据位置获取数据
var List = "";
if(!dataPosition){
List = res
}else {
$.each(dataPosition.split(","),function(i,v){
List = !List?res[v]:List[v]
})
}
return List
}
Dwz.CreatePaging = function(parameter){ //创建分页对象
var This = this;
parameter = parameter || {};
var pagingObject = parameter.pagingObject || ""; //分页存放标签
if(pagingObject){ //判断是否需要创建分页
var pagingHtml = '<div class="dwz_pageContent"><form><div class="dwz_left_page"><p>每页显示</p><select name="pageSizeChange">'
+'</select><p>条，</p><p>共计</p><dfn class="dwz_totalCount">0</dfn><!-- 总共多少条数据 --><p>条</p></div>'
+'<div class="dwz_right_page"><p>跳到</p><input type="text" value="1" name="pageNoChange" /><!-- 跳转到第几页 --><p>页</p></div>'
+'<div class="dwz_page_center"><input type="button" class="dwz_firstPage" value="首页" /><input type="button" class="dwz_prevPage" value="上一页" /><span class="dwz_totalPageCount">1/1</span><input type="button" class="dwz_nextPage" value="下一页" />'
+'<input type="button" class="dwz_lastPage" value="尾页" /></div></form></div>';
$(pagingObject).html(pagingHtml);
var pagingArguments = {
pagingObject : $(pagingObject),
totalPageCountObj : $(pagingObject).find(".dwz_totalPageCount"), //总页数
totalCountObj : $(pagingObject).find(".dwz_totalCount"), //总条数
pageObj : $(pagingObject).find("input[name='pageNoChange']"), //当前页数
sizeObj : $(pagingObject).find("select[name='pageSizeChange']"), //每页的条数
select : [10,20,30,50,100,300,500] //下拉框默认数值
}
This.sizeSelect(pagingArguments,parameter);
This.toPageChange(pagingArguments,parameter) //选择跳转到第几页
This.toFirstPage(pagingArguments,parameter) //点击跳转到首页
This.toLastPage(pagingArguments,parameter) //点击跳转到最后一页
This.toPrevPage(pagingArguments,parameter) //点击跳转到上一页
This.toNextPage(pagingArguments,parameter) //点击跳转到下一页
}
this.logData = this.logData || {};
var logData_new;
if(JSON.stringify(this.logData) !== "{}"){
logData_new = This.parameterData(parameter,pagingArguments);
}
This.getTableData(parameter,pagingArguments,logData_new);
}
Dwz.getTableData = function(parameter,pagingArguments,logData){ //列表数据获取
var Myself = this,Data = logData?logData:parameter.data(),pagingParameter;
pagingParameter = parameter.configAjax?parameter.configAjax:Myself.configAjax;
Data[pagingParameter.page] = pagingParameter.zero?Math.max(Data[pagingParameter.page]-1,0):Data[pagingParameter.page]; //分页页数从零开始
$.ajax({
type: !parameter.type ? "post" : parameter.type,
url: Dwz.getPath + parameter.url,
data: !Data ? {} : Data,
async: true,
contentType: 'application/json;charset=UTF-8',
success: function (response) {
try {
if(parameter.getListData) parameter.getListData(response);
}catch (e) {
console.log("列表数据渲染失败！")
}
try { //默认分页渲染数据
var Datas = eval("("+response+")");
Myself.pagingAssignment(pagingArguments,pagingParameter,Datas,parameter,Data)
}catch (e) {
console.log("分页数据渲染失败！")
}
},
error: function (res) {
top.layer.msg("请求异常!", {time: 800, icon: 5});
}
})
}
Dwz.parameterData = function(parameter,pagingArguments,newData){ //处理参数
var logData ,
Data = parameter.data(),
Myself = this;
var page = parameter.configAjax?parameter.configAjax.page:this.configAjax.page;
var size = parameter.configAjax?parameter.configAjax.size:this.configAjax.size;
try {
this.logData[pagingArguments.pagingObject.selector]=[Data]
$.each(this.logData,function(i,v){
if(pagingArguments.pagingObject.selector === i){
if(newData) Myself.logData[i] = newData;
for(var key in Data){
if(key !== page && key !== size){
var logKey = Myself.logData[i][key] || "",
newKey = Data[key] || "";
if(logKey !== newKey){
Myself.logData[i] = parameter.data()
}
}
}
logData = Myself.logData[i]
}
})
}catch (e) {
console.log("传入参数错误！")
}
return logData;
}
Dwz.pagingAssignment = function(pagingArguments,arguments,data,parameter,getData){ //获取数据成功后分页赋值
var newData = this.GetPositionData(data,arguments.pagingData); //获取分页数据
var totalCount = newData[arguments.totalCount] || 0; //总条数
var page = getData.page; //当前条数
var totalPageCount = Math.ceil(totalCount/getData.size); //总页数
var pageSize = getData.size; //当前页数
if(ArrayCf(pagingArguments.select,pageSize)){
pagingArguments.select.push(pageSize)
this.BubbleSort(pagingArguments.select)
this.sizeSelect(pagingArguments,parameter)
}
pagingArguments.totalCountObj.html(totalCount)
pagingArguments.pageObj.val(page);
pagingArguments.totalPageCountObj.html(page+"/"+Math.max(totalPageCount,1))
pagingArguments.sizeObj.val(pageSize)
function ArrayCf(Array,Num){
var Boors = true;
$.each(Array,function(i,v){
if(Num == v){
Boors = false;
}
})
return Boors;
}
}
Dwz.sizeSelect = function(pagingArguments,parameter){
pagingArguments = pagingArguments || {};
var sizeSelect = "";
for(var i=0,len=pagingArguments.select.length;i<len;i++){
sizeSelect += '<option value="'+pagingArguments.select[i]+'">'+pagingArguments.select[i]+'</option>';
}
pagingArguments.pagingObject.find("select[name='pageSizeChange']").html(sizeSelect);
this.changeSize(pagingArguments,parameter) //选择每页显示多少条数据
}
Dwz.getPagingEventData = function(pagingArguments,parameter,data){ //操作分页，参数从新获取
var Data = parameter.data(),
pagingParameter,
logData_new;
pagingParameter = parameter.configAjax?parameter.configAjax:this.configAjax;
if(data){
Data[pagingParameter.page] = data.page
Data[pagingParameter.size] = data.size
logData_new = this.parameterData(parameter,pagingArguments,Data)
}
this.getTableData(parameter,pagingArguments,logData_new)
}
Dwz.toNextPage = function(pagingArguments,parameter){ //点击跳转到下一页
var This = this,
data = {};
pagingArguments.pagingObject.find(".dwz_nextPage").on("click",function(){
var MaxPage = pagingArguments.totalPageCountObj.text().split("/")[1]*1;
data.size = $(this).parents(".dwz_pageContent").find("select[name='pageSizeChange']").val()*1;
data.page = pagingArguments.totalPageCountObj.text().split("/")[0]*1;
data.page++
if(data.page > MaxPage){
top.layer.msg("已经是最后一页了！",{time:600});
data.page = Math.min(data.page,MaxPage);
return;
}
This.getPagingEventData(pagingArguments,parameter,data);
});
}
Dwz.changeSize = function(pagingArguments,parameter){ //选择每页显示多少条数据
var This = this,
data = {},
logPageSizeChange = pagingArguments.pagingObject.find("select[name='pageSizeChange']").val();
pagingArguments.pagingObject.find("select[name='pageSizeChange']").on("change",function(){
var MaxSize = $(this).parents(".dwz_pageContent").find(".dwz_totalCount").text()*1;
data.size = $(this).parents(".dwz_pageContent").find("select[name='pageSizeChange']").val()*1;
data.page = pagingArguments.totalPageCountObj.text().split("/")[0]*1;
var MaxPage = Math.ceil(MaxSize/data.size)
data.page = Math.min(MaxPage,data.page)
if(MaxSize === 0){
top.layer.msg("没有这么多数据啦！",{time:600});
pagingArguments.pagingObject.find("select[name='pageSizeChange']").val(logPageSizeChange)
return;
}
if(data.page === 1 && data.size > MaxSize){
if(logPageSizeChange >= MaxSize){
top.layer.msg("没有这么多数据啦！",{time:600});
pagingArguments.pagingObject.find("select[name='pageSizeChange']").val(logPageSizeChange)
return;
}
}
logPageSizeChange = $(this).parents(".dwz_pageContent").find("select[name='pageSizeChange']").val()
This.getPagingEventData(pagingArguments,parameter,data);
});
}
Dwz.toPageChange = function(pagingArguments,parameter){ //选择跳转到第几页
var This = this,
data = {};
pagingArguments.pagingObject.find("input[name='pageNoChange']").on("change",function(){
var MaxPage = pagingArguments.totalPageCountObj.text().split("/")[1]*1;
data.page = $(this).val();
data.size = $(this).parents(".dwz_pageContent").find("select[name='pageSizeChange']").val()*1;
data.page = Math.max(data.page,1);
if (!(/^[0-9]*[1-9][0-9]*$/.test(data.page)) || data.page<=0) {
top.layer.msg("请输入正确的数字！",{time:600});
return;
}
if($(this).parents(".dwz_pageContent").find("input[name='pageNoChange']").val() > MaxPage){
top.layer.msg("超出总页数了！",{time:600});
data.page = pagingArguments.totalPageCountObj.text().split("/")[0]*1
data.page = Math.min(data.page,MaxPage);
pagingArguments.pageObj.val(data.page);
return;
}
This.getPagingEventData(pagingArguments,parameter,data);
});
}
Dwz.toFirstPage = function(pagingArguments,parameter){ //点击跳转到首页
var This = this,
data = {};
pagingArguments.pagingObject.find(".dwz_firstPage").on("click",function(){
data.size = $(this).parents(".dwz_pageContent").find("select[name='pageSizeChange']").val()*1;
data.page = pagingArguments.totalPageCountObj.text().split("/")[0]*1;
if(data.page <= 1){
top.layer.msg("沒有数据了！",{time:600});
return;
}
data.page = 1;
This.getPagingEventData(pagingArguments,parameter,data);
});
}
Dwz.toLastPage = function(pagingArguments,parameter){ //点击跳转到最后一页
var This = this,
data = {};
pagingArguments.pagingObject.find(".dwz_lastPage").on("click",function(){
var MaxPage = pagingArguments.totalPageCountObj.text().split("/")[1]*1;
data.size = $(this).parents(".dwz_pageContent").find("select[name='pageSizeChange']").val()*1;
data.page = pagingArguments.totalPageCountObj.text().split("/")[0]*1;
if(data.page >= MaxPage){
top.layer.msg("沒有数据了！",{time:600});
return;
}
data.page = MaxPage;
This.getPagingEventData(pagingArguments,parameter,data);
});
}
Dwz.toPrevPage = function(pagingArguments,parameter){ //点击跳转到上一页
var This = this,
data = {};
pagingArguments.pagingObject.find(".dwz_prevPage").on("click",function(){
data.size = $(this).parents(".dwz_pageContent").find("select[name='pageSizeChange']").val()*1;
data.page = pagingArguments.totalPageCountObj.text().split("/")[0]*1;
data.page--
if(data.page < 1){
pagingArguments.page = Math.max(data.page,1);
top.layer.msg("已经是第一页了！",{time:600});
return;
}
This.getPagingEventData(pagingArguments,parameter,data);
});
}
二：分页page.css
@charset "utf-8";
/**
* 分页样式 version 1.0.1
* @Author 段文焯
* @Date 2020-06-30
*/
.dwz_pageContent {
overflow:hidden;
height:30px;
line-height:30px;
padding:6px 10px;
font-size:16px;
color:#2695a6;
}
.dwz_pageContent form {
display:block;
overflow:hidden;
}
.dwz_pageContent .dwz_left_page {
float:left;
overflow:hidden;
}
.dwz_pageContent .dwz_right_page {
float:right;
overflow:hidden;
}
.dwz_pageContent .dwz_page_center {
float:right;
overflow:hidden;
}
.dwz_pageContent p {
float:left;
overflow:hidden;
padding:0 2px;
color: #2695a6;
}
.pageContent a {
float:left;
overflow:hidden;
color:#2695a6;
padding:0 2px;
}
.dwz_pageContent select {
float:left;
min-width:20px;
height:21px;
line-height:21px;
overflow:hidden;
border:1px solid #ccc;
cursor:pointer;
padding:0 2px;
margin:4px;
color:#2695a6;
}
.dwz_pageContent .dwz_left_page dfn {
float:left;
}
.dwz_pageContent select:hover {
border:1px solid #999;
}
.dwz_pageContent span {
float:left;
height:30px;
line-height:30px;
overflow:hidden;
padding:0 2px;
font-size:16px;
color:#2695a6;
}
.dwz_pageContent input {
float:left;
overflow:hidden;
padding:0 2px;
color:#2695a6;
font-size:16px;
}
.dwz_pageContent .dwz_left_page a {
color:#2695a6;
}
.dwz_pageContent input[type='button'] {
float:left;
height:22px;
line-height:22px;
overflow:hidden;
background:#f3f4f5;
margin:5px 3px 0;
color:#2695a6;
cursor:pointer;
padding:0 5px;
border-radius:3px;
border: none;
}
.dwz_pageContent .dwz_right_page input[type='text'] {
float:left;
width:42px;
height:18px;
line-height:18px;
overflow:hidden;
border:1px solid #ccc;
margin-top:5px;
}
三：页面调用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="author" content="dwz 2020">
<link rel="stylesheet" href="page.css" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="page.js"></script>
</head>
<body>
<table>
<tbody id="tableId"></tbody>
</table>
<div class="pageWrap" id="pageId"></div>
<script>
var data = function(){
return {
page : 1,
size : 10
}
}
Init()
function Init(){
Dwz.CreatePaging({
pagingObject : "#pageId",
url : "******",
data : data,
getListData : function(res){
var Otr = "";
$("#tableId").html(Otr)
}
})
}
</script>
</body>
</html>
本文介绍了Dwz库中的分页功能，包括getPath方法获取项目根目录、configAjax配置AJAX请求、GetPositionData获取数据位置、CreatePaging创建分页对象以及一系列处理分页参数、获取数据和更新分页状态的方法。同时提到了与之配套的CSS样式和页面调用示例。
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
