改dataTables并实现新的功能

最新推荐文章于 2024-05-07 22:51:29 发布

原创最新推荐文章于 2024-05-07 22:51:29 发布 · 976 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何为Datatables插件生成的搜索框添加CSS3动画效果，包括修改JavaScript代码以应用新样式类及实现鼠标聚焦时的动画扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Datatables是一款基于jQuery表格插件，他能给你动态生成一个input框，类型是search，

今天搞了一个后台模板，老大要求实现这个input搜索框的功能是: 鼠标放进去有个延伸的动画。这个自己写好写，但是改别人封装好的代码就不是那么简单了

1.在dataTables.bootstrap.js里面这个文件夹下面，能看到我们生成的input框的代码:

$.extend($.fn.dataTableExt.oStdClasses, {
    "sWrapper": "dataTables_wrapper form-inline",
    "sFilterInput": "form-control input-sm input-search",
    "sLengthSelect": "form-control input-sm"
});

我给他加了一个新的类名叫 input-search，方便后面获取

2.写css3动画

.add_Ani{
	animation: cer .5s forwards;
}
.add_Ani2{
	animation: cer2 .5s forwards;
}
@keyframes cer{
	from{width: 180px;}
	to{width: 220px;}
}
@keyframes cer2{
	from{width: 220px;}
	to{width: 180px;}
}

3. 最后一步，被卡了一段时间,我开始是直接这样写：

$(".input-search").focus(function(){
		$(this).addClass("add_Ani");
		$(this).removeClass("add_Ani2");
	})
	$(".input-search").focusout(function(){
		$(this).removeClass("add_Ani");
		$(this).addClass("add_Ani2")
	})

没有效果，妈蛋，后来一想，既然input框是js生成的，那应该是页面加载完我再获取才能获取到,所以正确代码是：

$(function(){
	console.log($(".input-search"));
	$(".input-search").focus(function(){
		$(this).addClass("add_Ani");
		$(this).removeClass("add_Ani2");
	})
	$(".input-search").focusout(function(){
		$(this).removeClass("add_Ani");
		$(this).addClass("add_Ani2")
	})
})