Deselect All Checkboxes Except Current - Not working on Pages > 1

jamesJIgoe

I want the code to deselect anything but the current selection, and to deselect anything checked on other pages.. If I set all the checkboxes to false, the code only works from the first page, not from any pages > 1

@Styles.Render("~/Content/DataTables")
@Scripts.Render("~/bundles/DataTables")

<script>

 $(document).ready(function () {
        $('#results').DataTable({
            columnDefs: [
                {
                    className: 'dt-nowrap',
                    targets: 1
                },
                {
                    className: 'dt-center',
                    targets: [1,2]
                }
            ],
            "paging": true,
            "pageLength": 10,
            "lengthMenu": [[10, 20, 40, -1], [10, 20, 40, "All"]],
            "order": [[0, "asc"]],
            "searching": false,
            "sort": false,
            "deferRender": true
        });

        //prevent enter from submitting form
        $(document).keydown(function (e) {
            if (e.keyCode == 13) {
                return false;
            }
        });
 
    });

    $(function () {
        $("input").change(function (e) {
            e.preventDefault();
            var table = $('#results').dataTable();
            $('input', table.fnGetNodes()).prop('checked', false);
            $(this).prop("checked", true);
        });

</script>

The bundles are as follows:

    bundles.Add(New StyleBundle("~/Content/DataTables").Include(
                "~/DataTables/datatables.min.css"))

    bundles.Add(New ScriptBundle("~/bundles/DataTables").Include(
                "~/DataTables/datatables.min.js"))

What am I doing wrong, or rather, what is the correct way to resolve this?

kthorngren

My guess is that "deferRender": true is not rendering all the rows but the page being displayed. According to the deferRender docs:

Note that when enabled, it goes without saying that not all nodes will always be available in the table

Kevin

jamesJIgoe

kthorngren , I appreciate the response, but I've turned that off already, and it makes no difference.

kthorngren

ITs not clear to me, without seeing a test case, what exactly your code is doing. I have this checkbox example:
http://live.datatables.net/dotonapu/6/edit

It shows how to loop through the rows to get the checkbox state. Look at the last section of code.. Maybe it will help. If not then please post a test case replicating your issue.

Kevin

jamesJIgoe

I went to your example page, dropped in the following code into the JS section, modified as needed to reference your datatable...

$(function () {
    $("input").change(function (e) {
        e.preventDefault();
        var table = $('#example').DataTable();
        table.$("input[type=checkbox]").prop("checked", false);
        $(this).prop("checked", true);
    });
});

...and it behaves similarly, in that the code makes sure that only one item is selected on the page, but it only works on the first page, not on any of the other pages.

I am constructing a jsfiddle as well as reviewing your code to see what i might be abler to us.

kthorngren

Looks like your function works here:
http://live.datatables.net/cegoreli/1/edit

If I click on a checkbox they are cleared on all pages.

Kevin

jamesJIgoe

Kevin,

But it only works on the first page, not any of the subsequent pages. When I go to page 2, I can multi-select, and when I go back to page one, it works correctly and even deselects those on page 2.

kthorngren

When I go to page 2, I can multi-select, and when I go back to page one

I understand the issue now. You need to use delegated events. Is the updated example working the way you want?
http://live.datatables.net/cegoreli/2/edit

Kevin

jamesJIgoe

I think it's almost there, so that it does deselect everything, but it does not set the selected item. I'm exploring your code now, but can't get the item to select.

Once we have the higher DOM element, how can we get the specific item to reselect?

kthorngren

Ah, I didn't pay attention to that

This should do the trick:
http://live.datatables.net/luzofope/1/edit

Kevin

jamesJIgoe

Many thanks! Although I'm not a paying supporter, how can I give DataTables and you a shout out, e.g., Twitter, facebook, etc?

jamesJIgoe

For anyone looking for the specific changes:

It was changed to an event on the table, so when the input field was changed, it bubbled up to a table event. this code captures that, deselects all input fields, and then resets the selection to the one the user clicked on.

$(function () {
    $("table").on('change', 'input', function (e) {
        e.preventDefault();
        var table = $('#results').DataTable();
        table.$("input[type=checkbox]").prop("checked", false);
        $(this).prop("checked", true);
    });
});