jquey datatables checkbox 列排序

Martin_Yelvin

已于 2022-05-13 09:48:44 修改

阅读量425

点赞数

分类专栏： jquery javascript 文章标签： javascript 前端开发语言

于 2022-05-13 09:23:03 首次发布

本文链接：https://blog.csdn.net/qq_36279445/article/details/124745262

版权

javascript 同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

jquery

33 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在使用jQuery DataTables时，针对ICheck插件的复选框进行排序。提供了两种排序函数，分别适用于ICheck和普通checkbox。如果在分页时遇到问题，还提供了一个额外的解决方案，确保在切换页面时checkbox的排序依然正确。内容涉及到前端开发中的表格排序和UI交互技术。

摘要由CSDN通过智能技术生成

jquey datatables checkbox 列排序，icheck的选择框排序

如果你的checkbox是icheck的，请参考：


  $.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
    return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
        return $('div', td).hasClass('checked') ? '1' : '0';
    });
  }

如果是普通checkbox

下面换成这个，上面初始化 columnDefs的里面不变

  $.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
    return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
        return $('input', td)[1].checked ? '1' : '0';
    });
}

columns.orderDataType

如果你换页的checkbox 没参与排序的话，那就这样解决：


  $.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
    return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
        return $('div.icheckbox_flat-red', td).hasClass('checked') || $('input', td).prop('checked') ? '1' : '0';
    });
  }