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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 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简单预防sql注入的方法
2016/09/27 PHP
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
JS中表单的使用小结
2014/01/11 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
python之文件读取一行一行的方法
2018/07/12 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
自荐信怎么写好
2013/11/11 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
团委竞选演讲稿
2014/04/24 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
Python 文字识别
2022/05/11 Python