CODEWITHSUNDEEP
javascriptjquerydatatables
spatialhast
spatialhast

Reputation: 271

Disable row selection in first column DataTables

I have a simple datable https://jsfiddle.net/ptwgxpzu/27/

JS:

    var dataSet = [
    ["data/rennes/", "Rennes", "rennes.map"],
    ["data/nantes/", "Nantes", "nantes.map"],
    ["data/tours/", "Tours", "tours.map"],
    ["data/bordeaux/", "Bordeaux", "bordeaux.map"],
    ["data/limoges/", "Limoges", "limoges.map"],
    ["data/troyes/", "Troyes", "troyes.map"]
];


var table = $('#maptable').DataTable({
    "data": dataSet,
    "paging": false,
    "columns": [{
        title: "Download"
    }, {
        title: "Name"
    }, {
        title: "File Name"
    }],

    "columnDefs": [{
            "targets": [0], // Download
            "visible": true,
            "searchable": false,
            "bSortable": false
        }, {
            "targets": [1], // Name
            "visible": true,
            "searchable": true
        }, {
            "targets": [2], // File name
            "visible": true,
            "searchable": true
        },


    ],
    "order": [
        [1, "asc"]
    ],
    "oLanguage": {
        "sSearch": ""
    },
    "aoColumns": [{
        "title": '&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-cloud-download white"></i>&nbsp;&nbsp;Download',
        "render": function(data, type, full, meta) {
            var url = 'http://localhost/';

            var mapurl = url + full[0] + full[2],
                trackurl = url + full[0] + full[2].replace('map', 'trx');

            return '<div class="btn-group">' +
                '<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                '<i class="fa fa-cloud-download white"></i>  <span class="caret"></span>' +
                '</button>' +
                '<ul class="dropdown-menu">' +
                '<li><a href=' + mapurl + '><i class="fa fa-download"></i>&nbsp;&nbsp;map file</a></li>' +
                '<li><a href=' + trackurl + '><i class="fa fa-download"></i>&nbsp;&nbsp;track file</a></li>' +
                '</ul>' +
                '</div>';
        }
    }, {
        "title": "Name"
    }, {
        "title": "File name"
    }]

});


$('#maptable tbody').delegate( 'tr', 'click', function () {
    $(this).toggleClass('selected');

    //...

});

HTML:

<body>
    <br />
    <div class="container">
        <table id="maptable" class="table table-bordered" width="100%"></table>
    </div>
</body>
  1. When rows in table not selected and I click on dropdown button in first column - row in table is becoming selectable.
  2. And when row in table selected and I click on dropdown button in first column - row in table is becoming deselected

How avoid action of 'deselected row' when I click on dropdown button when row in table selected and avoid action 'selected row' when I click on dropdown button when rows in in table not selected? Or disable row selection only in first column

Upvotes: 4

Views: 10001

Answers (2)

Charles Burns
Charles Burns

Reputation: 10602

Row selection in DataTables uses the select extension.

$('#yourTableId').DataTable({
    select: true
});

If you want full control over which columns allow selection, use select.selector. For this question, ignore selection events when the first column is chosen, use:

$('#yourTableId').DataTable({
    select: {
        selector:'td:not(:first-child)',
        style:    'os'
    }
});

Be sure to include an extra empty <th> element when defining your table, e.g.:

<table id="yourTableId" class="display">
    <thead>
    <tr>
        <th></th>
        @foreach(string column in Model.columns) {
            <th>@column</th>
        }
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th></th>
        @foreach(string column in Model.columns) {
            <th>@column</th>
        }
    </tr>
    </tfoot>
</table>

Here I use Microsoft Razor (the @foreach)for brevity, but regardless of your platform, notice the <th></th> just after the <tr>.

Upvotes: 2

Gyrocode.com
Gyrocode.com

Reputation: 58880

Use the following code:

$('#maptable tbody').on('click', 'td:not(:first-child)', function () {
    $(this).closest('tr').toggleClass('selected');

    //...

});

See updated jsFiddle for code and demonstration.

Alternatively, if you want allow selection in the first column (except when the button is clicked), then use the following code:

$('#maptable tbody').on('click', 'tr', function (e) {
    if(!$(e.target).is('button')){
       $(this).toggleClass('selected');
    }

    //...

});

See updated jsFiddle for code and demonstration.

Upvotes: 7

Related Questions