How to add class to all selected rows 'td'?

How to add class to all selected rows 'td'?

MoizMoiz Posts: 32Questions: 5Answers: 1

Hi,
Recently, I have added the "select all rows" feature in my project which is working fine. I want to add class to all selected rows 'td' on click but I have no idea how to add. This is the code I'm working on:

$('#tableId').on('click','th.checkbox-control', function () {

$(this).parent().toggleClass('checked');

if ($(this).parent().is( ".checked" )) {
    table.rows( {page: 'current'} ).select(); 
} else {
    table.rows( {page: 'current'} ).deselect();        
} 

});

Your help would be highly appreciated. :)

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @Moiz ,

    Are you using Select extension? If so, you could select and deselect to trigger the class addition/removal.

    The best way to move this forward would be create a simple test case showing what you're doing currently, how the select works, then we can take it from there. Information on how to create a test case is available here.

    Cheers,

    Colin

  • MoizMoiz Posts: 32Questions: 5Answers: 1
    edited October 2019

    Yes, Brother @colin!
    I'm using select Extention which is working fine. I hope, this is the test case you're talking about http://live.datatables.net/hegufawa/1/edit .
    As you can see select all rows feature is working fine. Here, all I want is to apply the class to all the selected rows 'td' so that after clicking on the select all checkbox it'll change all the uncheck boxes to the checked one.

  • MoizMoiz Posts: 32Questions: 5Answers: 1

    I have tried .addClass() and .removeClass() but it keeps giving me Uncaught Type Error.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @Moiz ,

    You can add this to your callback:

       table.rows({selected:true}).every(function() {
          $(this.node()).toggleClass('checked');
        })
    

    See here.

    Cheers,

    Colin

  • MoizMoiz Posts: 32Questions: 5Answers: 1

    Thanks for the response, Brother @colin. It is working fine but after the selection when I uncheck select all checkbox Its keeps all of the selected rows checked. Plus if I uncheck one of the selected rows and then click on the select all checkbox so it will make all of the rows unchecked and the row which I have selected becomes checked :) I think you have missed a little bit of code. For instance:

    $('#tableId').on('click','th.checkbox-control', function () {

    $(this).parent().toggleClass('checked');
    
    if ($(this).parent().is( ".checked" )) {
        table.rows( {page: 'current'} ).select(); 
    } else {
        table.rows( {page: 'current'} ).deselect();        
    }
    
    table.rows({selected:true}).every(function() {
      $(this.node()).addClass('checked');
    });
    

    table.rows({selected:false}).every(function() {
    $(this.node()).removeClass('checked');
    });

    });

    Feel free to check this out
    http://live.datatables.net/hegufawa/11/edit

    Thanks for guiding me on the right path. You guys are AWESOME.

  • MoizMoiz Posts: 32Questions: 5Answers: 1

    Here I have restricted the selection to the first column only. And It works like a charm. :)
    http://live.datatables.net/hegufawa/12/edit

  • MoizMoiz Posts: 32Questions: 5Answers: 1

    One more thing, Brother @colin! As you can see in this test case http://live.datatables.net/hegufawa/12/edit when I make the "select all checkbox" checked and move to the next page. It shows the "select all checkbox" as checked on every single page which I don't want. Thanks for helping me out. :)

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @Moiz ,

    You would need to check for that in the drawCallback. The thing to do would be to check and see if all rows are checked, and if so check the footer checkbox, and if not, uncheck it.

    Cheers,

    Colin

  • MoizMoiz Posts: 32Questions: 5Answers: 1

    Thanks for the response, Brother @colin! Got your point. But can you guide me in terms of coding through a test case? I have tested draw callback option and it gives alert on each reloads but In the if-else condition inside draw callback option, I can't understand what type of code should I type. :(
    Test case -> http://live.datatables.net/hegufawa/15/edit

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @Moiz ,

    It looks like that example has the select code removed - the button in the footer is no longer present.

    What you would do though is something like this:

    "drawCallback": function( settings ) {
            console.log("DataTables has redrawn the table");
        var selected = this.api().rows({page: 'current', selected: true}).count();
        var all = this.api().rows({page: 'current'}).count();
        
        if (selected === all) {
          // highlight the checkbox
        }
        else {
          // remove the highlight
        }
    
        },
    

    Cheers,

    Colin

  • MoizMoiz Posts: 32Questions: 5Answers: 1

    Yes, Brother @colin! You are absolutely right. I have removed "select all checkbox" from the footer because I have never seen someone placing select all option in the footer. Now it is working fine. Take a look http://live.datatables.net/hegufawa/23/edit
    Thank you very much, brother. You guys are doing so great for the community. Keep it Up. o:)

  • David@QuantumDavid@Quantum Posts: 36Questions: 4Answers: 2

    Hey @Moiz remember to mark the question as answered when you find your solution, saves people like me reading to the bottom to make sure. Having looked at your JSBin live table I'd just say use .removeClass('sorting_asc') on th column 0 when you draw the table with the rows unchecked :smile:

  • MoizMoiz Posts: 32Questions: 5Answers: 1
    edited November 2019

    Hi, @David@Quantum ,
    First of all, sorry for the inconvenience, I was new to this forum or any forum and i had already asked a question regarding "how-to-accept-someones-answer-in-the-discussion". Feel free to check it -> https://datatables.net/forums/discussion/58690/how-to-accept-someones-answer-in-the-discussion. I don't have an option like this

    As brother @colin told me, it depends on how I first raised the issue - whether it's a discussion or a question. Most Importantly, It's a discussion and not a question. So, I was unable to mark this discussion as answered. With due respect, this discussion has been answered, special thanks to the brother Colin. Secondly, I had already removed sorting functionality from the first column of the table in the main project. Just to make things simple and up to to the point, I didn't show that fully complex table in the test case. I didn't want to waste someone's precious time. That's all! o:)

    Cheers,

    Moiz

  • MoizMoiz Posts: 32Questions: 5Answers: 1

    @David@Quantum ,
    I hope this is what you are talking about. I think it's better to remove sorting functionality from column 0 permanently rather than on each callback. :)

    http://live.datatables.net/wugivuru/1/edit

  • David@QuantumDavid@Quantum Posts: 36Questions: 4Answers: 2

    @Moiz ah ok understood! :smile: Yeah that's what I was thinking - didn't realise you'd stripped down your code for the discussion :smile:

This discussion has been closed.