0

I have used checkbox in all rows, such that when each checkbox will be checked I will get the Id's of them, everything is working fine with what I have implemented but the issue is that I only get the checked Id's of the particular page of datatable. Means If I checked the checkbox of one data in page 1 and also checked the checkbox of the other data in page 2, then when I submit I got only the data of page 2. What do I want is that I should get the Id's of data from page1, page2, page3 and so on.

This is where all my data's are coming


@foreach($data as $key => $question_bank)

  <tr id="{{ $question_bank->id }}">
    <td>
        
        <input type="checkbox" data-id="{{ $question_bank->id }}" class="add_check">

    </td>
    <td>{{++$i}}</td>
    <td>{{ $question_bank->questionCategory->category }}</td>
    <td>{{$question_bank->question}}</td>
    
    
  </tr>

@endforeach

<button type="submit" id="add_to" class="mt-3 btn btn-primary float-right">Add</button>

This is my jquery part


$(document).on('click','#add_to',function(e){
  e.preventDefault();
  var questionids_arr = [];
  $("input:checkbox[class=add_check]:checked").each(function () {
     questionids_arr.push($(this).attr('data-id'));
  });
  console.log(questionids_arr);

  
  return false;
});
Improve this question
10
  • If you check a simple example like datatables.net/examples/basic_init/zero_configuration.html and watch what happens in the DOM when you go to a different "page" of results, you'll see that it replaces the current set of table rows, with new ones. So your checkboxes on the other pages are not even currently in the DOM at that point. I guess you will have to find a solution that only updates your array for the current "page" of checkbox values, when the user switches to a different page (there is an event for that, datatables.net/reference/event/page) Commented Apr 5, 2023 at 7:47
  • @CBroe do you have any idea how to do that Commented Apr 5, 2023 at 7:48
  • You can't just start with an empty array and then add the IDs of the checked checkboxes (because you will only ever be iterating over part of all the checkboxes) - so you will have to select all of them on the current page, not just the checked ones - and then depending on whether each single one if checked or not, add or remove that ID to/from the array. Commented Apr 5, 2023 at 8:03
  • @CBroe i have done that Commented Apr 5, 2023 at 8:05
  • 1
    I think you can refer to this post from a previous user, which may help you stackoverflow.com/questions/18684703/… also I cannot see that you are using the table object when iterating through the checkboxes Commented Apr 5, 2023 at 8:17

3 Answers 3

Reset to default
1

I think you want to have the both like add or remove items in array as well as it will work on pagination of data table. I found a working solution of it you can check if it works for you Checkboxes in DataTables need to capture all checked values

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Okay i am checking will let you know
This is only a link to another answer - it does not itself answer the question. It is better to flag the question as a duplicate, in these cases.
Why to flag if the user has got the answer of what he wants, further use your brain mate mentioned above the requirements of what is asked. If you can code well doesn't means all will be. Very clear of the requirements in question what it wants if you can't answer then don't interrupt. In coding a issue for a beginner can arouse thousand issues simply the guy have asked to how the issue will work on pagination, it's better what he had got which solved his both the issues.
0

You need to save the checked ids to a hidden field in the form.

<input type="hidden" id="selectedValues" name="selectedValues">

Add onclick() the checkbox and add the below function to javascript.

function addRemove(id){
  // const selectedIds = $('#selectedValues').val();
  var selectedIds = JSON.parse($('#selectedValues').val());
  
  console.log(selectedIds);
  if($('#' + id).is(":checked")){
    //Add if id not there in array
    selectedIds.push(id);
  }else{
    //Remove from the array
    selectedIds = selectedIds.filter(function(item) {
        return item !== id
    })
  }
  
   $("#selectedValues").val(JSON.stringify(selectedIds));
   console.log(selectedIds)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" onclick="addRemove('vehicle1')"> Bike
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car" onclick="addRemove('vehicle2')"> Car


<input type="hidden" name="selectedValues" id="selectedValues" value="[]">

Improve this answer

2 Comments

Hi the issue is its only working in one page when i go to datatable page 2 its not working then
Your concept is right but its not working on all pages of datatable
0

In DataTable you can use the following to select a row and push to an array as table.rows( {selected: true} ).every will keep the selection even if you switch between pages.

   table.on('select.dt', function(){
       const arr = [];
       table.rows( {selected: true} ).every( function (rowIdx, 
   tableLoop, rowLoop) {
          arr.push(this.data());
        });
       
       console.log(arr.length, arr);
   });
   
   table.on('deselect.dt', function(){
       const arr = [];
       table.rows( {selected: true} ).every( function (rowIdx, tableLoop, rowLoop) {
          arr.push(this.data());
        });
       
       console.log(arr.length, arr);
   });

A complete example can be seen in the JSFiddle

https://jsfiddle.net/greatrin/ayv0jg53/47/

Note: Not very optimized solution, but this is the idea.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.