How to select the multiple rows in jQuery datatable using the mouse drag option

Question

I am using the jQuery DataTables plug-in in my application. I need to select the multiple rows in a jQuery datatable using the mouse drag option. How is it possible?

Answer 1

Use jQuery-UI selectable and code similar to the following:

$( "#yourTable" ).selectable(
  {
     distance: 10,
     stop: function()
     {
       $( this ).find( "tr" ).each(
         function () {
           if ( $( this ).hasClass( 'ui-selected' ) )
             $( this ).addClass( 'row-selected' );
           else
             $( this ).removeClass( 'row-selected' );
         });
     }
  });

I use 'distance: 10' because I found that otherwise my mousedown handler for the table wouldn't get events - this may not be important for you.