0

I am using the DataTable library. On each page I am displaying 10 rows total. I have 10 records(rows). I have one checkbox button. If I click the 'checkall' button it has to select the 1st page of 10 rows. I then go to the second page and click the 'checkall' button. It has to select the 2nd page of 10 rows.

In total 20 rows has to be checked. However my code is not working like this. Can anyone tell me what is wrong here?

  <th><button type="button" id="selectAll"> <span class="selectAllChk">Select All</span> </button></th>

var baseURL = '<?php echo $this->config->item('base_url'); ?>';
$(document).ready(function() {
  var allComments = $('#comment-table').DataTable( {
    "bStateSave": true,
    "processing": true,
    "serverSide": true,
    "searching": false,
    "ordering": false,
    "ajax":  {
    "url": baseURL+"Comments/ajaxHandler",
    "type": "POST",
    "data": function(d) {
      d.method='getAllComments';
      $.extend(d, generateField($('#comment-table')));
    }
  },
    "columns": [
      { "data": 'comment' },
      { "data": 'username' },
      // { "data": 'status' },
      { "data": 'assignedTo' },
      //{ "data": 'userCategory' },
      { "data": 'orgName' },
      { "data": 'commentDate' },
      { "data": 'lastUpdateOn' },
      { "data": 'commentCount' },
      {
        "data":   "actions",
        "orderable":false
      }
    ],
    "order": [[1, 'asc']]
  });

  $('#select-all').on('click', function(e) {
    e.preventDefault();
    $(".sub_chk").prop('checked', $(this).is(':checked'));  
  });
});

I tried like below code

$(document).ready(function () {
        $('body').on('click', '#selectAll', function () {
           if ($(this).hasClass('allChecked')) {
              $('input[type="checkbox"]', '#example').prop('checked', false);
           } else {
            $('input[type="checkbox"]', '#example').prop('checked', true);
            }
            $(this).toggleClass('allChecked');
          })
     });
Sagunthala K
  • 13
  • 3
  • Are you saying that only the checkboxes on the page are selected, or that nothing is selected? If the former, then that's expected behaviour as only 1 page of 10 rows will exist in the DOM at any given time. If the latter then you most likely need to use a delegated event handler – Rory McCrossan Apr 15 '20 at 10:13
  • @ Rory McCrossan , first page 10 rows selected it's working fine, then i am going to second page i am selecting button it's selected next 10 rows. **but again i am coming back to first page that time it's getting deselected** – Sagunthala K Apr 15 '20 at 10:16
  • That's expected behaviour as I mentioned above. The datatable loads each page via AJAX. As soon as you move to the next page the previous is lost. If you want to retain the state of that page you will need to do it manually, using a locally stored array/object which tracks every row – Rory McCrossan Apr 15 '20 at 10:17
  • @ Rory McCrossan, can you please post your code – Sagunthala K Apr 15 '20 at 10:19
  • I tried below code but not working – Sagunthala K Apr 15 '20 at 10:22
  • $(document).ready(function () { $('body').on('click', '#selectAll', function () { if ($(this).hasClass('allChecked')) { $('input[type="checkbox"]', '#example').prop('checked', false); } else { $('input[type="checkbox"]', '#example').prop('checked', true); } $(this).toggleClass('allChecked'); }) }); – Sagunthala K Apr 15 '20 at 10:22
  • Can you please any one help me onut on this, i have tried lot but not working my expted output – Sagunthala K Apr 15 '20 at 10:27
  • 1
    I don't have any code to post. The approach you need to use is described in my previous comment. Note that this isn't a trivial thing to do, so I doubt anyone's going to write it for you without you showing any effort. – Rory McCrossan Apr 15 '20 at 10:28

0 Answers0