New to DataTables, question about a partial clickable row

New to DataTables, question about a partial clickable row

tomjohnsontomjohnson Posts: 20Questions: 0Answers: 0
edited August 2013 in DataTables 1.9
What I have is a DataTable that will allow the user to click the row they want and then be forwarded to another screen. This works well, but now I need to add a little more functionality and am stuck. What I would like to do, is to add another column for a checkbox allowing the user to specify additional functionality.

Because I have the entire row clickable, I'd like to know if it would be possible to make a column in the table, or simply a td cell for each row that is NOT clickable while leaving the clickable functionality in all other cells? Essentially, if my rows are all clickable, the user wouldn't be able to check a box because the click function would push them to the next page.

Replies

  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    Sure its possible. How are you doing it at the moment, and how would you do what you want on a normal HTML table? That could just be then applied to the DataTable. Probably the way 'd do it myself is to use a few jQuery selectors for the event attachment.

    Allan
  • tomjohnsontomjohnson Posts: 20Questions: 0Answers: 0
    Hi Allen. Thanks for the response and for the wonderful library! You are very talented, indeed.

    I'm using the fnDrawCallback function, getting the DT_rowId then forwarding the user to the content they clicked on. Currently, the entire row is clickable which won't work if I add an input checkbox to the table because if the user attempts to click the checkbox, they will instead be forwarded on to the content.

    I'm really new to JQuery and JavaScript in general so I'm not following you when you say "event attachment". Would you be able to either show me what you mean or maybe point me to an example?

    To answer your question about how I would do what I want to do on a normal HTML table, the table itself would be set up like this:

    [code]



    item 1
    item 2
    item 3
    item 4
    item 5
    Add to list


    item 1
    item 2
    item 3
    item 4
    item 5



    [/code]

    So, just to clarify, in my example, items 1-5 should be clickable and respond to the user when they click on any of these TDs but the 6th column should not be affected by a click.
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    Event attachment - when you attach an event :-). i.e. `$('#table1 tbody').on( 'click', 'tr', function () {...} );` . You'd just use a refined selector to target specific columns or elements if that is what you want. The sClass option for DataTables might also be of some help to add classes to particular columns.

    See the jQuery documentation if you need more information about selectors: http://api.jquery.com/category/selectors/

    Allan
  • tomjohnsontomjohnson Posts: 20Questions: 0Answers: 0
    Allen, thank you so much for the help. I believe I've got it! :)
This discussion has been closed.