1、前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js
插件参数可以参考----张龙豪-jquery.pagination.js分页
下面贴出代码
return this.each(function() {
/**
/**
- 计算最大分页显示数目
*/
function numPages() {
return Math.ceil(maxentries/opts.items_per_page);
}
/** - 极端分页的起始和结束点,这取决于current_page 和 num_display_entries.
- @返回 {数组(Array)}
*/
function getInterval() {
var ne_half = Math.ceil(opts.num_display_entries/);
var np = numPages();
var upper_limit = np-opts.num_display_entries;
var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half,upper_limit),):;
var end = current_page>ne_half?Math.min(current_page+nehalf,np):Math.min(opts.numdisplay_entries,np);
return [start,end];
}
/**
* <a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a><a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>事件处理<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
* @参数 {int} page_id 为新<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>
*/
function pageSelected(page_id,evt){
current_page = page_id;
drawLinks();
var continuePropagation = opts.callback(page_id,panel);
if (!continuePropagation) {
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
return continuePropagation;
}
/**
* 此<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>将<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a><a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>插入到容器元素中
*/
function drawLinks() {
panel.empty();
var interval = getInterval();
var np = numPages();
// 这个辅助<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>返回<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>处理<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a><a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>有着正确page_id的pageSelected。
var getClickHandler = function(page_id) {
return function(evt){ return pageSelected(page_id,evt); }
}
//辅助<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>用来产生<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>单<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>(如果不是当前页则产生span<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>)
var appendItem = function(page_id,appendopts){
page_id = page_id<?:(page_id<np?page_id:np-); // 规范page id值
appendopts = jQuery.extend({text:page_id+,classes:""},appendopts||{});
if(page_id == current_page){
var lnk = jQuery("<a href class='currentPage'>" + (appendopts.text) + "</a>");
}else{
var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
.bind("click",getClickHandler(page_id))
.attr('href',opts.link_to.replace(/__id__/,page_id));
}
if (appendopts.classes) { lnk.addClass(appendopts.classes); }
panel.append(lnk);
}
//产生描述
panel.append("<span>共有 " + maxentries + " 条记录,当前第 <b>" + (current_page + ) + "</b>/" + np + " 页</span>");
// 产生"Prev<a href="https://www.jb51.cc/tag/IoU/" target="_blank" class="keywords">IoU</a>s"-<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>
if(opts.prev_text && (current_page > || opts.prev_show_always)){
appendItem(current_page-,{text:opts.prev_text,classes:"prev"});
}
// 产生起始点
if (interval[] > && opts.num_edge_entries > )
{
var end = Math.min(opts.num_edge_entries,interval[]);
for(var i=; i<end; i++) {
appendItem(i);
}
if(opts.num_edge_entries < interval[] && opts.ellipse_text)
{
jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
}
}
// 产生内部的些<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>
for(var i=interval[]; i<interval[]; i++) {
appendItem(i);
}
// 产生结束点
if (interval[] < np && opts.num_edge_entries > )
{
if(np-opts.num_edge_entries > interval[]&& opts.ellipse_text)
{
jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
}
var begin = Math.max(np-opts.num_edge_entries,interval[]);
for(var i=begin; i<np; i++) {
appendItem(i);
}
}
// 产生 "Next"-<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>
if(opts.next_text && (current_page < np- || opts.next_show_always)){
appendItem(current_page+,{text:opts.next_text,classes:"next"});
}
}
//从选项中<a href="https://www.jb51.cc/tag/tiqu/" target="_blank" class="keywords">提取</a>current_page
var current_page = opts.current_page;
//创建<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a><a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>条数和每页<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>条数值
maxentries = (!maxentries || maxentries < )?:maxentries;
opts.items_per_page = (!opts.items_per_page || opts.items_per_page < )?:opts.items_per_page;
//存储DOM元素,以方便从所有的内部结构中获取
var panel = jQuery(this);
// 获得附加功能的元素
this.selectPage = function(page_id){ pageSelected(page_id);}
this.prevPage = function(){
if (current_page > ) {
pageSelected(current_page - );
return true;
}
else {
return false;
}
}
this.nextPage = function(){
if(current_page < numPages()-) {
pageSelected(current_page+);
return true;
}
else {
return false;
}
}
// 所有初始化完成,绘制<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>
drawLinks();
// 回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
//opts.callback(current_page,this);
});
}
代码还是比较容易看明白的,可以根据自己需要修改,这里使用的是自己的样式
样式代码
rush:css;">
.pages {display: inline-block; overflow: hidden;padding: px ;text-align: center; width:%; margin:px ;}
.pages b{ color:#ef;}
.pages a { color:#; border: px solid #eee;cursor: pointer;font-size: px;margin-right: px; padding: px px; text-decoration: none; background-color:#fafafa;}
.pages .currentPage{ background-color: #ae; border: px solid #ae;color: #fff; font-weight: bold;}
原来的css样式:
rush:css;">
.pagination a {
text-decoration: none;
border: px solid #AAE;
color: #B;
}
.pagination a,.pagination span {
display: inline-block;
padding: .em .em;
margin-right: px;
margin-bottom: px;
}
.pagination .current {
background: #B;
color: #fff;
border: px solid #AAE;
}
.pagination .current.prev,.pagination .current.next{
color:#;
border-color:#;
background:#fff;
}
可以根据自己设计显示样式
2、使用方法
2.1、html显示
rush:xhtml;">
ulProducts中放的是要显示的数据,生成的分页的工具条是放在Pagination中的
2.2 javascript代码
rush:js;">
$(function () {
searchMyme(0);
pageInit();
$("#btnSearch").on("click",function () {
searchMyme(0);
pageInit();
return false;
});
});
function searchMyme(page,pageination) {
var month = $("#btnMonth").val();
var obj = {
Month: month,OpType: "getme",page: (page + 1),rows: 10
};
var url = "../../Controler/FinaceMo/GetStaffIncome_H.ashx";
$.get(url,obj,function (data) {
$("#tbIncome").empty();
var obj = JSON.parse(data);
var total = obj.Total;
$("#hidetotalCount").val(total);
var arrHtml = [];
$.each(obj.Rows,function (i,data) {
arrHtml.push("查看明细etotalCount").val();
$("#Pagination").pagination(parseInt(totalCount),{
items_per_page: 10,//current_page: 1,//当前选中的页面默认是0,表示第1页
num_edge_entries: 2,//两侧显示的首尾分页的条目数,默认为0,好像是尾部显示的个数
num_display_entries: 2,//连续分页主体部分显示的分页条目数,默认是10
link_to: "javascript:void(0)",//分页的链接
prev_text: "上一页",next_text: "下一页",prev_show_always: true,next_show_always: true,callback: searchMyIncome
});
}
searchMyme是获取分页的数据,将总数放到一个隐藏的控件中,总数分页控件需要使用,这里ajax调用需要同步执行,不然取不到返回的总数 pageInit() 就是初始化控件
这样设置基本就OK了~
相关文章
IE6是一个非常老旧的网页浏览器,虽然现在很少人再使用它,但...
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
使用 AJAX(Asynchronous JavaScript and XML)技术可以在不...
Ajax(Asynchronous JavaScript and XML)是一种用于改进网页...
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX,我们可以...
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...