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


Posted in Javascript onFebruary 08, 2017

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

Javascript 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
node.js的事件机制
Feb 08 #Javascript
jQuery多选框选择数量限制方法
Feb 08 #Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 #Javascript
简单实现bootstrap选项卡效果
Feb 08 #Javascript
Bootstrap导航条学习使用(一)
Feb 08 #Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 #Javascript
Javascript中的神器——Promise
Feb 08 #Javascript
You might like
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
Vuejs实现购物车功能
2017/11/05 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
python实现一组典型数据格式转换
2018/12/15 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python制作词云图代码实例
2019/09/09 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
如何表示python中的相对路径
2020/07/08 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
房屋所有权证明
2014/10/20 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
学生犯错保证书
2015/05/09 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
Ajax异步刷新功能及简单案例
2021/11/20 Javascript