前端寻呼控制的javascript实现
现在Web专注于用户体验和交互性,Ajax提交数据的方式非常流行。它可以刷新数据局部无刷新网页。大多数的前端页面采用AJAX请求数据(在其他方面,如手动构造一个模拟提交事件,等)。通过JS,查询参数被发送回的背景下,在后台处理中具体的格式返回,这主要是JSON,这是更方便,更受欢迎的处理。当背景数据时,浏览器将重新渲染接口。当然,它还包括js分页控件。如果您认为每一个分页控件都会影响前端性能,它将不会被绘制出来,但实现起来相对比较困难。忘记了我写的分页链接控制参考其他用户的代码,控制接受四个参数或一个对象,其实是一样的,因为后者只放四个参数的object.pindex:每个请求的页号,每个psize页容量:请求分页控件容器:容器,和FN:请求数据到服务器
代码主要是用于闭包,最后请求信息保存为下一次使用,虽然代码可以直接使用,但样式不是通用的,它需要每个调风格也不错,样式比较简单。
功能分页(obj){
/ *页索引:索引,
PageSize:大小,
计数:计数,
集装箱:集装箱,
FN:FN
* /
如果(!obj | |类型的对象!=对象{){
返回false;
}
var obj PageIndex | | PageIndex = 1,
PageSize = obj. PageSize | | 10,
数=对象计数| | 0,
obj.container容器=,
回调= obj。FN | |函数(){ };
无功总页数= math.ceil(计数/ PageSize);
如果(总页数= = 0){
返回false;
}
如果(总页数< PageIndex){
返回false;
}
事件
功能bindevent(){
页面事件
$(集装箱)。找到(> 。PG prev)。Unbind(点击)。Bind(单击
如果(PageIndex <= 1){
返回false;
}
如果(typeof回调= =函数){
当前页的索引—;
页索引= PageIndex<11:页索引;
obj PageIndex =当前页的索引;
回调(页索引);
分页(obj);
}
});
下一页事件
$(集装箱)。找到(> 。PG下),Unbind(点击)。Bind(单击
如果(PageIndex = =总页数){
返回false;
}
如果(typeof回调= =函数){
页索引+ +;
页索引=页索引> pagecountpagecount:页索引;
页索引obj PageIndex =;
回调(页索引);
分页(obj);
}
});
$(集装箱)。找到(> 李:不(。PG更多):不(。PG沪指):不(。PG下))。Unbind(点击)。Bind(点击){(){
页索引= + $(this)(HTML);
isnan PageIndex =(当前页的索引)1页索引;
页索引obj PageIndex =;
如果(typeof回调= =函数){
回调(页索引);
分页(obj);
}
});
};
绘画风格
函数打印头(){
var;
Html.push(最后一页);
返回html.join();
}
功能printbody(){
var;
var =函数(数字,开始){
开始的开始| | = 1;
对于(var i =开始;i <数字= i + +){
Html.push(+我+);
}
}
如果(总页数< = 7){
渲染(总页数);
其他{ }
如果(PageIndex<4){
渲染(4);
Html.push(…);
Html.push('' +总页数+);
其他{ }
Html.push(1);
Html.push(…);
如果(总页数页索引> 3){
渲染(PageIndex + 1,pageindex-1);
Html.push(…);
Html.push('' +总页数+);
其他{ }
渲染(总页数,pagecount-3);
}
}
}
返回html.join();
}
功能printtail(){
var;
Html.push(下页);
返回html.join();
}
函数显示(){
集装箱.innerHTML =+打印头(+ printbody)(+ printtail)(+);
}
显示();
BindEvent();
}
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。