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

6

8

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.

Janey answered 15/9, 2016 at 14:33 Comment(0)
J
6

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

Janey answered 15/9, 2016 at 21:14 Comment(0)
G
2

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);
    });
Gillmore answered 27/3, 2017 at 8:22 Comment(0)
P
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

Poirer answered 15/9, 2016 at 14:46 Comment(8)
I can't make it work, have a look here jsFiddle.Janey
look here: jsfiddle.net/fjykowtL/21 --- i assumed columns were td elements but you have th instead. also, use this instead of rowPoirer
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.Janey
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?Poirer
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.Janey
here is the example of console.log jsfiddle 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 :)Janey
ahh ok! so you need to attach click event on cell, not the full row. see jsfiddle.net/fjykowtL/23Poirer
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.Janey
M
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;
  }
});
Murrain answered 15/7, 2022 at 6:36 Comment(0)
F
1

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>
Far answered 19/7, 2022 at 18:11 Comment(0)
T
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

Tang answered 15/9, 2016 at 14:49 Comment(2)
this will work only if you click these cells, not the entire row (like the OP)Poirer
this isn't what I'm looking for if check here jsfiddle you will see it only works for first row not in the column.Janey

© 2022 - 2024 — McMap. All rights reserved.