您的位置：首页 > Web前端 > CSS

如何在 datables中加入可输入的分页样式

2015-08-18 22:19 946 查看
最近写一个datatables的分页功能想把他改成可输入第几页然后goto进入那一页找到了方法，分享一下：

这里要用到extjs的插件在datables里这个插件的代码大概如下：

$.fn.dataTableExt.oApi.fnExtStylePagingInfo=function(oSettings) { return{ "iStart":oSettings._iDisplayStart, "iEnd":oSettings.fnDisplayEnd(), "iLength":oSettings._iDisplayLength, "iTotal":oSettings.fnRecordsTotal(), "iFilteredTotal":oSettings.fnRecordsDisplay(), "iPage":oSettings._iDisplayLength===-1? 0:Math.ceil(oSettings._iDisplayStart/oSettings._iDisplayLength), "iTotalPages":oSettings._iDisplayLength===-1? 0:Math.ceil(oSettings.fnRecordsDisplay()/oSettings._iDisplayLength) }; }; $.fn.dataTableExt.oPagination.extStyle={ "fnInit":function(oSettings,nPaging,fnCallbackDraw){ varoPaging=oSettings.oInstance.fnExtStylePagingInfo(); nFirst=$('<span/>',{'class':'paginate_buttonfirst',text:"<<"}); nPrevious=$('<span/>',{'class':'paginate_buttonprevious',text:"<"}); nNext=$('<span/>',{'class':'paginate_buttonnext',text:">"}); nLast=$('<span/>',{'class':'paginate_buttonlast',text:">>"}); nPageTxt=$("<span/>",{text:'Page'}); nPageNumBox=$('<input/>',{type:'text',val:1,'class':'pageinate_input_box'}); nPageOf=$('<span/>',{text:'/'}); nTotalPages=$('<span/>',{class:"paginate_total",text:oPaging.iTotalPages}); $(nPaging) .append(nFirst) .append(nPrevious) .append(nPageTxt) .append(nPageNumBox) .append(nPageOf) .append(nTotalPages) .append(nNext) .append(nLast); nFirst.click(function(){ if($(this).hasClass("disabled")) return; oSettings.oApi._fnPageChange(oSettings,"first"); fnCallbackDraw(oSettings); }).bind('selectstart',function(){returnfalse;}); nPrevious.click(function(){ if($(this).hasClass("disabled")) return; oSettings.oApi._fnPageChange(oSettings,"previous"); fnCallbackDraw(oSettings); }).bind('selectstart',function(){returnfalse;}); nNext.click(function(){ if($(this).hasClass("disabled")) return; oSettings.oApi._fnPageChange(oSettings,"next"); fnCallbackDraw(oSettings); }).bind('selectstart',function(){returnfalse;}); nLast.click(function(){ if($(this).hasClass("disabled")) return; oSettings.oApi._fnPageChange(oSettings,"last"); fnCallbackDraw(oSettings); }).bind('selectstart',function(){returnfalse;}); nPageNumBox.change(function(){ varpageValue=parseInt($(this).val(),10)-1;//-1becausepagesare0indexed,buttheUIis1 varoPaging=oSettings.oInstance.fnPagingInfo(); if(pageValue===NaN||pageValue<0){ pageValue=0; }elseif(pageValue>=oPaging.iTotalPages){ pageValue=oPaging.iTotalPages-1; } oSettings.oApi._fnPageChange(oSettings,pageValue); fnCallbackDraw(oSettings); }); }, "fnUpdate":function(oSettings,fnCallbackDraw){ if(!oSettings.aanFeatures.p){ return; } varoPaging=oSettings.oInstance.fnExtStylePagingInfo(); /*Loopovereachinstanceofthepager*/ varan=oSettings.aanFeatures.p; $(an).find('span.paginate_total').html(oPaging.iTotalPages); $(an).find('.pageinate_input_box').val(oPaging.iPage+1); $(an).each(function(index,item){ var$item=$(item); if(oPaging.iPage==0){ varprev=$item.find('span.paginate_button.first').add($item.find('span.paginate_button.previous')); prev.addClass("disabled"); }else{ varprev=$item.find('span.paginate_button.first').add($item.find('span.paginate_button.previous')); prev.removeClass("disabled"); } if(oPaging.iPage+1==oPaging.iTotalPages){ varnext=$item.find('span.paginate_button.last').add($item.find('span.paginate_button.next')); next.addClass("disabled"); }else{ varnext=$item.find('span.paginate_button.last').add($item.find('span.paginate_button.next')); next.removeClass("disabled"); } }); } };

要使用这个插件只要在你的表格中属性中加上

"sPaginationType"
:
"extStyle"


导入对应的js就可以了

还会在完善的

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航