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

Question

我对jquery数据表有两个问题：

1. 初始化DataTable后，是否可以自动选择第一行？
2. 目前，用户有可能通过单击来取消选择项目。 我想要至少选择一行。 当用户单击到选定的行时，不应删除选择。

这是我对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);

提前谢谢你的帮助！

Answer 1

方式之一：

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

演示版

Answer 2

@ Harshul Pandav

谢谢你的文章。 您提出的解决方案对我来说不是100％有效，但是它为我的问题找到了解决方案，对我很有帮助。

选择第一行对我来说是可行的：

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

要选择至少一行，我使用用户选择事件，以记住我上次选择的列：

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

此后，单击事件将通过，如果不再选择任何行，则选择具有最后选择的行的索引的行：

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

为了找出最后选择的行，还可以使用deselect（dt.on（'deselect'，function（e，dt，type，index）））事件。

Answer 3

防止取消选择已选择的行：

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