文档章节

Datatables的自定义columns渲染与事件注册冲突解决

银月光海
 银月光海
发布于 2016/06/13 14:10
字数 369
阅读 699
收藏 0

在使用datatables时,使用了2种风格的事件注册,结果冲突导致一个事件被覆盖,无法起作用。

改为一种风格后,使用event.stopPropagation();阻止事件冒泡,从而解决问题,上代码:

原来的js片段


	oTable = table.dataTable({
				processing : true, //加载数据时显示正在加载信息  
				ajax : {
					url : '/applyList',
					type: 'POST',
					dataType: 'json'
				},
				serverSide : true, //指定从服务器端获取数据   				
				drawCallback : function(settings, json) {// 数据加载完成之后回调函数
					 Metronic.unblockUI(table)
				},
				lengthMenu : [ 5, 10, 25, 50, 100 ],
				pageLength : 5,
				order : [[6,"desc"]],
				columns : [{
					title : "flowId",
					className : "hide",
					data : "flowId"
				}, {
                 ……各种列定义……
				}, {
					title : "修改申请",
					className : "center",
					render : function(data, type, full, meta) {
                        // 原来的写法,不起作用
                        // html = '<a href="javascript:resendForm(' + full.id + ');"><i class="fa fa-edit"></i>编辑</a>';
			        	html = '<a class="resendForm"><i class="fa fa-edit"></i> 编辑</a>';
			            return html;
					}
				}],
				//T:button f:search l:每页数量下拉  r:sProcessing t:表格框  i:data信息 p:分页
				sDom : "<T><'dt_header'<'row-fluid'<'col-sm-8'F><'col-sm-4'l>>r>t<'dt_footer'<'row-fluid'<'span6'i><'span6'p>>>",
				tableTools : {//编辑按钮
					"sRowSelect" : "single",
					"aButtons" : [
							{
								"sExtends" : "text",
								"sButtonText" : "申请",
								"fnClick" : toApply
							}
					]
				}
			});

	// 注册点击显示详细事件,整记录条都覆盖,导致编辑btn失效
    table.on('click', 'tbody tr', function (e) {
    	e.preventDefault();
        var nRow = $(this).parents('tr')[0];
        var index = e.currentTarget.rowIndex;
        var aData = oTable.fnGetData(nRow)[index - 1];
        viewDetail(aData.id);
    });

	// 注册修改申请事件,新方法
    table.on('click', 'tbody tr .resendForm', function (e) {
    	e.preventDefault();
    	e.stopPropagation();	// 阻止事件冒泡
        var nRow = $(this).parents('tr')[0];
        var aData = oTable.fnGetData(nRow);
        resendForm(aData);
    });

 

========参考=======

  1. http://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault
  2. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

 

© 著作权归作者所有

共有 人打赏支持
银月光海

银月光海

粉丝 37
博文 365
码字总数 46223
作品 0
浦东
项目经理
私信 提问
DataTables能实现移动端的下拉加载吗?可以,需要借助一下Scroller插件

版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/82287523 一、 通常情况下,DataTables(Datatables是一款具有高级交互功能的jQuery表格插件)只...

qing_gee
2018/09/01
0
0
dataTables相关资料参考

https://www.cnblogs.com/sweeeper/p/6106320.html http://yuemeiqing2008-163-com.iteye.com/blog/2006942...

ahl123
2018/07/02
0
0
jquery之DataTables的使用

强大的表格解决方案,有多强大,一起来看下吧: 1、DataTables的默认配置 $(document).ready(function() { $(‘#example’).dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/...

mickelfeng
2012/11/12
0
1
DataTables_详细使用方法

jQuery的DataTables插件的使用方法 ADMIN 2011年11月23日 13:15:45 发布 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTable...

喵王不瞌睡
2015/05/02
0
1
dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.NET/] 二:基本使用:[http://www.guoxk.com/node/jQuery-datatables] 1、DataTables的默认配置 $(...

ahl123
2018/07/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

python实现下载网络图片

项目需求: 有时候我们做爬虫的时候,需要把爬取到的图片资源保存到我们本地,以防爬取的图片链接被原来资源主人变更,所以就需要把好不容易拿到的资源永久变为自己的,就需要把图片链接下载到我们...

银装素裹
44分钟前
2
0
米利型和摩尔型状态机

1. 经典状态机 x(t)为当前输入 z(t)为当前输出 组合逻辑电路输出s(t+1)为次态 状态寄存器(也就是一组触发器)输出s(t)为现态 2. 米利状态机(Mealy) 组合逻辑C1模块有两个输入端:当前输入x(t...

易冥天
46分钟前
4
0
Kafka是如何解决常见的微服务通信问题的

微服务自成立以来就以不同的方式相互沟通。有些人更喜欢使用HTTP REST API,但这些API有自己的排队问题,而有些则更喜欢较旧的消息队列,比如RabbitMQ,它们带有扩展和操作方面的问题。 以K...

java菜分享
49分钟前
2
0
关于php的xdebug配置(编辑器vscode)

虽然说echo和print_r是公认的最实用的调试工具,但是效率真的没有可视化的直接断点那么高。这里简单介绍如果安装及配置xdebug for vscode 一、PHP环境处的配置 1、编译安装 下载及编译php,因...

元谷
今天
8
0
heartbeat

http://www.linux-ha.org/doc/users-guide/_building_and_installing_heartbeat_from_source.html kaer@linux-sqlf:~/Reusable-Cluster-Components-glue--0a7add1d9996> ./configure --enabl......

李有常
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部