首页 > 编程 > JavaScript > 正文

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

2019-11-19 17:40:50
字体:
来源:转载
供稿:网友

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

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='<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(){      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 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:点击话题列表中的一行,跳转到帖子列表中。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表