Disable clicking on header elements of django-table2

Question

I am getting some data from DB and displaying it to the users using django-table2. My application need user to select any row and based on that I am loading a different page with data relevant to the row selected in the last page. To get this working I am using two hidden fields who's value will be set when I click on some row and that will be passed at the server side for further processing..

The problem I am facing is when i click on the rows it sets the hidden field with correct value but if i click on the header of the table everything gets messed-up. To allow post back on click of the table I have used {{render_table table_name}} in a form tag..

My tables.py

class testTable(tables.Table):  // Have used orderable=False for all the rows
  release_date = tables.Column(verbose_name="Release date",orderable=False)  
  product_name = tables.Column(verbose_name="Product name",orderable=False)  
  ...  
  class Meta:
  orderable = False

Views.py

 table = productTable(dic)  
 table.paginate(page=request.GET.get('page', 1), per_page=5)  
 params['table'] =table  

product.html

 <div>  
    <form method="POST" name="form-product-list" action="{% url "product" %}" id="form-product-list" enctype="multipart/form-data">  
        <input type="hidden" name="prod_ver" value="0" id="prod_ver" />  
        <input type="hidden" name="release_date" value="0" id="release_date" />   
        {% render_table table %}  
    </form>  
</div>  

Javascript

 function addRowHandlers() {  
        var table = document.getElementById("prod_details");  
        var rows = table.rows;  
        for (var i = 0; i < rows.length; i++) {  
            rows[i].onclick = (function() {  
            return function() {  
                $("#prod_ver").val(this.cells[1].innerHTML);  
                $("#release_date").val(this.cells[0].innerHTML);  
            };  
            })(i);  
        }  
    }  

Currently when I click on any row I will get prod_ver = 1 and release_date = somedate but when I click on the header I am getting prod_ver = prod_ver and release_date =release_date..
Please look into this and ask if you need any clarification.

Answer 1

So it work, as it is supposed to. You should try to loop over table rows only inside "tbody". in jquery it should look like this:

$("body").on("click","tableSelector >tbody >tr", function(){ 
    $("#prod_ver").val($(this).children().eq(1));  
    $("#release_date").val($(this).children().eq(0));
});