当前位置: 移动技术网 > IT编程>开发语言>JavaScript > jQuery中Datatables增加跳转到指定页功能

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

2019年03月26日  | 移动技术网IT编程  | 我要评论

下面一段代码是关于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:点击话题列表中的一行,跳转到帖子列表中。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网