摘要:本篇jQuery教程探讨了 jQuery-DataTables跨页全选,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
最近要做一个全选框,想实现全选/多选/任意全不选 功能。因为之前用datatables实现了大部分功能,想直接看有没有合适的接口,结果踩坑踩了一下午。记录一下正确的姿势。
坑1:版本
需要的DataTables版本不能太低,好像说不能低于 1.10.6(具体文档找不到了,我用1.10.16是可以的)
坑2:引入顺序
select似乎要在datatables之后引入,如下:
<script type="text/javascript" src="{% static "js/plugins/datatables/jquery.dataTables.1.10.16.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/plugins/datatables/dataTables.select.min.js" %}"></script>
注意了这两个坑,基本雷就踩得差不多了。下面介绍正确姿势。
正确姿势
hello代码
首先引入js。如坑2所示。
然后在js中创建table:
var table = $('#example').DataTable( {
// 注意,这里一定要是 DataTAble, 不要写成 dataTable
dom: 'Bfrtip',
select: true,
buttons: [
{
text: 'Select all',
action: function () {
table.rows().select();
}
},
{
text: 'Select none',
action: function () {
table.rows().deselect();
}
}
]
} );
这里其实全选的关键并不是buttons,
而是table.rows().select()。所以你可以单独写一个button来完成这个动作。这样,跨页全选就算完成了。
设置为多选
默认情况,select会将DataTable设置成单选,所以如果要多选,需要把select的值设置成'multi',如
var table = $('#example').DataTable( {
dom: 'Bfrtip',
select: 'multi',
buttons: [
{
text: 'Select all',
action: function () {
table.rows().select();
}
},
{
text: 'Select none',
action: function () {
table.rows().deselect();
}
}
]
} );
获取表中数据
可以通过 table.rows({selected: true}).data()获取表中的数据。以此方法获取的数据是一个list,形如:
[
{'name': 'Gourdin', 'race': 'orc'},
{'name': 'Illidan', 'race': 'elf'},
]
设置选中状态
css可以设置选中状态
.dataTable tbody tr.selected td {background-color: #78dbff;}
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号