资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

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


本文标题:jQuery中Datatables增加跳转到指定页功能
网站网址:http://www.cdkjz.cn/article/pgssoh.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220