3
votes

I need to select multiple rows in a jQuery data table using the shift-key, the same as the shift-key select function, and store the selected row items in a variable. Also I need to select multiple rows using a click event.

Using a single variable, I need to pass the live click rows and shift selection rows. How I do that?

This is not working properly and does not store a single variable for the selected rows. Where am I wrong?

My Code:

var aSelected = [];
var lastSelected;

$('#table tr').live('click', function (event) {
    var tableRow = $(this).closest("tr").prevAll("tr").length + 1;

    var id = this.cells[0].innerHTML;
    var index = jQuery.inArray(id, aSelected);
    if (index === -1) {
        aSelected.push(id);
    } else {
        aSelected.splice(index, 1);
    }

    $(this).toggleClass('row_selected');

    if (event.shiftKey) {
        var table = $('#table ');
        var start = Math.min(tableRow, lastSelected);
        var end = Math.max(tableRow, lastSelected);

        for (var i = start; i < end; i++) {
            $('#table').each(function () {
                table.find('tr:gt(' + (start - 1) + '):lt(' + (end) + ')').addClass('row_selected');
            });
        }

    } else {

        lastSelected = $(this).closest("tr").prevAll("tr").length + 1;
    }
});

For example I have 20 rows. There are 3 cause I select the rows and passing the selected row id 1. using Ctrl key select the multiple rows and passing 2. using shift key select the next by next 10 rows and passing 3. using shift key select the next by next 10 rows and extra 2 rows using Ctrl key other 10 rows and passing the 12 rows

2
aSelected.splice(index, 1); you use this line of code, but yo didn't add any content into the aSelected, what you purpose of this line of code? - OQJF
just remove the already selected row . Thats y use this line - User279_1

2 Answers

1
votes

use the following code

     $('#tableId').dataTable( {

    "sDom": 'T<"clear">lfrtip',
    "oTableTools": {
        "sRowSelect": "multi",
        "aButtons": [ "select_all", "select_none" ]
    }
} );

by using this code you select multiple rows with out using shift key

0
votes

window.onmousemove = function (e) {
    shiftKey=false;
    if (e.shiftKey) shiftKey=true;
} 
dataTableID='yourDataTable';
$('#'+dataTableID).DataTable().on( 'select', function ( e, dt, type, indexes ) {                        
    thisID=e.currentTarget.id;
    selecting=$('#'+thisID).attr('selecting');
    if (typeof(selecting)=="undefined" || selecting=="false"){
        idx=indexes[0];
        lastSelected=$('#'+thisID).attr('lastSelected');
               
        if (shiftKey==true) {
            $('#'+thisID).attr('lastSelected',idx);
            if (typeof(lastSelected)!="undefined" && lastSelected !='') {   
                min=idx+1;
                max=lastSelected;
                if (max<min) {
                    tmp=min;
                    min=max;
                    max=tmp;                
                }
                if (min<max) {
                    $('#'+thisID).attr('selecting',"true");
                    for (x=min;x<max;x++) $('#'+thisID).DataTable().row( x ).select();
                    $('#'+thisID).attr('selecting',"false");                                    
                }
            }
        } else {
            $('#'+thisID).attr('lastSelected','');
        }
    }                    
});
$('#'+settings.sTableId).DataTable().on( 'deselect', function ( e, dt, type, indexes ) {                        
    thisID=e.currentTarget.id;
    $('#'+thisID).attr('lastSelected','');                 
});