微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery中Datatables增加跳转到指定页功能

下面一段代码是关于datatable增加跳转到指定页功能,具体代码如下所示:

rush:js;"> 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='删除'; } return '修改' +''+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插件形式: /* Set the defaults for DataTables initialisation */ $.extend( true,$.fn.dataTable.defaults,{ "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>","oLanguage": { "sSearch": "快速搜索:","bAutoWidth": true,"sLengthMenu": "每页显示 _MENU_ 条记录","sZeroRecords": "nothing found - 没有记录","sInfo": "_START_ 到 _END_ 条,共 _TOTAL_ 条","sInfoEmpty": "显示0条记录","sInfoFiltered": "(从 _MAX_ 条中过滤)","sProcessing":"
加载中...
","oPaginate": { "sPrevIoUs": "","sNext": "","sLast": ">>","sFirst": "<<" } } } ); /* Default class modification */ $.extend( $.fn.dataTableExt.oStdClasses,{ "sWrapper": "dataTables_wrapper form-inline" } ); /* API method to get paging information */ $.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 ) }; }; /* Bootstrap style pagination control */ $.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( '' ); //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'+j+'') .insertBefore( $('.next',an[i])[0] ) .bind('click',function (e) { e.preventDefault(); oSettings._idisplayStart = (parseInt($('a',this).text(),10)-1) * oPaging.iLength; fnDraw( oSettings ); } ); } // Add / remove disabled classes from the static elements 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'); } } } } } ); /* * Tabletools Bootstrap compatibility * required Tabletools 2.1+ */ if ( $.fn.DataTable.Tabletools ) { // Set the classes that Tabletools uses to something suitable for Bootstrap $.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" } } ); // Have the collection use a bootstrap compatible dropdown $.extend( true,$.fn.DataTable.Tabletools.DEFAULTS.oTags,{ "collection": { "container": "ul","button": "li","liner": "a" } } ); }

好了,下面看下jQuery datatable中加入双击跳转功能

rush:js;"> $('#topicDg tbody').on('dblclick','tr',function(){ var self=$(this); var id=self.find('.td-id').text(); var name=self.find('.td-name').text(); creatIframe("/post/postList.do?id="+id+"&name="+name,"帖子管理"); });

ps:点击话题列表中的一行,跳转到帖子列表中。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