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 相关文章推荐
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
IE与firefox之jquery用法区别
2008/10/03 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
监理资料员岗位职责
2014/01/03 职场文书
服务标兵事迹材料
2014/05/04 职场文书
贷款承诺书范文
2014/05/19 职场文书
端午节活动总结
2014/08/26 职场文书
收银员岗位职责
2015/02/03 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
python字符串的一些常见实用操作
2022/04/06 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
CSS的calc函数用法小结
2022/06/25 HTML / CSS