bootstrap table with clickable row event and how to exclude a column or cell

Question

I have this function for row click:

$("#table").on("click-row.bs.table", function (row, $el, field) {
  if (column != 4) {

  }
});

and what condition I could add which would exclude a specific column or cells in the column? I can't find under row, $el or field things which would identify for ex. a cell index.

score 5 · Answer 1 · answered Sep 15 '16 at 21:14

I've finally found the answer for my question (if somebody would need it, it's more simple then I thought):

 $("#table").on("click-cell.bs.table", function (field, value, row, $el) {
    if (value !="column_name"){
      //the code
    }
 });

here is an example (with the access to all the values of the clicked row): jsfiddle

score 2 · Answer 2 · answered Mar 27 '17 at 08:22

I believe it's best to listen for the entire row-clicks with click-row.bs.table. Then columns is a simple JSON with the keys you've provided from the t variable.

 $("#summaryTable").on("click-row.bs.table", function (editable, columns, row) {
   console.log("columns:", columns);

   // You can either collect the data one by one
   var params = {
         id: columns.id,
         type: columns.type,
       };
   console.log("Params:", params);

   // OR, you can remove the one that you don't want
   delete columns.name;
   console.log("columns:", columns);
    });

pumpkinzzz · Answer 3 · 2016-09-15T16:39:52.590

1

you can do something like this:

$("table").on("click", "tr td", function () {
   var col = $(this).index();
   if(col != 2){
     console.log("OK");
   }        
});

note that $.index() value is 0 based (so for column 4 you should use index 3)

JSFIDDLE

edited Sep 15 '16 at 16:39

answered Sep 15 '16 at 14:46

pumpkinzzz

2,907
2
18
32

I can't make it work, have a look here [jsFiddle](https://jsfiddle.net/fjykowtL/18/). – soonic Sep 15 '16 at 15:29
look here: https://jsfiddle.net/fjykowtL/21/ --- i assumed columns were `td` elements but you have `th` instead. also, use `this` instead of `row` – pumpkinzzz Sep 15 '16 at 15:42
well, its still not what I need because if you add this if condition let say: `index !=2` it shouldn't fire console.log at all, but it still fires for other indexes with the click. – soonic Sep 15 '16 at 16:04
`if(index != 2){ console.log(index); }` means that will print out index 0 and 1 (not 2). that's the meaning of that condition. What are you trying to do? – pumpkinzzz Sep 15 '16 at 16:12
what I need is: if I click any cell in a row I want to execute a code (like console.log) but except one cell in a column let say the last one (index=2) then I don't want to execute any code at all, just pass with no action. – soonic Sep 15 '16 at 16:17
here is the example of console.log [jsfiddle](https://jsfiddle.net/fjykowtL/22/) I don't want to fire this code when clicking the last column. How to do this? :) I hope you know what I mean now :) – soonic Sep 15 '16 at 16:27
ahh ok! so you need to attach click event on cell, not the full row. see https://jsfiddle.net/fjykowtL/23/ – pumpkinzzz Sep 15 '16 at 16:34
thank you for your answer, it's almost there, but I lost the access to the `$el` and I can't get all the values of the clicked row `console.log($el.id+"-"+$el.name+"-"+$el.type);` that's why I used the click-row event. – soonic Sep 15 '16 at 18:23

score 1 · Answer 4 · edited Jul 16 '22 at 11:21

1

If found a 5 liner solution for a clickable bootstrap row with field exceptions. In the tr tag may define your link:

<tr data-href="somelink.html">

columnname is the column you want to exclude from being clickable.

$('#table').on('click-cell.bs.table', function (field, value, row, $element) {
  if (value != 'columnname') {
    window.location = $element._data.href;
  }
});

edited Jul 16 '22 at 11:21

Tyler2P

2,324
26
22
31

answered Jul 15 '22 at 06:36

HOST-X

185
10

score 1 · Answer 5 · answered Jul 19 '22 at 18:11

You can get the index via [...this.parentNode.children].indexOf(this)

 $("#table").on("click", ".click-cell.bs.table", function (field, value, row, $el) {
     console.log([...this.parentNode.children].indexOf(this));
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
    <tbody>
        <tr>
            <td class="click-cell bs table">1</td>
            <td class="click-cell bs table">22</td>
            <td class="click-cell bs table">3</td>
            <td class="click-cell bs table">4</td>
            <td class="click-cell bs table">5</td>
        </tr>
        <tr>
            <td class="click-cell bs table">1</td>
            <td class="click-cell bs table">22</td>
            <td class="click-cell bs table">3</td>
            <td class="click-cell bs table">4</td>
            <td class="click-cell bs table">5</td>
        </tr>
    </tbody>
</table>

James · Answer 6 · 2016-09-16T08:59:44.930

0

  $("#summaryTable tbody tr td").click(function(){
    var col = ($(this).index());

    if(col == 2 || col == 1)
    {
        alert("do nothing");
    }
        alert("do something");
    }
  });

This will happen when the first column is clicked but not the second or third.

Tables are much like arrays, 0 is the first so if we had 3 columns in a table you would have column 0,1,2.

You can add more values into if statement

Hope this helps

edited Sep 16 '16 at 08:59

answered Sep 15 '16 at 14:49

James

406
1
3
12

this will work only if you click these cells, not the entire row (like the OP) – pumpkinzzz Sep 15 '16 at 14:54
this isn't what I'm looking for if check here [jsfiddle](https://jsfiddle.net/fjykowtL/19/) you will see it only works for first row not in the column. – soonic Sep 15 '16 at 15:38

bootstrap table with clickable row event and how to exclude a column or cell

6 Answers6