jquery 采用#pageindex分页
不会封装，凑合用了
app.pageination.js
//总条数，单页条数，翻页ajax
function CreateLinks(total, pageSize, callback) {
var page_id = ReadUrl("pageindex");//获取url页码
var page_index = 0;
if (page_id == "") {
page_index = 1;
}
else {
page_index = parseInt(page_id);
}
var _pageCount = GetPageCount(total, pageSize);//取得总页数
if (_pageCount == 0 || _pageCount==1) {
$("#Pagination").empty();
return;
}
var start = 1, end = _pageCount, isstart = false,isend=false;
if (_pageCount <= 10) {//总页码<=5
start = 1;
end = _pageCount;
}
else if ((_pageCount - page_index) <= 5) {
start = page_index-5;
end = _pageCount;
isstart = true;
}
else {
if (page_index <= 5) {
start = 1;
end = page_index + 5;
isend = true;
}
else {
start = page_index - 5;
end = page_index + 5;
isstart = true;
isend = true;
}
}
var links = "";
if (isstart) {
if ((start - 1) > 1) {
links += "... ";
}
}
for (var i = start; i <= end; i++) {
//if (page_id <= 5) {
// links += "" + i + " ";
//}
if (i == page_index) {
links += "" + i + " ";
}
else {
links += "" + i + " ";
}
}
if (isend) {
if ((end + 1) <= _pageCount) {
links += "... ";
}
}
//前一页
if (page_index == 1) {
links = "< " + links;
}
else {
links = "< " + links;
}
//后一页
if (page_index == _pageCount) {
links = links + "> ";
}
else {
links = links + "> ";
}
//第一页
if (page_index == 1) {
links = "<< " + links;
}
else {
links = "<< " + links;
}
//最后一页
if (page_index == _pageCount) {
links = links+">> ";
}
else {
links = links + ">> ";
}
links = "" + links + "
";
$("#Pagination").empty().html(links);
$("#Pagination ul li a").click(function () {
if ($(this).attr("disabled") !="disabled") {
var index = $(this).attr("data-index");
WriteUrl("pageindex", index);
callback();
//FileList();
}
})
}
/**
* 获取总页码
* @param {any} total
* @param {any} pageSize
*/
function GetPageCount(total, pageSize) {
return Math.ceil(total / pageSize);
}
appurl.js
/**
* 获取url+#参数改写改写
*/
/*
a:参数
b:参数值
*/
function WriteUrl(a, b) {
var _url = window.location.hash;
if (_url == "") {
window.location.hash = "#" + a + "=" + b;
}
else if (_url.indexOf(a) == -1) {
window.location.hash = _url + "&" + a + "=" + b;
}
else {
var d = "";
var _urldata = _url.substring(1, _url.length).split('&');
for (var i = 0; i < _urldata.length; i++) {
_d = _urldata[i].split('=');
if (_d[0] == a) {
d += _d[0] + "=" + b + "&";
}
else {
d += _d[0] + "=" + _d[1] + "&";
}
}
d = d.substring(0, d.length - 1);
window.location.hash = "#" + d;
}
}
/*获取url+#参数改写结束*/
function ReadUrl(a) {
var _url = window.location.hash;
if (_url != "") {
var d = "";
var _urldata = _url.substring(1, _url.length).split('&');
for (var i = 0; i < _urldata.length; i++) {
_d = _urldata[i].split('=');
if (_d[0] == a) {
d = _d[1];
}
}
return d;
}
return "";
}
/**
* 删除#参数
* @param {any} a
*/
function DelUrl(a) {
var _url = window.location.hash;
if (_url != "") {
var d = "";
var _urldata = _url.substring(1, _url.length).split('&');
for (var i = 0; i < _urldata.length; i++) {
_d = _urldata[i].split('=');
if (_d[0] != a) {
d += _d[0] + "=" + _d[1] + "&";
}
}
d = d.substring(0, d.length - 1);
window.location.hash = "#" + d;
}
}//数据提取.js
var pageIndex = 1, pageSize = 16, pagecount = 1;
var d_list = [], filter_list = [];
function databind() {
$.ajax({
url: "****",
beforeSend: function () {
$(".card-body").append(""); $(".loading").show();
},
success: function (data) {
d_list = filter_list = data;
//filter_list = d_list;
Search();
$(".loading").remove();
}
})
}
Search = function () {
WriteUrl("pageindex", 1);
filter_list = d_list;
console.log("dd");
$.each($(".card-search input,.card-search select"), function (c_i, c_t) {
if ($(c_t).val() != "" && $(c_t).val() != "0") {
var c_name = $(c_t).attr("id");
filter_list = filter_list.filter(function (p) {
var p_name = p[c_name];
return p_name == $(c_t).val()
})
}
})
PageCall();
};
PageCall = function () {
var pIndex = ReadUrl("pageindex");
if (pIndex != "") {
pageIndex = pIndex;
}
pageIndex = pageIndex < 1 ? 0 : pageIndex;
var pStart = (pageIndex - 1) * pageSize;
var pOver = pageIndex * pageSize;
pOver = pOver > filter_list.length ? filter_list.length : pOver;
$("span[data-count-id='count']").html(filter_list.length);
var html = "";
for (var i = pStart; i < pOver; i++) {
var item = filter_list[i];
html += "" +
.....
" ";
}
$("tbody[data-list-id='list']").html(html);
CreateLinks(filter_list.length, pageSize, PageCall);
};
$(".card-search input,.card-search select").on("input propertychange", function () {
Search();
});css
.table_pagination {
margin: 0 auto;
width: 100%;
text-align: center;
height: 40px;
}
.table_pagination .new_pagination li, .table_pagination .pagination span, .table_pagination .pagination a {
width: 30px;
height: 30px;
margin-right: 5px;
display: inline-block;
font-size: 12px;
}
.table_pagination .new_pagination li a, .table_pagination .pagination span, .table_pagination .pagination a {
background-color: #efefef;
border: 1px solid #efefef;
display: inline-block;
color: #8a8a8a;
border-radius: 50%;
cursor: pointer;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
.table_pagination .new_pagination li a:hover, .table_pagination .pagination span:hover, .table_pagination .pagination a:hover {
background-color: #eee;
border: 1px solid #2ebcfc;
}
.table_pagination .new_pagination li.active a, .table_pagination .pagination span.current {
background-color: #2ebcfc;
color: #FFF;
cursor: default;
}
.table_pagination .new_pagination li a[disabled], .table_pagination .pagination span[rel="prev"], .table_pagination .pagination span[rel="next"] {
opacity: .6;
color: #000;
background-color: #efefef;
}