jQuery中Datatables增加跳转到指定页功能
下面一段代码是关于datatable增加跳转到指定页功能,具体代码如下所示:
var mytable=$('#datatables'); mytable.dataTable( { "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "bProcessing": true, "bServerSide": true, "sAjaxSource": "/user/list", "aoColumns": [ { "mData": "Id" }, { "mData": "Username" }, {"mData":function(obj){ return obj.group; }}, {"mData":"yiyuan"}, {"mData":function(obj){ return obj.keshi; }}, {"mData":function(obj){ if(obj.Status==1){ return "使用中"; }else{ return "禁用"; } }}, {"mData": function(obj){ var del=""; if(isAdmin){ del='<a data-title="' +obj.Id+'" class="btnbtn-danger"><iclass="icon-wrenchicon-white"></i>删除</a>'; } return '<adata-title="' +obj.Id+'" class="btnbtn-success"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"><iclass="icon-editicon-white"></i>修改</a>' +' '+del; },bSortable :false} ], "fnDrawCallback": function(){ var oTable=$("#datatables").dataTable(); $('#redirect').keyup(function(e){ if($(this).val() &&$(this).val()>0){ var redirectpage=$(this).val()-1; }else{ var redirectpage=0; } oTable.fnPageChange( redirectpage); }); } }); bootstrap插件形式: /* SetthedefaultsforDataTablesinitialisation*/ $.extend( true, $.fn.dataTable.defaults,{ "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sSearch": "快速搜索:", "bAutoWidth": true, "sLengthMenu": "每页显示 _MENU_条记录", "sZeroRecords": "Nothing found-没有记录", "sInfo": "_START_ 到_END_条,共_TOTAL_条", "sInfoEmpty": "显示0条记录", "sInfoFiltered": "(从 _MAX_条中过滤)", "sProcessing":"<div style=''><imgsrc='../static/img/loader.gif'><span>加载中...</span></div>", "oPaginate": { "sPrevious": "", "sNext": "", "sLast": ">>", "sFirst": "<<" } } } ); /* Defaultclassmodification*/ $.extend( $.fn.dataTableExt.oStdClasses,{ "sWrapper": "dataTables_wrapper form-inline" } ); /* APImethodtogetpaginginformation*/ $.fn.dataTableExt.oApi.fnPagingInfo =function (oSettings) { return { "iStart": oSettings._iDisplayStart, "iEnd": oSettings.fnDisplayEnd(), "iLength": oSettings._iDisplayLength, "iTotal": oSettings.fnRecordsTotal(), "iFilteredTotal": oSettings.fnRecordsDisplay(), "iPage": Math.ceil(oSettings._iDisplayStart/oSettings._iDisplayLength), "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay()/oSettings._iDisplayLength) }; }; /* Bootstrapstylepaginationcontrol*/ $.extend( $.fn.dataTableExt.oPagination,{ "bootstrap": { "fnInit": function( oSettings,nPaging,fnDraw){ var oLang=oSettings.oLanguage.oPaginate; var fnClickHandler=function (e){ e.preventDefault(); if (oSettings.oApi._fnPageChange(oSettings,e.data.action)){ fnDraw( oSettings); } }; $(nPaging).addClass('pagination').append( '<ul>'+ '<li class="firstdisabled"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">'+oLang.sFirst+'</a></li>'+ '<li class="prevdisabled"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">←'+oLang.sPrevious+'</a></li>'+ '<li class="nextdisabled"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">'+oLang.sNext+' →</a></li>'+ '<li class="lastdisabled"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">'+oLang.sLast+'</a></li>'+ '<input type="text"style="width:30px;padding-top:5px;padding-bottom:5px;height:18px;border-left:0px;border-radius:0px4px4px0px;"id="redirect"class="redirect">'+ '</ul>' ); //datatables分页跳转 $(nPaging).find(".redirect").keyup(function(e){ var ipage=parseInt($(this).val()); var oPaging=oSettings.oInstance.fnPagingInfo(); if(isNaN(ipage) ||ipage<1){ ipage =1; }else if(ipage>oPaging.iTotalPages){ ipage=oPaging.iTotalPages; } $(this).val(ipage); ipage--; oSettings._iDisplayStart =ipage*oPaging.iLength; fnDraw( oSettings); }); var els=$('a', nPaging); $(els[0]).bind( 'click.DT', { action: "first" }, fnClickHandler); $(els[1]).bind( 'click.DT', { action: "previous" }, fnClickHandler); $(els[2]).bind( 'click.DT', { action: "next" }, fnClickHandler); $(els[3]).bind( 'click.DT', { action: "last" }, fnClickHandler); }, "fnUpdate": function (oSettings,fnDraw){ var iListLength=5; var oPaging=oSettings.oInstance.fnPagingInfo(); var an=oSettings.aanFeatures.p; var i,ien,j,sClass,iStart,iEnd,iHalf=Math.floor(iListLength/2); if (oPaging.iTotalPages<iListLength){ iStart =1; iEnd =oPaging.iTotalPages; } else if (oPaging.iPage<=iHalf){ iStart =1; iEnd =iListLength; } else if (oPaging.iPage>=(oPaging.iTotalPages-iHalf)){ iStart =oPaging.iTotalPages-iListLength+1; iEnd =oPaging.iTotalPages; } else { iStart =oPaging.iPage-iHalf+1; iEnd =iStart+iListLength-1; } for (i=0,ien=an.length;i<ien;i++){ // Removethemiddleelements ($('li:gt(1)', an[i]).filter(':not(:last)')).filter(':not(:last)').remove(); // Addthenewlistitemsandtheireventhandlers for (j=iStart;j<=iEnd;j++){ sClass =(j==oPaging.iPage+1)?'class="active"' :''; $('<li '+sClass+'><a href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">'+j+'</a></li>') .insertBefore( $('.next', an[i])[0]) .bind('click', function (e){ e.preventDefault(); oSettings._iDisplayStart =(parseInt($('a', this).text(),10)-1) *oPaging.iLength; fnDraw( oSettings); } ); } // Add/removedisabledclassesfromthestaticelements if (oPaging.iPage===0){ $('li:lt(2)', an[i]).addClass('disabled'); } else { $('li:lt(2)', an[i]).removeClass('disabled'); } if (oPaging.iPage===oPaging.iTotalPages-1||oPaging.iTotalPages===0){ $('.next', an[i]).addClass('disabled'); $('li:last', an[i]).addClass('disabled'); } else { $('.next', an[i]).removeClass('disabled'); $('li:last', an[i]).removeClass('disabled'); } } } } } ); /* * TableToolsBootstrapcompatibility * RequiredTableTools2.1+ */ if ($.fn.DataTable.TableTools){ // SettheclassesthatTableToolsusestosomethingsuitableforBootstrap $.extend( true, $.fn.DataTable.TableTools.classes,{ "container": "DTTT btn-group", "buttons": { "normal": "btn", "disabled": "disabled" }, "collection": { "container": "DTTT_dropdown dropdown-menu", "buttons": { "normal": "", "disabled": "disabled" } }, "print": { "info": "DTTT_print_info modal" }, "select": { "row": "active" } } ); // Havethecollectionuseabootstrapcompatibledropdown $.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags,{ "collection": { "container": "ul", "button": "li", "liner": "a" } } ); }
好了,下面看下jQuerydatatable中加入双击跳转功能
$('#topicDgtbody').on('dblclick','tr',function(){ varself=$(this); varid=self.find('.td-id').text(); varname=self.find('.td-name').text(); creatIframe("/post/postList.do?id="+id+"&name="+name,"帖子管理"); });
ps:点击话题列表中的一行,跳转到帖子列表中。