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 相关文章推荐
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
Vue.js中的组件系统
May 30 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
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语言流程控制中的主动与被动
2012/11/05 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
详解Python中的文件操作
2016/08/28 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
意大利团购网站:Groupon意大利
2016/10/11 全球购物
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
如何提高JDBC的性能
2013/04/30 面试题
Oracle快照(snapshot)
2015/03/13 面试题
腾讯公司的一个sql题
2013/01/22 面试题
简历里的自我评价
2014/01/31 职场文书
节约用水的口号
2014/06/20 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
2015年女职工工作总结
2015/05/15 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
MySQL常见优化方案汇总
2022/01/18 MySQL