How do I Ignore Select for specified column?

How do I Ignore Select for specified column?

n403729w735708n403729w735708 Posts: 26Questions: 6Answers: 4
edited December 2015 in Free community support

I'm using the select features so that when i click on a row, it links to another page within my web app. This works and now I need to somehow ignore / disable this feature for a specified column. How do I do this? Below is the code I use to enable single row selection

var table = $('#locationTable').DataTable({
        dom: 'Brtip',
        buttons: [
          'excel'
        ],
        select: {
          style: 'single'
        },
        processing: true,
        serverSide: true,
        ajax: "/locationData",
        length: 10,
        ordering: false,
        "lengthChange": false,
        columns: [
          {
            "render": function (data, type, row) {
                return "<button type='button' id='updateButton' data-toggle='modal' data-target='#editLocationModal' data-encounterid='"+row.encounterid+"'"+
                          //Encounter Details
                        " data-locationname='" + row.locationname + "'"
                        "class='btn btn-default'>edit</button>";
          }
              },
          {data: 'locationname'},
          {data: 'address1'}
        ]
      });
      $('#column1').on( 'keyup', function () {
        //location name
        table
                .columns( 1 )
                .search( this.value )
                .draw();
      });
      table
              .on( 'select', function ( e, dt, type, indexes ) {
                var rowData = table.rows( indexes ).data().toArray();
                 window.location.href = "/locationView/" + rowData[0].id;
              } );

This question has an accepted answers - jump to answer

Answers

  • n403729w735708n403729w735708 Posts: 26Questions: 6Answers: 4
    edited December 2015 Answer ✓

    I figured it out. Just update the select options. Below will disable the select feature in the first column of each row:

    select: {
              style:    'single',
              selector: ':not(:first-child)'
            }
    
  • n403729w735708n403729w735708 Posts: 26Questions: 6Answers: 4
    edited December 2015

    Update: This only works for the first column of the first row so If anyone knows of a way to get this working with datatables then that would be helpful. The typical syntax I found online either doesn't work, or doesn't work as expected (2nd column of each row only , or 2nd to last column allows select).

  • n403729w735708n403729w735708 Posts: 26Questions: 6Answers: 4
    edited December 2015

    If anyone has an idea here please let me know.

    http://live.datatables.net/webanera/1/edit

  • n403729w735708n403729w735708 Posts: 26Questions: 6Answers: 4

    .

  • n403729w735708n403729w735708 Posts: 26Questions: 6Answers: 4

    Solution: Add a CSS rule for each column you wish to enable select capability. In the example below, I wish to have select capability on all columns except the first.

    select: {
              style:    'single',
              selector: 'tr>td:nth-child(2), tr>td:nth-child(3), tr>td:nth-child(4), tr>td:nth-child(5), tr>td:nth-child(6), tr>td:nth-child(7), tr>td:nth-child(8), tr>td:nth-child(9)'
            }
    
  • allanallan Posts: 63,471Questions: 1Answers: 10,467 Site admin

    This is correct - you need to modify the selector to match what you need. Sometimes I find it easier to simply add a "not-selectable" class to the column you don't want to be selectable (use columns.className to do so) which makes the selector much easier.

    Allan

This discussion has been closed.