Implementing simple paging control based on jQuery_jquery

1: Rendering

2: Material

3: Coding
3.1 Thinking
What needs to be done?
1: The paging control needs to send a request to the background. The parameters sent include the current page, the number of displays on each page, and query conditions; and the data is obtained and loaded into the current page;
2: It can be remembered when modifying and deleting operations. Current page;
3: You can remember the conditions of the current query when turning the page after querying

3.2 Implementation
HTML

Copy Code The code is as follows:

jQuery
In order for our control to be used freely, we write it in the form of a plug-in. First, we set up a framework. We name the plug-in simplePage

Copy code The code is as follows:

(function($){
$.fn.simplePage=function(o){
var options={
//Configuration Parameters
};
return //sth
}
})(jQuery)

What are the default parameters?
Because the current page and the number of displays per page need to be sent, two basic parameters, currentPage and pageSize, are needed;
Since the content of the table needs to be queried, a form form is needed to place the query conditions;
Because it needs to be modified and deleted Then remember the current page, so a sign is needed to indicate the type of operation currently being performed;
In order to make our program more flexible, add the container that needs to be loaded after obtaining the data, and the paging control is loaded pager,
is as follows

Copy code The code is as follows:

var options={
pager: '.pager',//Container for table control
container: '.tableData',//Container for placing table data
form: '#form',//Form for placing query conditions
pageForm: '#pageForm',//Place the hidden Div
url: '',//The address to send the request
currentPage: 1,
pageSize: 2
type: null, //Optional: action,
pageShow:7
}

In order to facilitate maintenance, we declare an independent object to obtain data and bind events. We will use this The function is named $.page

Copy code The code is as follows:

$.page = {
//
setPage: function(o){
},
//Get the current page
getCurrentPage: function(o){
},
//Get each page Display quantity
getPageSize: function(o){
},
//Generate json data required for sending
genData: function(o){
},
//Send Data
loadData: function(o){
}
}

Implement the function declared above. When the page is loaded for the first time, we need to get the total data from the server. number of pages to generate the paging control, so first implement the loadData function

Copy code The code is as follows:

loadData: function(o){
var that = this;
var data = that.genData(o);
$.ajax({
url: o.url,
data: data,
type: 'post',
dataType: 'html',
cache: false,
success: function(result){
var res = $(result).find( 'tbody').html();
var totalPage = $(result).find('#totalPage').val();
var currentPage = $(result).find('#currentPage') .val();
o.currentPage=currentPage;
o.pager.empty();
$.line.setLine(totalPage,o); //Call the function that generates paging control
},
error: function(){
alert("error");
}
})
}

Next we implement the above generated paging control The function $.line.setLine

Copy the code The code is as follows:

$.line={
setLine:function(totalPage,o){
for(var i=0;ivar a=$('').html('' (i 1) '').addClass('pageA').bind('click',function(){
var s=$(this);
s.siblings().removeClass('pageActive');
s.addClass('pageActive');
o.currentPage=s.text();
$.page.loadData(o);
});
if(o.currentPage==i 1){
a.addClass('pageActive');
}
o.pager.append(a);
}
var limit=this.getLimit(o,totalPage);
var aPage=o.pager.find('a.pageA').not('a.previous,a.nextAll,a.record');
aPage.hide();
aPage.slice(limit.start,limit.end).show();
var prev=$('').html('上一页').addClass('pageA previous').unbind('click').bind('click',function(){
var pageActive=o.pager.find('a.pageActive');
var s=$(this);
if(pageActive.prev().text()=='上一页'){
alert('已经是第一页!');
return false;
}
pageActive.removeClass('pageActive');
pageActive.prev().addClass('pageActive');
o.currentPage=pageActive.prev().text();
$.page.loadData(o);
});
var next=$('').html('下一页').addClass('pageA nextAll').unbind('click').bind('click',function(){
var pageActive=o.pager.find('a.pageActive');
var s=$(this);
if(pageActive.next().text()=='下一页'){
alert('已经是最后一页!');
return false;
}
pageActive.removeClass('pageActive');
pageActive.next().addClass('pageActive');
o.currentPage=pageActive.next().text();
$.page.loadData(o);
});
var pageActiveText=o.pager.find('a.pageActive').text();
var record=$('').html('' pageActiveText '/' totalPage '').addClass('pageA record');
o.pager.prepend(prev).prepend(record).append(next);
}
}

在上面的代码中我们给当前的页面加上了pageActive类，所以现在我们可以实现$.page的getCurrentPage函数，非常简单

