Jquery 数据表选择位于第 1 页以外的其他页上的行
Jquery Datatables select row that is on other page than 1st
嗨,我有一个数据表,它像这样包含
$('.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);
相关文章:
- 用程序搜索JQuery数据表中的文本
- 具有rowGrouping的数据表无法隐藏列
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 将单击事件添加到数据表
- 使用带有参数的数据表sAjaxSource
- 对角度数据表中括号内的数字进行排序
- 动态构建一个数据表与scriplets
- jquery数据表的自定义ko绑定
- 预览数据表单
- 如何在数据表中设置从Ajax响应选中的复选框
- DT数据表背景颜色为黑色,但仍有悬停和选择颜色
- 如何使用javascript检测数据表分页的其他页面中的复选框
- Jquery 数据表选择位于第 1 页以外的其他页上的行
- 数据表删除按钮在其他页面上不起作用,除了第一个
- 如果下一页或其他某个页面 JQuery 数据表中存在该行,如何删除该行
- 如何向数据表标头添加其他筛选器
- 如何在不影响 Jquery 数据表中其他行的情况下删除选定的现有数据并添加新行
- 包含图标的数据表,不根据其他列对列进行排序
- 如何对谷歌图表数据表进行排序,并将排序扩展到其他列
- YUI数据表块在页面上输入其他组件的事件