获得jquery-datatables 选中的行的内容

悠悠 2022-06-09 13:07 377阅读 0赞

或许之前对于jQuery-datatables的理解有误，只是单从一个后端开发者的角度去理解确实感觉这个前端框架不像easyUI那样好用，也不像bootstrap那样简洁。实际上，任何一个框架都是有它存在的理由，如果从前端的角度来理解jQuery-datatables似乎就比较合理了，不需要重头开始写table，样式和常用的事件都封装好了，实际上也是挺好用的。

======下面是之前的内容

我对于jQuery-datatables 已经是无力吐槽，如果你是自己接活，没有专业的前端，建议你还是选择其他的表格吧，如果你们公司正在用jQuery-datatables，在这里只能祝你好运了。当然了，这么说似乎有些偏激，不过作为一名不太研究前端的程序员，对一个让他通了几宵的一个前端框架有个抱怨也没啥。

按照面向对象的角度思考问题，获取选中行的内容理应该有个方法来支持，但是你想多了。用过easyUI的朋友可能在这里非常不适应。不知道我是该赞扬它简洁，美观。还是该批判它太过于简陋。既然对table进行了封装，那么就彻底一点好不好，很多地方想要实现一个功能，感觉似乎都在给jQuery-datatables擦屁股。

以获取选中行的内容来看，下面列出了几段代码，

*  第一段就是一个HTML中使用了table

*  第二段是通过js将HTML中使用table渲染成为jQuery-datatables

*  第三段是tbody的点击事件，用来获取选中行的内容

### 下面是具体代码： ###

**1、HTML中定义的表格**

**2、渲染一个table对象**

下面这段代码就是把HTML中的table，转成jQuery-datatables对象，也就是我们定义的table。如果没有特殊需求，下面的代码可以不用修改直接使用。如果要进行一些修改，可以查官方的API，如果对js的面向对象比较熟悉的朋友应该还是比较简单的。

var table = $('#table').dataTable({
        "aaSorting": [[ 1, "desc" ]],//默认第几个排序
        "bStateSave": true,//状态保存
        "aoColumnDefs": [
          //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
          {"orderable":true,"aTargets":[1,5]}// 不参与排序的列
        ]
    });

**3、获得单机事件的点击行的内容**

注意在HTML代码中，tbody的onclick属性上绑定了一个getSelectLine方法，当点击了某一行时，**jQuery-datatables会给这一行的class上标记一个selected样式类**，那么我们实现的思路就是遍历这个表格，找到样式中带有selected的行，就可以了。这个方法的实现如下。

通过 以上，就可以获取选择行的内容了，是不是感觉确实是比较麻烦。不知道有没有其他更好的方法，可以分享出来一起学习！