click event highlighting not working [solved]

click event highlighting not working [solved]

H2wkH2wk Posts: 14Questions: 0Answers: 0
edited October 2011 in DataTables 1.8
Hey guys...

I'm struggling to get the highlighting of a clicked row to work. I am using the demo_table_jui.css file. I've added the single click event to the below function an no highlighting is happening. I've tried most things and I've run outta ideas.

[code]
$('#table_id tbody tr').click(function () {
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition(this);
/* Get the data array for this row */
var aData = oTable.fnGetData(aPos)[0];
});
[/code]
I have been using this click event:
[code]
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
[/code]

I have been using both the above with the: $(document).ready(function onpagefirstrun() jquery function.

Any help would be greatly appreciated.

Replies

  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    [code]
    $('#table_id tbody tr').live('click', function () {
    $(this).toggleClass( 'row_selected' );
    } );
    [/code]

    to add / remove the class.

    Allan
  • H2wkH2wk Posts: 14Questions: 0Answers: 0
    Im a bit confused about your post allan. What are you suggesting?

    I have tried just the live event in the onbodyload event but no luck yet.

    I am using the right CSS Class?

    This is my table initialization and click event.

    [code]
    oTable = $("#table_id").dataTable({
    "bJQueryUI": true,
    "bAutoWidth": true,
    "aaData": rowsfinal,
    "aoColumns": colsfinal,
    "sScrollY": "200px",
    "bPaginate": false
    // "sPaginationType": "full_numbers"
    });

    $('#table_id tbody tr').click(function () {
    /* Get the position of the current data from the node */
    var aPos = oTable.fnGetPosition(this);
    /* Get the data array for this row */
    var aData = oTable.fnGetData(aPos)[0];
    sendDataToServer('PERSONCLICK_' + aData);
    $("#tabsdetails").tabs('option', 'selected', 0);

    });
    [/code]
  • H2wkH2wk Posts: 14Questions: 0Answers: 0
    Any more suggestions?
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    I was suggesting if you want to highlight a row on click, just use my click function above and have a class called "row_selected" defined in your CSS to highlight the row. If you look at the TR elements in Firebug you'll be able to see the rows have that class added and removed when you click on them - which, if I understand correctly, is what you were looking for in your original post :-)

    Allan
  • H2wkH2wk Posts: 14Questions: 0Answers: 0
    Hi allan. Thanks for the feedback...

    So i did as you suggested and the code looks as follows.
    [code]

    Woody
    Albertyn

    [/code]

    So it is applying the class. Currently i'm using the default row_selected css but this is not displaying in IE or chrome when the row is selected.
    [code]
    table.display tr.even.row_selected td {
    background-color:#00FF99;
    }
    table.display tr.odd.row_selected td {
    background-color:#66FF99;
    }
    [/code]

    I am applying the odd/even row coloring as below
    [code]
    tr.odd {
    background-color:#E2E4FF;
    }
    tr.even {
    background-color:white;
    }
    [/code]

    And if disable odd even rows this it doesn't seem to make a difference to the selected row.

    I have checked my other css files in my project and none of them override these files.

    Weird. Any suggestions?
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    Have you got a class of "display" on the table tag?

    Also if you have, then try using "background-color:#00FF99 !important;" to make sure these styles get priority.

    Allan
  • H2wkH2wk Posts: 14Questions: 0Answers: 0
    No tag on the table tag

    [code]

    [/code]

    I've added the !important tag to the background colour no change. Ummmm... I am using auto themeing with jquery api....

    [code]
    oTable = $("#table_id").dataTable({
    "bJQueryUI": true,
    "bAutoWidth": true,
    "aaData": rowsfinal,
    "aoColumns": colsfinal,
    "sScrollY": "200px",
    "bPaginate": false
    // "sPaginationType": "full_numbers"
    });
    [/code]
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    Well given that the CSs selector you are using for the row highlighting is looking for table elements with a class of "display":

    [code]
    table.display tr.even.row_selected td {
    [/code]

    its not too surprising it doesn't work :-). You need to update either the selector or the table.

    Allan
  • H2wkH2wk Posts: 14Questions: 0Answers: 0
    bingo was his name oh.... Thank you allen... Not that good with css.

    How do you suggest i modify the live click event so it deselects the previously selected row?
  • H2wkH2wk Posts: 14Questions: 0Answers: 0
    Just tried using these funtions in the .live event. I've lost the highlighting. Any suggestions?

    [code]
    $(oTable.fnSettings().aoData).each(function () {
    $(this.nTr).find("td").removeClass('row_selected');
    });
    $(event.target).parent().find("td").addClass('row_selected');
    [/code]
  • H2wkH2wk Posts: 14Questions: 0Answers: 0
    Altered my click event to use the click code for the example Allan created. All working 100%.

    Keep up the awesome work Allan.

    Thanks again.
This discussion has been closed.