Jquery 数据表选择位于第 1 页以外的其他页上的行

Jquery Datatables select row that is on other page than 1st

本文关键字:数据表 其他 于第 Jquery 选择      更新时间:2023-09-26

嗨,我有一个数据表,它像这样包含

$('.bt-datatable').DataTable(
      {
        info: false,
        paging: true,
        pageLength: 5,
        "aoColumnDefs": [
          { "bSearchable": false, "aTargets": [ 1, 2, 3 ] }
        ]
      }
  );

这是我的数据表 Html,它具有用 ruby 语言编码的循环,可根据用户记录创建多行

<div class="table-responsive"style="display: none">
          <hr>
          <table class="bt-datatable table table-striped click-row-datatable" cellspacing="0" width="100%">
            <thead>
            <tr>
              <th class="text-left">Name</th>
              <th class="text-left">Status</th>
              <th class="text-left">Start Date</th>
            </tr>
            </thead>
            <tbody>
            <%
               @users.each do |user|
            %>
                <tr class='clickable-row' rel="<%= user.id %>">
                  <td class="text-left"><%= user.name %></td>
                  <td class="text-left"><%= user.status %></td>
                  <td class="text-left"><%= user.start_time %></td>
                </tr>
            <% end %>
            </tbody>
          </table>
        </div>

我在 Ruby 中有一个 Flash 变量,它保存在 flash[:user_id]

我正在做的是以某种方式保存 flash[:user_id],据此我想突出显示 rel 属性等于 flash[:user_id] 的行

这是页面加载时的JavaScript

var ele = $('[rel="<%= flash[:user_id] %>"]');
    ele.addClass('bg-info');

addClass 正在突出显示数据表中的行,但我面临的问题是当用户 ID 行在另一个页面上而不是第 1 个页面上时,它不会在该页面上加载表,甚至没有突出显示,而是仅在该用户在第一页时突出显示

Datatables 有一个 $() 函数,可用于在整个表上运行 jQuery 选择器,而不仅仅是可见行。在您的情况下,它将是这样的:

var table = $('.bt-datatable').DataTable(
  {
    info: false,
    paging: true,
    pageLength: 5,
    "aoColumnDefs": [
      { "bSearchable": false, "aTargets": [ 1, 2, 3 ] }
    ]
  }
);
var ele = table.$('[rel="<%= flash[:user_id] %>"]');
ele.addClass('bg-info');

但是,既然您似乎已经知道在 ruby 渲染它时要突出显示哪一行,那么让 ruby 处理它不是更好吗?像这样(免责声明:我不熟悉红宝石):

<tr class='clickable-row <% if user.id == flash[:user_id] %> bg-info<% end %>'>

第二部分

要显示所选行所在的页面,您可以使用 row().show() 插件。为此,您需要添加插件脚本,并在代码中调用行上的show()以显示正确的页面:

 var ele = table.$('.bg-info'); // TR element (assuming you used ruby to add the class)
 var row = table.row(ele); // Datatables row
 row.show().draw(false); // Show the page this row is in (and draw it)

或更短:

table.row('.bg-info').show().draw(false);