jQuery_jquery를 기반으로 간단한 페이징 제어 구현
- WBOY원래의
- 2016-05-16 18:18:521204검색
1: 렌더링 
2: 재료 
3: 코딩
3.1 생각하기
무엇을 해야 할까요? 2: 현재 페이지 수정 및 삭제 시 기억 가능
3: 쿼리 후 페이지 넘김 시 현재 쿼리의 조건을 기억할 수 있음
3.2 구현
HTML 🎜>
코드 복사 코드는 다음과 같습니다. >
jQuery
컨트롤을 자유롭게 사용할 수 있도록 플러그인 형식으로 작성합니다. 먼저 프레임워크를 설정합니다. 플러그인 이름을 simplePage로 지정합니다.
코드 복사
코드는 다음과 같습니다. (function ($){ $.fn.simplePage=function(o){
var options={ //구성 매개변수
}
return //sth
}
})(jQuery)
기본 매개변수는 무엇인가요?
현재 페이지와 페이지당 디스플레이 수를 전송해야 하므로 currentPage와 pageSize라는 두 가지 기본 매개변수가 필요합니다.
테이블의 내용을 쿼리해야 하므로 양식 양식이 필요합니다. 쿼리 조건을 배치합니다.
수정하고 삭제해야 하기 때문에 현재 페이지를 기억하므로 현재 수행 중인 작업 유형을 나타내는 기호가 필요합니다. }
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
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 함수를 구현합니다
//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
을 구현합니다.
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函数，不常简单
$.line={
setLine:function(totalPage,o){
for(var i=0;i
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}
}
接着我们实现生成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格式以便发送查询的数据，只支持입력，선택
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函数
널을 반환합니다;
}
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);
})
}
자 이제 기본 기능이 완성되었습니다
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로 확인해 보겠습니다. 생성된 페이징 구조는 다음과 같은 스타일로 작성되었습니다.
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
}
완료되었습니다! !
데모 다운로드
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
}
완료되었습니다! !
데모 다운로드
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.