jQuery数据表：选择扩展：如何在init上选择第一行以及如何至少选择一行

Question

I have two questions for jquery datatables :

1. Is it possible to select the first row automatically when the DataTable is initialized?
2. At the moment it is possible, that the user deselect an item by clicking on it. I want, that at least one row keeps selected. When the user clicks to the selected row, the selection should not be removed.

This is my initialization of my DataTable:

ar dataTableOption = {"pageLength": 5,
    "pagingType": "simple",
    "info": false,
    "searching": false,
    "select": {
        style: 'single'
    },
    "lengthChange": false,
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ]
};

dataTable = $('#dataTable').DataTable(dataTableOption);

Thank you for your help in advance!

Answer 1

One of the ways:

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

    $('#example tbody').on( 'click', 'tr', function () {

        if($(this).hasClass( "selected" )){
          //make sure it can't be unselected if there is just one selected row
          if(table.rows('.selected').data().length > 1){
            $(this).removeClass( "selected" );}
        }
        else{
         $(this).addClass( "selected" );
        }
    } );

    //To pre-select the first row
    $('#example tbody tr:eq(0)').click();
} );

Demo

Answer 2

@ Harshul Pandav

Thank you for your post. Your proposed solution worked not 100% for me but it helped me a lot for finding a solution for my problems.

To select the first line worked this for me:

dataTable.row(':eq(0)', { page: 'current' }).select();

To get at least one line selected I use the user-select event, to remember my last selected column:

dataTable.on( 'user-select', function ( e, dt, type, indexes ) {
      lastSelectedRow = dt.rows( '.selected' )[0][0];
    });

After this, the click event passed through, if no row is selected anymore, the row with index of last selected row is selected:

 dataTable.on( 'click', 'tr', function (evt) { 
if (dataTable.rows( {selected:true} ).any() == false) {
     dataTable.row(lastSelectedRow).select();
  }
)};

For finding out the last selected row the deselect (dt.on( 'deselect', function ( e, dt, type, indexes ) ) event can also be used.

Answer 3

Prevent deselect of already-selected row:

    myTable.on('user-select', function (e, dt, type, cell, originalEvent) {
        if ($(cell.node()).parent().hasClass('selected')) {
            e.preventDefault();
        }
    });