Finding Value of Hidden Rows Data Only

Finding Value of Hidden Rows Data Only

lennyhadleylennyhadley Posts: 30Questions: 8Answers: 0
    var table = $('#PositionRankings').DataTable({         
        "paging": true,
        "pageLength":10,
        "pagingType":"simple",  
        "info": false,
        "scrollX": true,
        "scrollCollapse": true,
        "order": [7, 'desc' ],
        dom: 'Bfrtip',
        buttons: [ ]
    });  

I have that table on this page: https://www.topflightfantasysports.com/fanduel-nba-optimizer/

Its using Pagination. The first column of this table is a checkbox, when the user hits the "Create Lineups" button at the bottom, I need to cycle through the table and find all the checkboxes that are checked yes. However my code only finds the ones that are currently showing and not the paginated rows that are hidden currently.

        $checkboxLock = $('.Locked:checkbox:checked');
        var LockArray = '';
        LockArray = $.map($checkboxLock, function(el){            
            if(el.checked) { 
                return '"' + el.id + '"'; 
            } else {                 
            };
        });           
        //alert(LockArray);
        console.log(LockArray);  

That's my current code to find them. If I view page source all the records are showing in the actual source. So I just need to know how to find the value of all the rows, not just the ones showing for my first column.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Well, unfortunately that code probably won't work since the only rows in the DOM are the rows being displayed. There are a couple choices. One is to keep track of the checked state in each row by setting the data to 1 or 0, for example. Or the other is to iterate each Datatable row and use node() to get the tr and check the checked state.

    This example I created a long time ago to learn about checkboxes. So there is a lot going on but I think you are interested in the last few lines of code:
    http://live.datatables.net/qagiqaqa/1/edit

     table.rows().every(function (rowIdx, tableLoop, rowLoop) {
          var data = this.node();
          console.log($(data).find('input').prop('checked'));
    });
    

    This way you don't have to track the checked state with a data value.

    Kevin

  • lennyhadleylennyhadley Posts: 30Questions: 8Answers: 0

    Well. That example you sent me is golden honeslty, alot of functionality in there I had questions about. Thank you so much. And yes, I'd prefer to just iterate through all the rows when the button is clicked rather than state saving I think. But I'll experiment. Thanks for the help!

  • lennyhadleylennyhadley Posts: 30Questions: 8Answers: 0

    just to clarify, when cycling through, I see it shows me that they're checked. true or false is what i get back. How do I get the id of the first column?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited December 2018 Answer ✓

    Yep, the example may help you with the search plugin question you had earlier. If you still need help with that post back on your other thread.

    Didn't try it so there may be errors but something like this:

    table.rows().every(function (rowIdx, tableLoop, rowLoop) {
          var data = this.node();
          if ($(data).find('input').prop('checked')) {
                var id = this.data()[0];
          }
    });
    

    Or use this.data().myColumnHeader. If you want to get an API instance with the ID then use pluck().

    Kevin

  • lennyhadleylennyhadley Posts: 30Questions: 8Answers: 0

    That works awesome. Thank you so much. You just solved a worlds of problems for my site!

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Awesome, glad its working.

    Kevin

  • lennyhadleylennyhadley Posts: 30Questions: 8Answers: 0

    @kthorngren one more question on this sorry. I'm trying to get the input values of the number inputs at the end of the table. Not the defaultValue, but the actual DOM value.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited December 2018

    How about this example. Pulled a few rows from your example above:
    http://live.datatables.net/fofupesi/1/edit

      $('#PositionRankings').on('change', 'input[type="number"]', function () {
        console.log($(this).val());
      })
    

    Kevin

  • lennyhadleylennyhadley Posts: 30Questions: 8Answers: 0

    doing the console.log($(this).val()) overwrites the default value? So then I can just use the regular datatables to get the value like above?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    doing the console.log($(this).val()) overwrites the default value?

    This is simply the jQuery val() method to get the value of an input. Its not Datatables specific and does not change anything.

    So then I can just use the regular datatables to get the value like above?

    Datatables does not know about DOM updates to the table, like inputs. You would use cell().invalidate() with some other prep code to update the Datatables data. for example:
    http://live.datatables.net/dexilude/1/edit

    Kevin

This discussion has been closed.