热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

本文给大家分享jquery中datatable增加跳转到指定页面功能以及jquerydatatable中加入双击跳转功能的实例代码,需要的朋友参考下

下面一段代码是关于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( '' ); //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 = (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&#63;id="+id+"&name="+name,"帖子管理"); 
}); 

ps:点击话题列表中的一行,跳转到帖子列表中。


推荐阅读
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • Asp.net MVC 中 Bundle 配置详解:合并与压缩 JS 和 CSS 文件
    本文深入探讨了 Asp.net MVC 中如何利用 Bundle 功能来合并和压缩 JavaScript 和 CSS 文件,提供了详细的配置步骤和示例代码,适合开发人员参考学习。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 深入解析ES6至ES8的新特性与应用
    本文详细介绍了自2015年发布的ECMAScript 6.0(简称ES6)以来,JavaScript语言的多项重要更新,旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]
  • 本文探讨了Java编程的核心要素,特别是其面向对象的特性,并详细介绍了Java虚拟机、类装载器体系结构、Java类文件和Java API等关键技术。这些技术使得Java成为一种功能强大且易于使用的编程语言。 ... [详细]
  • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • 本文将介绍如何利用Python爬虫技术抓取国内主流在线学习平台的数据,并以51CTO学院为例,进行详细的技术解析和实践操作。 ... [详细]
author-avatar
X巩工916BGR_426
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有