首页 / 脚本样式 / JavaScript / jQuery中Datatables增加跳转到指定页功能

varmytable = $（"#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）{returnobj.group;}},{"mData":"yiyuan"},{"mData":function（obj）{returnobj.keshi;}},{"mData":function（obj）{if（obj.Status==1）{return"使用中";}else{return"禁用";}}},{"mData":function（obj）{vardel="";if（isAdmin）{del="<adata-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（）{varoTable = $（"#datatables"）.dataTable（）;$（"#redirect"）.keyup（function（e）{if（$（this）.val（） && $（this）.val（）>0）{varredirectpage = $（this）.val（）-1;}else{varredirectpage = 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 ） {varoLang = oSettings.oLanguage.oPaginate;varfnClickHandler = 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）{ varipage = parseInt（$（this）.val（））; varoPaging = oSettings.oInstance.fnPagingInfo（）; if（isNaN（ipage） || ipage<1）{ ipage = 1; }elseif（ipage>oPaging.iTotalPages）{ ipage=oPaging.iTotalPages; } $（this）.val（ipage）;ipage--; oSettings._iDisplayStart = ipage * oPaging.iLength; fnDraw（ oSettings ）; }）;varels = $（"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 ） {variListLength = 5;varoPaging = oSettings.oInstance.fnPagingInfo（）;varan = oSettings.aanFeatures.p;vari, ien, j, sClass, iStart, iEnd, iHalf=Math.floor（iListLength/2）;if（ oPaging.iTotalPages < iListLength） {iStart = 1;iEnd = oPaging.iTotalPages;}elseif （ oPaging.iPage <= iHalf ） {iStart = 1;iEnd = iListLength;}elseif （ 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 handlersfor（ 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 elementsif（ 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"}} ）;}

$（"#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,"帖子管理"）; }）;