how to fetch row values on checkbox selection?

[dropways]

how to fetch row values on checkbox selection?

[dropways]

Hello @KrupaVasava

Here is the demo link please check.

https://jsfiddle.net/nwmmbLso/3/

[KrupaVasava]

Hello @dropways

Thank you for your reply.

We have check your given link,

but given data are static and we have dynamic data from DTL django python that we have to set through javascript. for e.g.

<span class="dt-checkbox-label"> </span> </div> </th> <th>Department Name</th> <th>Name</th> <th>SMS No.</th> <th>WhatsApp No.</th> <th>Email</th> <th>Country</th> <th>City</th> <th>Zip Code</th> <th>Activity</th> </tr> </thead> <tbody> {% for vr in adduser.adduser.all %} <tr> <td></td> <td>{{vr.dept_nm}}</td> <td>{{vr.f_name}} {{vr.l_name}}</td> <td>{{vr.sms_no}}</td> <td>{{vr.whtsp_no}}</td> <td>{{vr.e_mail}}</td> <td>{{vr.country}}</td> <td>{{vr.city}}</td> <td>{{vr.zip}}</td> <td> <a href="javascript:void(0);" data-toggle="modal" data-target="#userEditModal" class="btn btn-primary"><span class="fa fa-pencil"></span> Edit</a> <a href="/deleteuser/{{vr.id}}" class="btn btn-danger"><span class="fa fa-trash"></span> Delete</a> </td> </tr> {% endfor %} </tbody> </table>

[dropways]

You can try this Column Rendering methods for this

<table class="table table-lg align-middle table-hover w-100 mt-0" id="column-rendering-table">
	<thead>
		<tr>
			<th scope="col" class="no-sort">Id</th>
			<th scope="col">Course Name</th>
			<th scope="col">Category</th>
			<th scope="col">Instuctor</th>
			<th scope="col">Description</th>
			<th scope="col">Progress</th>
			<th scope="col">Status</th>
			<th scope="col" class="no-sort">Action</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Angular.Js</td>
			<td>Frontend Development</td>
			<td>Brad Traversy</td>
			<td>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt sapiente sequi, dignissimos quia magnam
				modi deleniti.</td>
			<td>30</td>
			<td>1</td>
			<td nowrap="nowrap"></td>
		</tr>
		<tr>
			<td>2</td>
			<td>Codeigniter</td>
			<td>Backend Development</td>
			<td>Inside Codemedia</td>
			<td>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt sapiente sequi, dignissimos quia magnam
				modi deleniti.</td>
			<td>100</td>
			<td>3</td>
			<td nowrap="nowrap"></td>
		</tr>
	</tbody>
</table>

$(document).ready(function() {
	$("#column-rendering-table").DataTable({
		responsive: true,
		lengthMenu: [10, 15, 25, 50],
		language: {
			paginate: {
				first: '<span class="bi bi-chevron-double-left"></span>',
				previous: '<span class="bi bi-chevron-left"></span>',
				next: '<span class="bi bi-chevron-right"></span>',
				last: '<span class="bi bi-chevron-double-right"></span>',
			},
		},
		order: [[1, "asc"]],
		headerCallback: function (thead) {
			thead.getElementsByTagName("th")[0].innerHTML = `
				<div class="table-checkbox">
						<input type="checkbox" value="" class="form-check-input group-checkable"/>
				</div>`;
		},
		columnDefs: [
			{
				targets: "no-sort",
				orderable: false,
			},
			{
				targets: 0,
				width: "30px",
				className: "dt-left",
				orderable: false,
				render: function (data, type, full, meta) {
						return `
					<div class="table-checkbox table-checkbox-row">
							<input type="checkbox" value="" class="form-check-input"/>
					</div>`;
				},
			},
			{
				targets: -1,
				width: "125px",
				title: "Actions",
				orderable: false,
				render: function (data, type, full, meta) {
						return `<div class="table-actions">
					<button class="btn btn-icon btn-sm btn-success btn-transparent"><i class="bi bi-eye"></i></button>
					<button class="btn btn-icon btn-sm btn-primary btn-transparent"><i class="bi bi-pen"></i></button>
					<button class="btn btn-icon btn-sm btn-danger btn-transparent"><i class="bi bi-trash3"></i></button>
				</div>`;
				},
			},
			{
				targets: 1,
				render: function (data, type, full, meta) {
					return (
						'<div class="fw-medium text-truncate text-dark">' +
						[data] +
						"</div>"
					);
				},
			},
			{
				targets: 4,
				render: function (data, type, full, meta) {
					return (
						'<div class="text-truncate mx-w-200">' +
						[data] +
						"</div>"
					);
				},
			},
			{
				targets: 5,
				render: function (data, type, full, meta) {
						return (
							'<div class="d-flex align-items-center">' +
							'<div class="progress w-80" style="height: 6px;">' +
							'<div class="progress-bar" role="progressbar" style="width: ' +
							[data] +
							'%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>' +
							"</div>" +
							'<div class="text-dark flex-shrink-0 ms-2 fw-medium">' +
							[data] +
							"%" +
							"</div>" +
							"</div>"
						);
				},
			},
			{
				targets: 6,
				width: "80px",
				render: function (data, type, full, meta) {
					var status = {
							1: { title: "Ongoing", state: "info" },
							2: { title: "Paused", state: "secondary" },
							3: { title: "Done", state: "success" },
					};
					if (typeof status[data] === "undefined") {
							return data;
					}
					return (
							'<span class="fw-bold badge d-block rounded-pill bg-' +
							[status[data].state] +
							' px-3 py-2">' +
							status[data].title +
							"</span>"
					);
				},
			},
		],
	});
	$("#column-rendering-table").on("change", ".group-checkable", function () {
		var set = $(this)
				.closest("table")
				.find(".table-checkbox-row .form-check-input");
		var checked = $(this).is(":checked");

		$(set).each(function () {
				if (checked) {
						$(this).prop("checked", true);
				} else {
						$(this).prop("checked", false);
				}
		});
	});
});

[KrupaVasava]

Thank you So much it's working.
really appreciate your help

[KrupaVasava]

Hi

I need your help in all check box selection.

Please check below screenshot

Screenshot -1

As this screenshot we have 10 entries on 1st page and we are going to select on all checkbox. and that all are selected

Screenshot -2

If I choose to select all option from drop down then other checkbox is not showing as selected.

So, How can I get it that selected checkbox if we are going select all option from drop down.