V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
piaochen0
V2EX  ›  jQuery

Jquery Datatable 前端分页 Checkbox 跨页全选的问题

  •  
  •   piaochen0 · 2021-04-19 09:34:54 +08:00 · 2026 次点击
    这是一个创建于 1322 天前的主题,其中的信息可能已经有所发展或是发生改变。

    业务需求:
    有一个主机列表,大概几百条数据,一次性发给前端,使用 DataTable 在前端进行分页后,使用 Checkbox 进行选择后,再发送给后端处理。
    前端进行分页,要支持跨页全选,选择等功能。

    问题:
    DataTable 怎么跨页对 Checkbox 进行全选?现在发现 Datatable 其实应该有地方存储了 checkbox 的状态,推断应该找到相关的地方,设置下所有 row 对应 checkbox 的状态就可以了。但是没有找到这样的 api

    第 1 条附言  ·  2021-04-19 10:43:14 +08:00
    我找到了一个方法,使用如下方式可以获取到每行的 html node 。
    这里的,是所有的行。包括没有显示的非当前页的行,也可以获取到。

    $('#table').DataTable().row(0).node()
    然后查找 input,获取 checkbox
    $($('#table').DataTable().row(0).node()).find('input')
    设置 checkbox 的选中状态就可以了
    $($('#table').DataTable().row(0).node()).find('input').prop("checked", is_checked)

    使用
    $('#table').DataTable().rows().count()获取所有行的 count,遍历一下就可以了。

    多谢各位。
    7 条回复    2021-04-19 10:01:56 +08:00
    lichdkimba
        1
    lichdkimba  
       2021-04-19 09:38:48 +08:00
    localstorage 强行存状态?
    maocat
        2
    maocat  
       2021-04-19 09:39:36 +08:00
    localstorage
    piaochen0
        3
    piaochen0  
    OP
       2021-04-19 09:46:04 +08:00
    @maocat #2 感觉不是 local storage 啊,浏览器调试了下,local storage 里面没有东西,清空了后,之前的状态还是在的
    muunala10221
        4
    muunala10221  
       2021-04-19 09:51:45 +08:00
    全选设置一个单独变量存储 ,翻页根据变量状态设置勾选与否
    maocat
        5
    maocat  
       2021-04-19 09:53:56 +08:00
    @piaochen0 你没理解到,localstorage 是你自己将状态封装进去,而不是他给你存好了,比如
    你做了
    localstorage.setItem("123", 456 )
    在你页面刷新后,你依旧可以取出这个值
    localstorage.getItem("123")// 456
    当然你还有许多细节需要处理,比如第一次进入页面的时候 localstorage 对应的数据应该是空的
    kop1989
        6
    kop1989  
       2021-04-19 09:58:05 +08:00
    lz 说的 dataTable 是这个么: https://datatables.net/
    大概看了一下,他 api 里有一个 rows()方法,描述是选中表格中的多行,这个是不是就可以实现?
    piaochen0
        7
    piaochen0  
    OP
       2021-04-19 10:01:56 +08:00
    @kop1989 #6 这个我也看了,dataTable 自带了一个选中的功能,但是表现形式是对某一行选中,让其这行变色,不是 checkbox 的方式。这种他们提供了你说的这个 api,可以直接用。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2518 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 02:41 · PVG 10:41 · LAX 18:41 · JFK 21:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.