Javascript 存储选定的行id

我从数据库的查询中加载了一个datatable。（+/-10000条记录） 其想法是，用户应该能够选择多个记录，以便以后处理

首先，我想为选择添加一个带有复选框的列，然后当用户完成所有选择时，应用程序会跟踪所有选定的行，然后在页面上的某些位置使用“next Button”（下一步按钮）进入下一步，但经过12个小时的尝试，我无法完成

然后，我想通过在每行中添加一个按钮来简化它，这样每当用户单击此按钮时，应用程序都会将所选id保存在会话变量中

<div class="panel-body">

<table id="userTable" class="table display compact order-column">
    <thead>
    <tr>
        <th>Select</th>
        <th>Name</th>
        <th>City</th>
        <th>Phone</th>
        <th>Zipcode</th>
    </tr>
    </thead>  
</table>

---

您可以使用datatable的行选择功能来实现您想要做的事情

$(document).ready(function() {
    var table = $('#userTable').DataTable();

    $('#userTable tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );

    $('#submitButtonId').click( function () {
        alert( table.rows('.selected').data().length +' row(s) selected' );
        // You can use  table.rows('.selected').data()  to get all the selected Data
    } );
} );

---

您可以使用datatable的行选择功能来实现您想要做的事情

$(document).ready(function() {
    var table = $('#userTable').DataTable();

    $('#userTable tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );

    $('#submitButtonId').click( function () {
        alert( table.rows('.selected').data().length +' row(s) selected' );
        // You can use  table.rows('.selected').data()  to get all the selected Data
    } );
} );

---

实施初始方法没有问题：

• 使用一些将存储选定行id的全局集，如

  var rowsSelected=new set（）

• 单击“选择”复选框后，将选中行的id添加/删除到该全局变量：

• 重新呈现表时，将复选框附加到第一列，并设置那些选中的复选框（如果呈现的行id在所选的

  行中）：

render:函数（数据）{
返回``；
}

实现该概念的完整演示：

//表源
常数srcData=[
{id:1，项目：'苹果'，猫：'水果'}，
{id:2，项目：'梨'，猫：'水果'}，
{id:3，项目：'胡萝卜'，猫：'素食'}，
{id:4，项目：'番茄'，猫：'蔬菜'}，
{id:5，项目：'黄瓜'，猫：'蔬菜'}
];
//存储选定项目id的全局变量
const selectedRows=新集合（）；
//数据表初始化
const dataTable=$（“#mytable”）.dataTable({
dom：‘t’，
数据：srcData，
栏目：[
{data:null，render:function（data）{
返回``；
}},
{数据：'item'，标题：'item'}，
{数据：'cat'，标题：'cat'}
]
});
//选择复选框单击处理程序
$（'#mytable'）。单击（'.markSelected'，function（）{
const selectedRowId=dataTable.row（$（event.target）.closest（'tr'））.data（）.id；
$（event.target.prop（'checked'）？selectedRows.add（selectedRowId）：selectedRows.delete（selectedRowId）；
});
//使用选定的行id继续下一步
$（'#nextStep'）。在（'click'，function（）上{
log（[…selectedRows]）；
});

下一步
实施初始方法没有问题：


使用一些将存储选定行id的全局集，如
var rowsSelected=new set（）

单击“选择”复选框后，将选中行的id添加/删除到该全局变量：


重新呈现表时，将复选框附加到第一列，并设置那些选中的复选框（如果呈现的行id在所选的
行中）：


render:函数（数据）{
返回``；
}

实现该概念的完整演示：


//表源
常数srcData=[
{id:1，项目：'苹果'，猫：'水果'}，
{id:2，项目：'梨'，猫：'水果'}，
{id:3，项目：'胡萝卜'，猫：'素食'}，
{id:4，项目：'番茄'，猫：'蔬菜'}，
{id:5，项目：'黄瓜'，猫：'蔬菜'}
];
//存储选定项目id的全局变量
const selectedRows=新集合（）；
//数据表初始化
const dataTable=$（“#mytable”）.dataTable({
dom：‘t’，
数据：srcData，
栏目：[
{data:null，render:function（data）{
返回``；
}},
{数据：'item'，标题：'item'}，
{数据：'cat'，标题：'cat'}
]
});
//选择复选框单击处理程序
$（'#mytable'）。单击（'.markSelected'，function（）{
const selectedRowId=dataTable.row（$（event.target）.closest（'tr'））.data（）.id；
$（event.target.prop（'checked'）？selectedRows.add（selectedRowId）：selectedRows.delete（selectedRowId）；
});
//使用选定的行id继续下一步
$（'#nextStep'）。在（'click'，function（）上{
log（[…selectedRows]）；
});

下一步
复选框方法并不坏。生成行时，它们具有id，单击复选框时，将其添加到id的JavaScript数组中。采取行动接受列表ID，并在提交时获取您的ID…@st_stefanov这是我以前的目标，但我无法做到。经过几个小时的尝试，我的同事告诉我必须使用Datatable Edit，这不是免费的，所以我放弃了这个想法。然而，如果你有一个例子的话，我会很感激，我在前端脚本方面没有什么经验，我正在为你做一个例子。我还将展示一种MVC方法。给我一点时间。我想这张很接近你需要的东西：或者这张：@st_stefanov谢谢你的帮助。这些示例的问题是，我将失去jquery datatable的好处，因此我将不得不实现我的slef分页、过滤排序。。。等等，复选框方法并不是那么糟糕。生成行时，它们具有id，单击复选框时，将其添加到id的JavaScript数组中。采取行动接受列表ID，并在提交时获取您的ID…@st_stefanov这是我以前的目标，但我无法做到。经过几个小时的尝试，我的同事告诉我必须使用Datatable Edit，这不是免费的，所以我放弃了这个想法。然而，如果你有一个例子的话，我会很感激，我在前端脚本方面没有什么经验，我正在为你做一个例子。我还将展示一种MVC方法。给我一点时间。我想这张很接近你需要的东西：或者这张：@st_stefanov谢谢你的帮助。这些示例的问题是，我将失去jquery datatable的好处，因此我将不得不实现我的slef分页、过滤排序。。。etcI几天前也尝试过，但不知怎的，当我更改页面时，选择丢失了，尽管在线示例中没有
$(document).ready(function() {
    var table = $('#userTable').DataTable();

    $('#userTable tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );

    $('#submitButtonId').click( function () {
        alert( table.rows('.selected').data().length +' row(s) selected' );
        // You can use  table.rows('.selected').data()  to get all the selected Data
    } );
} );

$('.markSelected').on('click', function () {
    const selectedRowId = dataTable.row($(this).closest('tr')).data().id;
    $(this).prop('checked') ? rowsSelected.add(selectedRow) : rowsSelected.delete(selectedRow);
});

render: function (data) {
    return `<input type="checkbox" ${rowsSelected.has(data.id) ? 'checked' : ''}></input>`;
}