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