Сохранить выбранный идентификатор строки

Question

У меня есть данные, загруженные из запроса из моей базы данных.(+/- 10000 записей) Идея состоит в том, что пользователь должен иметь возможность выбрать несколько записей для последующей обработки.

Сначала я подумал добавить столбец с флажком для выбора, а затем, когда пользователь завершил все свои действия.выбрав приложение, отследите все выбранные строки, затем перейдите к следующему шагу с помощью кнопки «Далее», где-то на странице, но после 12 часов попыток я не смог этого сделать.

Затем я подумал сделатьэто проще, добавив кнопку в каждую строку, чтобы каждый раз, когда пользователь нажимал на эту кнопку, приложение сохраняло выбранный идентификатор в переменной сеанса.

<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

Нет проблем для реализации вашего первоначального подхода:

• использовать некоторый глобальный набор, который будет хранить идентификаторы выбранной строки, например var rowsSelected = new Set();
• добавить / удалить идентификатор строкипроверяется на эту глобальную переменную при нажатии флажка выбора:

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

• при повторном рендеринге таблицы добавляет флажки к первому столбцу и устанавливает их, если идентификатор отображаемой строки присутствует в rowsSelected:

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

Вы можете использовать функцию выбора строки в 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
    } );
} );

Ссылка