Using jQuery.dataTables to choose all rows except the final column

Question

Using jQuery.dataTables to choose all rows except the final column

I'm utilizing a table with jQuery.dataTables. I have a requirement to input dates in the last column. However, when I click to input a date, the row becomes deselected.

The following code is meant for selecting all rows:

Displayed below is the DataTable setup:

var table = $('#tableRegister').DataTable({
                data: [],
                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                }],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [[1, 'asc']],
                columns: [
                    { data: "ACTION" },
                    { data: "ID" },
                    { data: "REGISTER_DATE" }
                ],
                rowCallback: function (row, data) { },
                filter: false,
                info: false,
                ordering: false,
                processing: true,
                retrieve: true
            });

$('#table_name tbody').on('click', 'tr', function () {
                    $(this).toggleClass('selected');
                });

The values of the table are populated using ajax calls.

for (var i = 0; i < e.DataBadge._REG.length; i++) {
    table.row.add({
    "ID": e.DataBadge._REG[i]._ID,
    "REGISTER_DATE": `<input type='text' class='form-control datepicker2' id='register_date${i}'/>`
    }).draw();
}

Is there any way to maintain selection on the last column?

jquery html css datatables

Answer 1

Answer №1

Whenever the date input is clicked, the row is no longer selected

It seems like clicking on the date picker also affects the row selection

Here is a code snippet demonstrating how clicking a button can change the row:

$("table tr").click(function() {
  $(this).toggleClass("selected");
});

tr.selected { background-color: yellow; }
td { padding: 6px; border: 1px solid #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
</tbody>
</table>

To prevent this behavior, you can use .stopPropagation(). Refer to https://api.jquery.com/event.stopPropagation/

$("table tr").click(function() {
  $(this).toggleClass("selected");
});

$("table button").click(function(e) {
  e.stopPropagation()
});

tr.selected { background-color: yellow; }
td { padding: 6px; border: 1px solid #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
</tbody>
</table>

Alternatively, instead of highlighting the entire row, you can choose to only highlight specific cells within the row and exclude the last column by modifying the click handler to target td elements instead of tr then toggle the class:

$(this).closest("tr").find("td").not(":last-child")

See example below:

$("table tr td").click(function() {
  $(".selected").removeClass("selected");
  $(this).closest("tr").find("td").not(":last-child").addClass("selected");
});

td.selected { background-color: yellow; }
td:not(:last-child) { cursor: pointer; }
td { padding: 6px; border: 1px solid #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</tbody>
</table>

Answer 2

Whenever the date input is clicked, the row is no longer selected

It seems like clicking on the date picker also affects the row selection

Here is a code snippet demonstrating how clicking a button can change the row:

$("table tr").click(function() {
  $(this).toggleClass("selected");
});

tr.selected { background-color: yellow; }
td { padding: 6px; border: 1px solid #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
</tbody>
</table>

To prevent this behavior, you can use .stopPropagation(). Refer to https://api.jquery.com/event.stopPropagation/

$("table tr").click(function() {
  $(this).toggleClass("selected");
});

$("table button").click(function(e) {
  e.stopPropagation()
});

tr.selected { background-color: yellow; }
td { padding: 6px; border: 1px solid #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
</tbody>
</table>

Alternatively, instead of highlighting the entire row, you can choose to only highlight specific cells within the row and exclude the last column by modifying the click handler to target td elements instead of tr then toggle the class:

$(this).closest("tr").find("td").not(":last-child")

See example below:

$("table tr td").click(function() {
  $(".selected").removeClass("selected");
  $(this).closest("tr").find("td").not(":last-child").addClass("selected");
});

td.selected { background-color: yellow; }
td:not(:last-child) { cursor: pointer; }
td { padding: 6px; border: 1px solid #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</tbody>
</table>

Using jQuery.dataTables to choose all rows except the final column

Answer №1

Similar questions

Conceal the menu in Angular Material when the mouse leaves the button

The background image fails to display on the button

Adjusting SVG size based on the position of the cursor for transforming origin

Tips on Implementing a CSS Variable in a React Component

The issue with WooCommerce's update_checkout function is that it is not properly updating the available shipping methods

There is no data in the $_POST array

What is the method to process a JSON path containing a special character like "@"?

What are the steps to gather user data and generate a roster of individuals currently online?

Boosting your website with a slick Bootstrap 4 responsive menu that easily accommodates additional

Unforeseen execution issues arising from repeated Ajax calls with SetTimeout in JavaScript

Creating a responsive layout that sets the window height to 100% and automatically adjusts sibling divs when the content within parent divs exceeds the defined height

What is the best way to get both the id and name of a selected item in Angular?

Unleash the power of attribute selectors in a SASS/SCSS list variable: a comprehensive guide!

What is the best way to define a variable that captures and logs the values from multiple input variables?

The FaceBook modal is failing to appear

IE8 experiencing issues with jQuery live click event functionality

Sending a null variable via an AJAX post request from jQuery to PHP

What could be causing the text-end to fail in Bootstrap 5?

What is the best way to create a scrollable Material UI modal and dialog?

Execute the function when the element comes into view