下面一段代码是关于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="btn btn-danger"><i class="icon-wrench icon-white" ></i>删除</a>'; } return '<a data-title="' + obj.id + '" class="btn btn-success" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="icon-edit icon-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插件形式: /* 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>>", "spaginationtype": "bootstrap", "olanguage": { "ssearch": "快速搜索:", "bautowidth": true, "slengthmenu": "每页显示 _menu_ 条记录", "szerorecords": "nothing found - 没有记录", "sinfo": "_start_ 到 _end_ 条,共 _total_ 条", "sinfoempty": "显示0条记录", "sinfofiltered": "(从 _max_ 条中过滤)", "sprocessing":"<div style=''><img src='../static/img/loader.gif'><span>加载中...</span></div>", "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( '<ul>'+ '<li class="first disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+olang.sfirst+'</a></li>'+ '<li class="prev disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >← '+olang.sprevious+'</a></li>'+ '<li class="next disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+olang.snext+' → </a></li>'+ '<li class="last disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+olang.slast+'</a></li>'+ '<input type="text" style="width: 30px;padding-top: 5px;padding-bottom: 5px;height: 18px;border-left: 0px;border-radius: 0px 4px 4px 0px;" 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++ ) { // remove the middle elements ($('li:gt(1)', an[i]).filter(':not(:last)')).filter(':not(:last)').remove(); // add the new list items and their event handlers for ( j=istart ; j<=iend ; j++ ) { sclass = (j==opaging.ipage+1) ? 'class="active"' : ''; $('<li '+sclass+'><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+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 / 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中加入双击跳转功能
$('#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:点击话题列表中的一行,跳转到帖子列表中。
如对本文有疑问, 点击进行留言回复!!
javascript从入门到跑路-----小文的js学习笔记(19)------- js的垃圾回收机制
Agora 开源 | 一个 Demo,帮你快速实现社交直播四大场景
网友评论