jquery datatable 多行(單行)選擇(select)，行獲取/行刪除

jquery datatable 多行(單行)選擇(select)，行獲取/行刪除

代碼展示

// 示例數據源
var dataSet = [
    ['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
    ['Misc','NetFront 3.1','Embedded devices','-','C'],
    ['Misc','NetFront 3.4','Embedded devices','-','A'],
    ['Misc','Dillo 0.8','Embedded devices','-','X'],
    ['Misc','Links','Text only','-','X'],
    ['Misc','Lynx','Text only','-','X'],
    ['Misc','IE Mobile','Windows Mobile 6','-','C'],
    ['Misc','PSP browser','PSP','-','C'],
    ['Other browsers','All others','-','-','U'],
    //...
];

$(document).ready(function() {
    $('#example').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );

    //這裏插入數據使用的是`dataTable`(注意`dataTable`大小寫)
    $('#demo').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    } );
} );

正常效果展示：

單選代碼：

//1.首先獲取datatable對象(注意大小寫`DataTable()`)：
var Dtable = $('#demo').DataTable();
$('#demo tbody').on('click', 'tr', function () {
    if ($(this).hasClass('selected') ) {
       $(this).removeClass('selected');
    } else {
       table.$('tr.selected').removeClass('selected');
       $(this).addClass('selected');
    }
}

單選後效果展示：

多選代碼：

var Dtable = $('#demo').DataTable();
$('#demo tbody').on('click', 'tr', function () {
    $(this).toggleClass('selected');
}

多選後效果展示：

獲取選中行 ：

var Dtable = $('#demo').DataTable();
$('button').click(function () {
    alert( Dtable.rows('.selected').data().length +' row(s) selected' );
});

刪除選中行 ：

var Dtable = $('#demo').DataTable();
$('button').click(function () {
    //單行刪除
    //Dtable.row('.selected').remove().draw(false);
    //多行刪除
    Dtable.rows('.selected').remove().draw(false);
});

注意事項：

在獲取datatable的對象時，datatable的大小寫字母要區分開，不然會報錯：

Uncaught TypeError: Dtable.row is not a function