Skip to content Skip to sidebar Skip to footer
Home / Asp.net Mvc / C# / Datatables / Javascript / Jquery

Store Selected Rows Id

Post a Comment
I have a datatable loaded from a query from my database. (+/- 10000 records) The idea is that the user should be able to select multiple records to be later processed First i thoug

Solution 1:

There's no problem to implement your initial approach:

  • use some global set that will store selected row id's, like var rowsSelected = new Set();
  • add/delete id of the row being checked to that global variable upon clicking selection checkbox:
$('.markSelected').on('click', function () {
    const selectedRowId = dataTable.row($(this).closest('tr')).data().id;
    $(this).prop('checked') ? rowsSelected.add(selectedRow) : rowsSelected.delete(selectedRow);
});
  • upon table re-rendering append checkboxes to the first column and set those checked if rendered row id is present within rowsSelected:
render: function (data) {
    return `<input type="checkbox" ${rowsSelected.has(data.id) ? 'checked' : ''}></input>`;
}

The complete demo, implementing that concept:

//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>

Solution 2:

You can use datatable's Row selection feature to achieve what you are trying to do.

$(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


Post a Comment for "Store Selected Rows Id"