Jquery前端分页插件pagination，多样式化
插件描述： JqueryPagination是⼀个轻量级的jquery分页插件。只需⼏个简单的配置就可以⽣成分页控件。并且⽀持ajax获取数据，⾃定义请求参数，提供多种⽅法，事件和回调函数，功能全⾯的分页插件。
⼀，导⼊相关的jquery和pagination⽂件
<script type="text/javascript"src="static/js/jquery.min.js"></script>
<script type="text/javascript"src="static/js/pagination.min.js"></script>
⼆，css样式⽂件
@charset "UTF-8";
.whj_jqueryPaginationCss-1{
display: inline-block;
padding: 5px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-1 div{
display: inline-block;
vertical-align: bottom;
height: 24px;
line-height: 24px;
}
.
whj_jqueryPaginationCss-1 .whj_padding{
padding: 1px 9px;
}
.whj_jqueryPaginationCss-1 .whj_bgc{
background-color: #fff;
color: #698ca9;
}
.whj_jqueryPaginationCss-1 .whj_border{
border: 1px solid #5b9fd6;
}
.whj_jqueryPaginationCss-1 .whj_color{
color: #698ca9;
}
.whj_jqueryPaginationCss-1 .whj_hover:hover{
background-color: #d4f1ff;
color: #698ca9;
cursor: pointer;
}
.whj_jqueryPaginationCss-1 .whj_checked{
background-color: #d4f1ff;
color: #698ca9;
}
.
whj_jqueryPaginationCss-1 .whj_hoverDisable{
opacity: 0.5;
}
.whj_jqueryPaginationCss-1 select{
height: 28px;
vertical-align: bottom;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-1 input{
padding: 0px;
outline: none;
text-align: center;
width: 60px;
vertical-align: bottom;
}
.whj_jqueryPaginationCss-1 div,.whj_jqueryPaginationCss-1 input,.whj_jqueryPaginationCss-1 select{ margin: 2px;
}
.whj_jqueryPaginationCss-2{
display: inline-block;
padding: 5px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-2 div{
display: inline-block;
vertical-align: bottom;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-2 .whj_padding{
padding: 1px 9px;
}
.whj_jqueryPaginationCss-2 .whj_bgc{
background-color: #5194ca;
color: #fff;
}
.whj_jqueryPaginationCss-2 .whj_border{
border: 1px solid #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_color{
color: #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_hover:hover{
background-color: #d4f1ff;
color: #5194ca;
cursor: pointer;
}
.whj_jqueryPaginationCss-2 .whj_checked{
background-color: #d4f1ff;
color: #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_hoverDisable{
opacity: 0.7;
}
.whj_jqueryPaginationCss-2 select{
height: 28px;
vertical-align: bottom;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-2 input{
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: bottom;
}
.whj_jqueryPaginationCss-2 div,.whj_jqueryPaginationCss-2 input,.whj_jqueryPaginationCss-2 select{
}
.whj_jqueryPaginationCss-3{
display: inline-block;
padding: 5px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-3 div{
display: inline-block;
vertical-align: bottom;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-3 .whj_padding{
padding: 1px 9px;
}
.whj_jqueryPaginationCss-3 .whj_bgc{
background-color: #7a7b7b;
color: #fff;
}
.whj_jqueryPaginationCss-3 .whj_border{
border: 1px solid #929292;
}
.whj_jqueryPaginationCss-3 .whj_color{
color: #929292;
}
.whj_jqueryPaginationCss-3 .whj_hover:hover{
background-color: #e0dddd;
color: #7a7b7b;
cursor: pointer;
}
.whj_jqueryPaginationCss-3 .whj_checked{
background-color: #e0dddd;
color: #7a7b7b;
}
.whj_jqueryPaginationCss-3 .whj_hoverDisable{
opacity: 0.5;
}
.whj_jqueryPaginationCss-3 select{
height: 28px;
vertical-align: bottom;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-3 input{
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: bottom;
}
.whj_jqueryPaginationCss-3 div,.whj_jqueryPaginationCss-3 input,.whj_jqueryPaginationCss-3 select{ margin: 2px;
}
.whj_jqueryPaginationCss-4{
display: inline-block;
padding: 5px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-4 div{
display: inline-block;
vertical-align: bottom;
height: 24px;text align center
line-height: 24px;
}
.whj_jqueryPaginationCss-4 .whj_padding{
padding: 1px 9px;
}
.whj_jqueryPaginationCss-4 .whj_bgc{
background-color: #f5f5f5;
color: #907272;
}
.whj_jqueryPaginationCss-4 .whj_border{
border: 1px solid #907272;
}
.whj_jqueryPaginationCss-4 .whj_color{
color: #907272;
}
.whj_jqueryPaginationCss-4 .whj_hover:hover{
background-color: #afacac;
color: #fff;
cursor: pointer;
}
.whj_jqueryPaginationCss-4 .whj_checked{
background-color: #afacac;
color: #fff;
}
.whj_jqueryPaginationCss-4 .whj_hoverDisable{
opacity: 0.5;
}
.whj_jqueryPaginationCss-4 select{
height: 28px;
vertical-align: bottom;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-4 input{
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: bottom;
}
.whj_jqueryPaginationCss-4 div,.whj_jqueryPaginationCss-4 input,.whj_jqueryPaginationCss-4 select{ margin: 2px;
}
.whj_jqueryPaginationCss-5{
display: inline-block;
padding: 5px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.whj_jqueryPaginationCss-5 div{
display: inline-block;
vertical-align: bottom;
height: 24px;
line-height: 24px;
}
.whj_jqueryPaginationCss-5 .whj_padding{
padding: 1px 9px;
}
.whj_jqueryPaginationCss-5 .whj_bgc{
background-color: #199eaf;
color: #fff;
}
.whj_jqueryPaginationCss-5 .whj_border{
border: 1px solid #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_color{
color: #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_hover:hover{
background-color: #d4f1ff;
color: #199eaf;
cursor: pointer;
}
.whj_jqueryPaginationCss-5 .whj_checked{
background-color: #d4f1ff;
color: #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_hoverDisable{
opacity: 0.5;
}
.whj_jqueryPaginationCss-5 select{
height: 28px;
vertical-align: bottom;
padding: 0px;
outline: none;
}
.whj_jqueryPaginationCss-5 input{
padding: 0px;
height: 26px;
outline: none;
text-align: center;
width: 60px;
vertical-align: bottom;
}
.whj_jqueryPaginationCss-5 div,.whj_jqueryPaginationCss-5 input,.whj_jqueryPaginationCss-5 select{ margin: 2px;
}
三，index 主 html⽂件
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<meta http-equiv="Expires"content="0">
<meta http-equiv="Cache"content="no-cache">
<meta http-equiv="Pragma"content="no-cache">
<meta http-equiv="Cache-Control"content="no-cache">
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<link rel="stylesheet"type="text/css"href="static/css/style.css">
<script type="text/javascript"src="static/js/jquery.min.js"></script>
<script type="text/javascript"src="static/js/pagination.min.js"></script>
<style>
.cib{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。