OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Checkbox is not selecting paginated data in JavaScript

  • Thread starter Thread starter Pam
  • Start date Start date
P

Pam

Guest
I have a C# MVC project , in which I am trying to select all the checkbox using header checkbox in table. but on selection it only selects first page data not all paginated data.

I am using AJAX for capturing selected data.

my table code is below:

Code:
<div class="table-container">
<table class="table" id="deviceTable">
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>Device Serial</th>
<th>Device Name</th>
<th>User Name</th>
<th>User Email</th>
                @* <th>Migration Not Started</th>
<th>Migration In Progress</th>
<th>Migration Completed</th>
<th>Migration Failed</th> *@
 
                <th>Last Updated Time</th>
<th>Wave/Ring Number</th>
<th>Overall Status</th>
</tr>
</thead>
<tbody id="deviceTableBody">
            @foreach (var item in Model)
            {
<tr>
<td><input type="checkbox" class="row-checkbox" data-id="@item.DeviceSerial"></td>
<td>@item.DeviceSerial</td>
<td>@item.DeviceName</td>
<td>@item.UserName</td>
<td>@item.UserEmail</td>
                    @* <td>@(item.MigrationNotStarted ? "Not Started" : "Started")</td>
<td>@(item.MigrationInProgress ? "In Progress" : "Not In Progress")</td>
<td>@(item.MigrationCompleted ? "Completed" : "Not Completed")</td>
<td>@(item.MigrationFailed ? "Failed" : "Not Failed")</td> *@
 
                    <td>@item.LastUpdatedTime</td>
<td>@item.WaveNumber</td>
<td class="overall-status">
                        @if (item.OverallStatus == "In Progress")
                        {
<span class="circle blue" data-status="In Progress" id="[email protected]"></span>
                        }
                        else if (item.OverallStatus == "Failed")
                        {
<span class="circle red" data-status="Failed" id="[email protected]"></span>
                        }
                        else if (item.OverallStatus == "Completed")
                        {
<span class="circle green" data-status="Completed" id="[email protected]"></span>
                        }
                        else if (item.OverallStatus == "Not Started")
                        {
<span class="circle yellow" data-status="Not Started" id="[email protected]"></span>
                        }
                        else if (item.OverallStatus == "Completed(Manually)")
                        {
<span class="circle greenyellow" data-status="Completed(Manually)" id="[email protected]"></span>
                        }
                        @item.OverallStatus
</td>
</tr>
            }
</tbody>
</table>
</div>

also my AJAX is below:

Code:
$(document).ready(function () {
    // Handle select all checkbox
    $('#selectAll').click(function () {
        $('.row-checkbox').prop('checked', this.checked);
    });
 
    // Handle individual row checkbox change
    $('.row-checkbox').change(function () {
        if (!this.checked) {
            $('#selectAll').prop('checked', false);
        }
    });
 
    // Handle Mark as Completed button click
    $('#markAsCompleted').click(function () {
        var selectedIds = [];
        $('.row-checkbox:checked').each(function () {
            selectedIds.push($(this).data('id'));
        });
 
        console.log(selectedIds);
 
        var serializedData = JSON.stringify(selectedIds); // Convert data to JSON string as an array
        console.log("serializedData", serializedData);
 
        if (selectedIds.length > 0) {
            $.ajax({
                url: '/Home/MarkAsCompleted',
                type: 'POST',
                contentType: 'application/json',
                data: serializedData,
                success: function (response) {
                    // Update the UI to reflect the changes
                    selectedIds.forEach(function (id) {
                        var row = $('#circle-' + id).closest('tr');
                        row.find('.overall-status').html('<span class="circle greenyellow" data-status="Completed(Manually)"></span>Completed(Manually)');
                    });
                },
                error: function (error) {
                    console.log("Error updating status: ", error);
                }
            });
        } else {
            alert('Please select at least one row to mark as completed.');
        }
    });
});

when I console log below JavaScript code:

Code:
// Handle select all checkbox
    $('#selectAll').click(function () {
        $('.row-checkbox').prop('checked', this.checked);
    })

