Click action for each row (including hidden pages/rows)

Click action for each row (including hidden pages/rows)

juxta52juxta52 Posts: 14Questions: 0Answers: 0
edited March 2010 in General
I am rather new to jQuery and Datatables, so please bare with me. I have a datatable which have multiple pages. I have a 'Check all' button that has an on click method triggering:

[code]
$("INPUT[class='mod_chkbox']", oTable.fnGetNodes()).each( function() {
if ($(this).is(':checked') == false) {
$(this).click();
}
} );
[/code]

The code as is, is not 'clicking' the hidden rows in the datatable (the ones on the other pages). How can I modify this block of code to be able to run the 'click' action on each of the rows of the table with the class name of 'mod_chkbox'?


Thanks in advance,
Alan

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Funny that - I would have thought that code would do the trick to be honest... If you do alert( $("input.mod_chkbox", oTable.fnGetNodes()).length ); what number do you get? Note also I've simplified your selector - which might have an impact I suppose...

    Allan
  • juxta52juxta52 Posts: 14Questions: 0Answers: 0
    Allan,

    Thanks for your quick response. The alert gives me the actual number of rows in the DataTable (including the ones on the other pages).

    I have been very confused on why this code does not work either.

    I was hoping it was a small/quick fix that I just couldn't see.
    -Alan
  • juxta52juxta52 Posts: 14Questions: 0Answers: 0
    edited March 2010
    I am using the 'select' all methods in other tables and it works fine, for example:

    [code]
    function oTablefnGetNodes(id) {
    //oTablefnGetNodes(this.id);
    var test = $('input', gameTable.fnGetNodes()).attr('checked', $('#' + id).is(':checked'));
    }
    [/code]

    That code works as it should, selecting all of the check boxes in each of the pages (was for a different datatable). So I do not believe it's an initialization failure.

    Here's the initialization of the table:
    [code]
    oTable = $('#relTable').dataTable( {
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "aaSorting": [[2,'asc'], [3,'asc'], [4,'asc'], [5,'asc'], [6,'asc'], [10,'asc']],
    "aoColumns": [
    /* relAction */ { "bSearchable": false, "bVisible": false },
    /* partType */ { "bSearchable": false, "bVisible": false },
    /* partNumber */ null,
    /* partRev */ null,
    /* docType */ null,
    /* docName */ null,
    /* docRev */ null,
    /* Modify */ { "bSearchable": false, "bSortable": false },
    /* partRevVer */ null,
    /* partRevSrc */ null,
    /* partRevision */ null,
    /* Delete */ { "bSearchable": false, "bSortable": false }
    ]
    } );
    [/code]

    Everything looks to be normal/functioning except for that .click action.
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Perhaps jQuery has an optimisation which means that .click doesn't work on a hidden element... (after all you can't click on a hidden element!) Do any of them have an ID that you could try accessing and just hitting that one specifically to see if it works? Or a small test page? $('#test').click() for example?

    Allan
  • juxta52juxta52 Posts: 14Questions: 0Answers: 0
    So this is very odd.

    Here's the code:
    [code]
    //alert($('#Manage|Part|1437081-2|A|Customer Drawing|22410|A|true|User|AKrelkey').value);
    //this gives me just 'object'
    //$('#Manage|Part|1437081-2|A|Customer Drawing|22410|A|true|User|AKrelkey').attr('checked', true);
    //this does NOT check that particular checkbox, even if it is paged to be the visible page.... Weird?
    //alert( $("input.mod_chkbox", oTable.fnGetNodes()).length );
    //this still gives me 25, the number of rows (10 visible and 15 hidden).

    $("input.mod_chkbox", oTable.fnGetNodes()).each( function() {
    if ($(this).is(':checked') == false) {
    $(this).click();
    alert($(this).length);
    //this brings up an alert box with 1, 25 times for me to click ok, showing me that there were 25 rows it TRIED to do something with, but only 10 (in random order) were 'clicked' and it just happened to be the 10 that were visible.
    }
    } );
    [/code]


    Why can this (.click) just work the way its suppose to!!!
    -Alan
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Interesting! I've just scanned through the jQuery code and don't see anything which would cause this - but then it is very complex and I'm no expert! I've also just tried a trivial code test:

    [code]

    $('#me').toggle();
    $('#me').click( function() { alert('sup'); } );
    $('#me').click();
    [/code]
    And that click fires no problem. So perhaps the next test would be to use a global counter in your click function and see if it goes to 25. If so then there is something in your click function which is dependent on the visibility...

    Allan
  • juxta52juxta52 Posts: 14Questions: 0Answers: 0
    As mentioned above in my comment, i think that there are 25 items firing because that one alert inside the .each alerts 25 times.

    Could it have something to do with binding the .live() [in jQuery] function with the click handler?
  • juxta52juxta52 Posts: 14Questions: 0Answers: 0
    I'm getting desperate... haha. I'm not GREAT with coding, so i've tried SO many different solutions via jQuery and couldn't find one that works. I think if I could get a little help with this idea from the DataTables side, I could just have a quick solution while ironing out the actual code that will go in place for the future. I was thinking I could FORCE the table to paginate to the FIRST page, and do the 'click' action on ALL of the check-boxes there [code currently does that] and then {oTable.fnPageChange('next');} until the 'last' page is the 'current' page. How would I write that for loop into this?

    [code]
    oTable.fnPageChange('first');
    $("input.mod_chkbox").each( function() {
    if ($(this).is(':checked') == false) {
    $(this).click();
    }
    } );

    oTable.fnPageChange('next'); -> until 'last'.

    [/code]
  • juxta52juxta52 Posts: 14Questions: 0Answers: 0
    OR if i can turn off paginate right before the click action, and turn it back on right after the click action, that should work too? Is there a way for me to 'display ALL of the rows' then turn on pagination?
  • juxta52juxta52 Posts: 14Questions: 0Answers: 0
    edited March 2010
    Temp Fix Found.... It's ugly and kinda redundant, but here's what I have....

    [code]

    oTable.fnSettings().oFeatures.bPaginate = false;
    oTable.fnDraw();

    $("input.mod_chkbox").each( function() {
    if ($(this).is(':checked') == false) {
    $(this).click();
    }
    } );

    oTable.fnSettings().oFeatures.bPaginate = true;
    oTable.fnDraw();

    [/code]
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Yup - can see how that would work - but as you say - it's a bit nasty!

    If you do:

    [code]
    $("input.mod_chkbox:not(:checked)", oTable.fnGetNodes()).click()
    [/code]

    That should select all input.mod_chkbox elements which are not checked inside the TR elements of DataTables and click them. How does that go for you?

    Allan
This discussion has been closed.