JQuery Datatables 实现双击弹窗

原创于 2017-09-13 11:38:49 发布 · 4.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #datatables #双击弹窗

前端专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用JQuery Datatables插件实现表格中双击某行时触发弹窗显示微博信息的功能。通过监听表格的双击事件，获取选中行的数据，并在弹窗中展示。此外，还包含了选中行样式的处理逻辑。

$(document).ready(function() {
var editor = $('#example').dataTable( {
"data": [......], //数据省略
"iDisplayLength" : 100, //默认显示的记录数
"bSort" : true, //是否启动各个字段的排序功能
"columns": [
{ "title": "ID" },

{ "title": "微博链接" }]

} );

$("#example2 tbody tr").dblclick(function (e) { //双击相应事件
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
$(this).removeClass('trSelected');
}
else {
editor.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
var aData = editor.fnGetData(this);
if (null != aData) {
alert('微博信息采集') //弹窗框，可根据需求自行设计
}
var trThis = this;
editor.$('tr.trSelected').removeClass('trSelected');
if ($(trThis).get(0) == $("tr:first", $(trThis)).get(0)){
return;
}
$(trThis).addClass('trSelected');
}
});

});