CODEWITHSUNDEEP
jquerydatatables
vkm
vkm

Reputation: 548

Multiple row selection

I am using jQuery DataTables and having issues selecting multiple rows.

I have followed the explanation on this link . A few of the rows are selectable, while other rows don't get selected. There is no error in the console.

Here is my code : 

$(document).ready(function () {

        var selected = [];

        $('#myTable').dataTable({


            "aaSorting": [ ], // Prevent initial sorting
            "sAjaxSource": "getList",
            "sAjaxDataProp": "",
            "sServerMethod" : "POST",
            "bProcessing": true,
            "fnServerParams": function ( aoData ) {
                    aoData.push( { "name": "param", "value": "paramValue"} );
             },
             "rowCallback": function( row, data ) {
                if ( $.inArray(data.packetId, selected) !== -1 ) {
                    $(row).addClass('selected');
                }
              },
             "aoColumns": [
                    { "mData": "packetId"},
                    { "mData": "packetName" }
             ]
        });

        $('#myTable tbody').on('click', 'tr', function () {
            var id = this.id;
            var index = $.inArray(id, selected);

            if ( index === -1 ) {
                selected.push( id );
            } 
            else {
                selected.splice( index, 1 );
            }

            $(this).toggleClass('selected');
        } );
    });

Upvotes: 1

Views: 587

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58880

CAUSE

Apparently you're not returning DT_RowId field. From the description.

Demo uses a unique ID assigned to the TR element (this is done automatically through the use of the DT_RowId special property returned as part of the object given by the server for each row) to track which rows are selected and reselect them is appropriate on a draw.

SOLUTION

Replace this line:

var id = this.id;

with the code below:

var data = $('#myTable').DataTable().row(this).data();
var id = data.packetId;

NOTES

Please note that there is Select extension that is much easier to use, see the code below:

$('#example').DataTable( {
    select: {
        style: 'multi'
    }
} );

However you would need to include additional JS file for the extension.

See this example for demonstration.

Upvotes: 2

Related Questions