或许之前对于jQuery-datatables的理解有误,只是单从一个后端开发者的角度去理解确实感觉这个前端框架不像easyUI那样好用,也不像bootstrap那样简洁。实际上,任何一个框架都是有它存在的理由,如果从前端的角度来理解jQuery-datatables似乎就比较合理了,不需要重头开始写table,样式和常用的事件都封装好了,实际上也是挺好用的。
======下面是之前的内容
我对于jQuery-datatables 已经是无力吐槽,如果你是自己接活,没有专业的前端,建议你还是选择其他的表格吧,如果你们公司正在用jQuery-datatables,在这里只能祝你好运了。当然了,这么说似乎有些偏激,不过作为一名不太研究前端的程序员,对一个让他通了几宵的一个前端框架有个抱怨也没啥。
按照面向对象的角度思考问题,获取选中行的内容理应该有个方法来支持,但是你想多了。用过easyUI的朋友可能在这里非常不适应。不知道我是该赞扬它简洁,美观。还是该批判它太过于简陋。既然对table进行了封装,那么就彻底一点好不好,很多地方想要实现一个功能,感觉似乎都在给jQuery-datatables擦屁股。
以获取选中行的内容来看,下面列出了几段代码,
1、HTML中定义的表格
<table id="table" class="table table-border table-bordered table-bg table-hover table-sort">
<thead>
<tr class="text-c">
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody onclick="getSelectLine()">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
</table>
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的行,就可以了。这个方法的实现如下。
function getSelectLine() {
var nTrs = table.fnGetNodes();//fnGetNodes获取表格所有行,nTrs[i]表示第i行tr
for ( var i = 0; i < nTrs.length; i++) {
if($(nTrs[i]).hasClass('selected')){//相当于$(tr)
var selectLine = table.fnGetData(nTrs[i]);
alert(selectLine[4]);//获取一行第4列数据
}
}
}
通过 以上,就可以获取选择行的内容了,是不是感觉确实是比较麻烦。不知道有没有其他更好的方法,可以分享出来一起学习!