存储选定的行 ID

Question

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

首先我想为选择添加一个带有复选框的列，然后当用户完成所有选择后，应用程序会跟踪所有选定的行，然后在页面上的某个位置使用“下一步按钮”进入下一步，但是经过 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>

@section Scripts {
@Scripts.Render("~/bundles/datatable")
<script type="text/javascript">


    $(document).ready(function () {

        var ids;
        var mytable = $('#userTable').DataTable({


            "sDom": 'ltipr',
            "bServerSide": true,
            "ajax": {
                "beforeSend": AjaxBegin,
                "type": "POST",
                "url": '/LocationModifier/UserHistory',
                "contentType": 'application/json; charset=utf-8',
                'data': function (data) { return data = JSON.stringify(data); },
                'complete': AjaxComplete
            },


            "bProcessing": false,
            "orderMulti": false,
            "scrollX": true,
            "deferRender": true,
            "searchDelay": 7000,
            "fixedHeader": {
                "header": true,
                "footer": true
            },

            "columnDefs": [
                { "defaultContent": "-", "targets": "_all" },
                { "className": "text-center custom-middle-align", "targets": [0, 1, 2, 3, 4, ] },
            ],

            "colReorder": true,

            "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],



            "columns": [
                 {
                     "title": "Select",
                     "data": "ID",
                     "searchable": false,
                     "sortable": false,
                    "render": function (data, type, full, meta) {

                         return '<a href="@Url.Action("AddToCache", "LocationModifier")?id=' + data + '&source=0" class="editUser"><span class="glyphicon glyphicon-pencil btn-sm btn-info"></span></a>';
                     }
                 },

                { "data": "Name", "orderable": false },
                { "data": "City", "orderable": true },
                { "data": "Phone", "orderable": true },
                { "data": "Zipcode", "orderable": false },

            ],
            "order": []

        });

    });


</script>

}

public ActionResult AddToCache(int id)
    {
        GetRecordAndAddeToCache(id);
        // what should i return here, the page should not be refreshed????
    }

Answer 1

实施您的初始方法没有问题：

• 使用一些将存储选定行 ID 的全局集，例如 var rowsSelected = new Set()；
• 在单击选择复选框时将要检查的行的 ID 添加/删除到该全局变量：

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

• 在重新渲染表格时，将复选框附加到第一列，并设置检查是否在 rowsSelected 中存在渲染的行 ID：

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

完整的演示，实现了这个概念：

//table source
const srcData = [
  {id: 1, item: 'apple', cat: 'fruit'},
  {id: 2, item: 'pear', cat: 'fruit'},
  {id: 3, item: 'carrot', cat: 'vegie'},
  {id: 4, item: 'tomato', cat: 'vegie'},
  {id: 5, item: 'cucumber', cat: 'vegie'}
];

//global variable that stores selected item id's
const selectedRows = new Set();

//datatables initialization
const dataTable = $('#mytable').DataTable({
  dom: 't',
  data: srcData,
  columns: [
    {data: null, render: function(data){
      return `<input class="markSelected" type="checkbox" ${selectedRows.has(data.id) ? 'checked' : ''}></input>`;
    }},
    {data: 'item', title: 'item'},
    {data: 'cat', title: 'cat'}
  ]
});

//selection checkboxes click handler
$('#mytable').click('.markSelected', function(){
  const selectedRowId = dataTable.row($(event.target).closest('tr')).data().id;
  $(event.target).prop('checked') ? selectedRows.add(selectedRowId) : selectedRows.delete(selectedRowId);
});

//proceed to the next step with selected row id's
$('#nextStep').on('click', function(){
  console.log([...selectedRows]);
});

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="mytable"></table>
  <button id="nextStep">Next Step</button>
</body>
</html>

Answer 2

您可以使用数据表的行选择功能来实现您想要做的事情。

$(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
    } );
} );

Reference