DataTables示例 行选择

如果要在DataTables中具有用户可选的行,则在使用DOM时相对来说比较琐碎 基于数据的数据-但是在使用服务器端处理时,DataTables不会保留DOM行元素 页面/过滤等。因此,您需要跟踪用户被选中的行并进行标记 他们在每次抽奖中选择。

在此演示中对此进行了展示,该演示使用分配给TR元素的唯一ID(此操作已完成) automatically through the use of the DT_RowId special property returned as part of the 服务器为每一行指定的对象),以跟踪选择了哪些行并重新选择它们 适当地平局。

名称 位置 办公室 扩展 开始日期 薪水
名称 位置 办公室 扩展 开始日期 薪水

下面显示的Javascript用于初始化此显示的表 example:

$(document).ready(function() { var selected = []; $("#example").dataTable({ "processing": true, "serverSide": true, "ajax": "scripts/ids-arrays.php", "rowCallback": function( row, data, displayIndex ) { if ( $.inArray(data.DT_RowId, selected) !== -1 ) { $(row).addClass('selected'); } } }); $('#example tbody').on('click', 'tr', function () { var id = this.id; var index = $.inArray(id, selected); if ( index === -1 ) { selected.push( id ); } else { selected.splice( index, 1 ); } $(this).toggleClass('selected'); } ); } );

除上述代码外,以下Javascript库文件也已加载以供在本文档中使用。 example:

下面显示的HTML是原始HTML表格元素,之前已通过 DataTables:

除了从库中加载的内容外,此示例还使用了一些其他CSS 文件(如下),以便正确显示表格。显示了使用的其他CSS below:

加载以下CSS库文件以供本示例使用,以提供 table:

该表通过Ajax加载数据。下面显示了已加载的最新数据。这个数据 将在加载任何其他数据时自动更新。

下面显示了用于执行此表的服务器端处理的脚本。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以用任何形式编写 language, using 协议中描述的协议 DataTables文档.