it does not capture all the selected values.

I am new to this , any help will be thankful.

<p>I have a C# MVC project , in which I am trying to select all the checkbox using header checkbox in table. but on selection it only selects first page data not all paginated data.</p>
<p>I am using AJAX for capturing selected data.</p>
<p>my table code is below:</p>
<pre><code><div class="table-container">
<table class="table" id="deviceTable">
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>Device Serial</th>
<th>Device Name</th>
<th>User Name</th>
<th>User Email</th>
@* <th>Migration Not Started</th>
<th>Migration In Progress</th>
<th>Migration Completed</th>
<th>Migration Failed</th> *@

<th>Last Updated Time</th>
<th>Wave/Ring Number</th>
<th>Overall Status</th>
</tr>
</thead>
<tbody id="deviceTableBody">
@foreach (var item in Model)
{
<tr>
<td><input type="checkbox" class="row-checkbox" data-id="@item.DeviceSerial"></td>
<td>@item.DeviceSerial</td>
<td>@item.DeviceName</td>
<td>@item.UserName</td>
<td>@item.UserEmail</td>
@* <td>@(item.MigrationNotStarted ? "Not Started" : "Started")</td>
<td>@(item.MigrationInProgress ? "In Progress" : "Not In Progress")</td>
<td>@(item.MigrationCompleted ? "Completed" : "Not Completed")</td>
<td>@(item.MigrationFailed ? "Failed" : "Not Failed")</td> *@

<td>@item.LastUpdatedTime</td>
<td>@item.WaveNumber</td>
<td class="overall-status">
@if (item.OverallStatus == "In Progress")
{
<span class="circle blue" data-status="In Progress" id="[email protected]"></span>
}
else if (item.OverallStatus == "Failed")
{
<span class="circle red" data-status="Failed" id="[email protected]"></span>
}
else if (item.OverallStatus == "Completed")
{
<span class="circle green" data-status="Completed" id="[email protected]"></span>
}
else if (item.OverallStatus == "Not Started")
{
<span class="circle yellow" data-status="Not Started" id="[email protected]"></span>
}
else if (item.OverallStatus == "Completed(Manually)")
{
<span class="circle greenyellow" data-status="Completed(Manually)" id="[email protected]"></span>
}
@item.OverallStatus
</td>
</tr>
}
</tbody>
</table>
</div>
</code></pre>
<p>also my AJAX is below:</p>
<pre><code>$(document).ready(function () {
// Handle select all checkbox
$('#selectAll').click(function () {
$('.row-checkbox').prop('checked', this.checked);
});

// Handle individual row checkbox change
$('.row-checkbox').change(function () {
if (!this.checked) {
$('#selectAll').prop('checked', false);
}
});

// Handle Mark as Completed button click
$('#markAsCompleted').click(function () {
var selectedIds = [];
$('.row-checkbox:checked').each(function () {
selectedIds.push($(this).data('id'));
});

console.log(selectedIds);

var serializedData = JSON.stringify(selectedIds); // Convert data to JSON string as an array
console.log("serializedData", serializedData);

if (selectedIds.length > 0) {
$.ajax({
url: '/Home/MarkAsCompleted',
type: 'POST',
contentType: 'application/json',
data: serializedData,
success: function (response) {
// Update the UI to reflect the changes
selectedIds.forEach(function (id) {
var row = $('#circle-' + id).closest('tr');
row.find('.overall-status').html('<span class="circle greenyellow" data-status="Completed(Manually)"></span>Completed(Manually)');
});
},
error: function (error) {
console.log("Error updating status: ", error);
}
});
} else {
alert('Please select at least one row to mark as completed.');
}
});
});
</code></pre>
<p>when I console log below JavaScript code:</p>
<pre><code>// Handle select all checkbox
$('#selectAll').click(function () {
$('.row-checkbox').prop('checked', this.checked);
})
</code></pre>
<p>it does not capture all the selected values.</p>
<p>I am new to this , any help will be thankful.</p>
 

Latest posts

J
Replies
0
Views
1
Jeff P Chacko
J
Top