jQuery_jquery를 기반으로 간단한 페이징 제어 구현

1: 렌더링

2: 재료

3: 코딩
3.1 생각하기
무엇을 해야 할까요? 2: 현재 페이지 수정 및 삭제 시 기억 가능
3: 쿼리 후 페이지 넘김 시 현재 쿼리의 조건을 기억할 수 있음

3.2 구현
HTML 🎜>

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

jQuery
컨트롤을 자유롭게 사용할 수 있도록 플러그인 형식으로 작성합니다. 먼저 프레임워크를 설정합니다. 플러그인 이름을 simplePage로 지정합니다.

코드 복사

코드는 다음과 같습니다. (function ($){ $.fn.simplePage=function(o){

var options={

//구성 매개변수
}
return //sth
}
})(jQuery)


기본 매개변수는 무엇인가요?
현재 페이지와 페이지당 디스플레이 수를 전송해야 하므로 currentPage와 pageSize라는 두 가지 기본 매개변수가 필요합니다.
테이블의 내용을 쿼리해야 하므로 양식 양식이 필요합니다. 쿼리 조건을 배치합니다.

수정하고 삭제해야 하기 때문에 현재 페이지를 기억하므로 현재 수행 중인 작업 유형을 나타내는 기호가 필요합니다.
프로그램을 보다 유연하게 만들기 위해 다음을 추가합니다. 데이터를 얻은 후 로드해야 하는 컨테이너와 페이징 제어가 로드되는 페이저
는 다음과 같습니다




코드 복사

코드는 다음과 같습니다. var options={ pager: '.pager',//Container for table control

container: '.tableData',//Container 테이블 데이터 배치용

form: '#form',//쿼리 조건 배치용 양식
pageForm: '#pageForm',//숨겨진 Div 배치
url: '',//주소 요청 보내기
currentPage: 1,
pageSize: 2
type: null, //Optional: action,
pageShow:7
}


순서 유지 관리를 용이하게 하기 위해 데이터를 얻고 이벤트를 바인딩하는 독립 개체를 선언합니다. 함수 이름은 $.page

코드 복사

입니다. 코드는 다음과 같습니다. $.page = { //

setPage: function(o){

},
//Get the 현재 페이지
getCurrentPage: function(o){
},
//각 페이지 표시 수량 가져오기
getPageSize: function(o){
},
//json 데이터 생성 전송에 필요
genData: function(o){
},
//데이터 보내기
loadData: function(o){
}
}


위에서 선언한 함수를 구현합니다. 페이지가 처음 로드되면 페이징 제어를 생성하기 위해 서버에서 전체 데이터를 가져와야 하므로 먼저 loadData 함수를 구현합니다

코드 복사

코드는 다음과 같습니다. loadData: function(o){ var that = this;

var data = that.genData(o);

$.ajax({
url: o.url,
data: data,
type: 'post',
dataType : 'html',
캐시: false,
성공: 함수(결과){
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); //페이징 제어를 생성하는 함수 호출
},
error: function(){
Alert("error");
}
})
}


다음으로 위에서 생성된 페이징 컨트롤 $.line.setLine

을 구현합니다.

코드 복사

코드는 다음과 같습니다.

$.line={
setLine:function(totalPage,o){
for(var i=0;ivar a=$('< ;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);
}
varlimit=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 이전').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 레코드');
o.pager.prepend(prev).prepend(record).append(next);
}
}


현재 상면의 현대적인 페이지에서Active类，所以现我们可以实现$.page的getCurrentPage函数，不常简单

复제대码 代码如下: getcurrentPage: function(o){

var p = o. pager.find("a.pageActive").text();

p를 반환합니다.
}


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

复主代码 代码如下: genData: function(o){

var sdata = $.extend({}, { "currentPage": o. currentPage,

"pageSize": o.pageSize}, $.jsonObj(o.pageForm));
sdata를 반환합니다.
},


상면적$.jsonObj为自결정义的函数，为了生成我们需要的json格式以便发送查询的数据，只支持입력，선택

复代码 代码如下: $.jsonObj = function(form){

//判断是否有序列化적법한

if (!$(form).html() || $(form).html() == null || $.trim($(form).html()) == "") {
널을 반환합니다;
}
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 = 이름;
json = ":";
json = 발;
json = ",";
}
var lname = formEl.eq(formEl.length - 1).attr('name');
var lval = "'" formEl.eq(formEl.length - 1).val() "'";
json = l이름;
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 = 이름;
json = ":";
json = 발;
json = ",";
}
var lname = formselect.eq(formselect.length - 1).attr('name');
var lval = "'" formselect.eq(formselect.length - 1).val() "'";
json = l이름;
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
}


완료되었습니다! !


데모 다운로드