先上图看效果,大家感觉还错请参考功能怎么实现的!
从上图中不难看出,我们制定跳转到某页的功能是基于链接寻呼机之上的扩展,这根我们之前实现的分页扩展明显不同,之前的明显就是重写了!当然,这都不重要,我们看看戈林寻呼机的具体实现!名字起的有点更低,不重要!
1、在前端组件目录新建戈林寻呼机类文件
2、该类继承yii widgets LinkPager,如下:
命名空间前端组件;使用yii 小部件链接寻呼机使用yii 助手 HtmlGoLinkPager类扩展了链接寻呼机{ 3 },添加属性public $ go=false//是否包含跳转功能跳转默认错误的
4、重写父类链接寻呼机的呈现页面按钮方法,具体直接参考下面完整版代码,可主要看去部分的代码实现。
?phpnamespace前端组件;使用yii 小部件链接寻呼机使用yii 助手 Html类戈林寻呼机扩展了link寻呼机{ //是否包含跳转功能跳转默认false public $ go=false受保护函数renderPageButtons(){ $页数=$ this-pagination-getpage count();if($ page count 2 $ this-hideosingpage){ return " ";} $ button=[];$ CurrentPage=$ this-page-GetPage();//第一页$首页标签=$ this-首页标签===true?1 ' :美元本-首页标签;if ($firstPageLabel!==false){ $ buttons[]=$ this-renderPageButton($第一页标签,0,$ this-first pages class,$currentPage=0,false);}//prev page if($ this-prev page标签!==false){ if($ page=$ CurrentPage-1)0){ $ page=0;} $ buttons[]=$ this-renderPageButton($ this-previpagelabel,$page,$ this-previpagecsclass,$currentPage=0,false);} //内部页面列表($beginPage,$ end page)=$ this-get page range();for($ I=$ BeginPage;$ i=$ end page $ I){ $ buttons[]=$ this-renderPageButton($ I 1,$ I,null,false,$ I==$ CurrentPage);} //下一页if ($this-nextPageLabel!==false){ if(($ page=$ CurrentPage 1)=$ PageCount-1){ $ page=$ PageCount-1;} $ buttons[]=$ this-renderPageButton($ this-nextPageLabel,$page,$ this-nextpagecsclass,$currentPage=$pageCount - 1,false);} //最后一页$ lastPageLabel=$ this-lastPageLabel===true?$页数: $ this-lastPageLabel;if ($lastPageLabel!==false){ $ buttons[]=$ this-renderPageButton($ lastPageLabel,$pageCount - 1,$ this-lastpagecsclass,$currentPage=$pageCount - 1,false);}//go if($ this-go){ $ go page=$ current page 2;$ GoHTMl=GoHTMl div class=' form ' style=' float 3360 left;颜色: # 999左边距left : 10px ' font-size : 12px;'span class='text '共{$pageCount}页/span span class='text '到第/span input class=' input ' type=' number ' value=' { $ gopag } ' min=' 1 ' max=' { $ page count } ' aria-label='页码输入框style=' text-align : center高度: 25px线高: 20px边距-top : 5px;宽度: 46pxspan class='text '页/span span class=' BTN go-page ' role=' button ' tabindex=' 0 ' style=' border : solid 1px # CCC;padding: 0px高度: 25px宽度: 46px线高: 25px'确定/span/div GoHTML;$ buttons[]=$ GoHTML;$ PageLink=$ this-paging-CreateURl(false);$goJs=goJs $(' .转到页面')。on('click ',function () { var _this=$(this),_pageInput=_this。姐弟(' Input '),goPage=_pageInput.val(),page link=' { $ page link } page link=page link。替换(' page=1 ',' page=' goPage ');if(go page=1 go page={ $ page count }){ window。位置。href=页面链接;} else { _ page Input。焦点();} });goJs $ this-view-register js($ Gojs);}返回HTMl :3360标记(' ul ',内爆(' n ',$buttons),$ this-options);}}下面看具体使用:
?=GolinkPager : Widget([' pagination '=$ pages,' go'=true,]);可以看出,使用起来也是贼方便贼方便的!加一个属性去为真实的即可。
需要注意的是,完整版代码中go部分的html js可以根据自己的需要进行修改和排序!
以上内容是边肖介绍的实现yii2分页跳转到特定页面的示例代码,希望对大家有所帮助!