下面一段代码是关于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='删除'; } 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>>", "sPaginationType": "bootstrap", "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( '
好了,下面看下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&#63;id="+id+"&name="+name,"帖子管理"); });
ps:点击话题列表中的一行,跳转到帖子列表中。