复制代码 代码如下:

getcurrentPage: function(o){
var p = o.pager.find("a.pageActive").text();
return p;
}

接着我们实现生成json数据的genData函数，json格式为{key:value,key:value}

复制代码 代码如下:

genData: function(o){
var sdata = $.extend({}, { "currentPage": o.currentPage,
"pageSize": o.pageSize}, $.jsonObj(o.pageForm));
return sdata;
},

上面的$.jsonObj为自定义的函数，为了生成我们需要的json格式以便发送查询的数据，只支持input，select

复制代码 代码如下:

$.jsonObj = function(form){
//判断是否有序列化的东东
if (!$(form).html() || $(form).html() == null || $.trim($(form).html()) == "") {
return null;
}
var formEl = $(form).find('input[type="text"]');
var formselect = $(form).find('select');
var json = "{";
for (var i = 0; i < formEl.length - 1; i ) {
var name = formEl.eq(i).attr('name');
var val = "'" formEl.eq(i).val() "'";
json = name;
json = ":";
json = val;
json = ",";
}
var lname = formEl.eq(formEl.length - 1).attr('name');
var lval = "'" formEl.eq(formEl.length - 1).val() "'";
json = lname;
json = ":";
json = lval;
if (formselect) {
json = ",";
for (var i = 0; i < formselect.length - 1; i ) {
var name = formselect.eq(i).attr('name');
var val = "'" formselect.eq(i).val() "'";
json = name;
json = ":";
json = val;
json = ",";
}
var lname = formselect.eq(formselect.length - 1).attr('name');
var lval = "'" formselect.eq(formselect.length - 1).val() "'";
json = lname;
json = ":";
json = lval;
}
json = "}";
var jsonObj = eval("(" json ")")
return jsonObj;
}

接着我们为查询表单的按钮绑定事件，我们扩展下我们的$.page函数

复制代码 代码如下:

handleQueryLine:function(o){
$(o.form).find(".query").click(function(){
//$(o.pageForm).append ($(o.form).clone(true));
$(o.pageForm).empty()
$(o.form).find('input[type="text"]' ).each(function(){
var vals = $(this).val();
var s = $(this).clone().val(vals);
$(o. pageForm).append(s);
});
$(o.form).find('select').each(function(){
var vals = $(this).val( );
var s = $(this).clone().val(vals);
$(o.pageForm).append(s)
$.page. query(o);
})
}

자 이제 기본 기능이 완성되었습니다

코드 복사 코드는 다음과 같습니다.

$.fn.simplePage = function(os){
var options = {
pager: '.pager',//테이블 제어용 컨테이너
container: '.tableData',//테이블 데이터 배치용 컨테이너
form: '#form',//쿼리 조건 배치용 폼
pageForm: '#pageForm ',//숨겨진 Div 배치
url: '',//요청을 보낼 주소
currentPage: 1,
pageSize: 2,
type: null, //선택사항: action ,
pageShow:7//,
};
var o = $.extend(options, os)
return this.each(function(){
o.pager = $ (this).find(o.pager);
o.container = $(this).find(o.container);
//먼저 클릭 이벤트를 삭제하세요
o. pager.unbind('click ');
if (o.type == 'action') {
//삭제 시 이벤트와 같은 지정된 작업, 이 경우 데이터를 새로 고쳐야 합니다. 현재 페이지
o.currentPage = $.page.getPageSize(o);
o.pageSize = $.page.getCurrentPage(o)
$.page.loadData(o); ;
}
$.page .loadData(o);
$.line.handleQueryLine(o)
})
}


이제 페이징합니다. 별로 좋지 않습니다. Firebug로 확인해 보겠습니다. 생성된 페이징 구조는 다음과 같은 스타일로 작성되었습니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

.pager a {

display: block;
float: 왼쪽
width: 16px
margin: 5px ;
}
.pager a.pageA{
background:url("../images/grid/page.png") 왼쪽 0px 투명
display:inline-block;
글꼴 크기:14px;
여백:0 3px;
텍스트 정렬:센터;
높이:자동 ;
너비:자동;
커서:포인터;
}
.pager a.pageA 스팬{
배경:url("../images/grid/page.png") 아니요 -오른쪽 0px 투명
display:inline-block;
line-height:22px;
}
.pageActive{
background:url("../images /grid/page.png") no-repeat left -24px transparent
}


완료되었습니다! !


데모 다운로드