下面一段代码是关于datatable增加跳转到指定页功能,具体代码如下所示:
<'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(
'- '+
'
- '+oLang.sFirst+' '+ '
- ← '+oLang.sPrevious+' '+ '
- '+oLang.sNext+' → '+ '
- '+oLang.sLast+' '+ '' ); //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
好了,下面看下jQuery datatable中加入双击跳转功能
ps:点击话题列表中的一行,跳转到帖子列表中。