Checkbox sort in DataTables using jQuery

Question

I've been trying to sort a checkbox field in DataTables jQuery plugin to check and uncheck.

I'm creating the input (checkbox) inside the table like this:

'<input type="checkbox" '+ check +' />'

check is containing the text "checked" or "".

So far I tried just to add DOM checkbox type of sort, like this:

{ "sSortDataType": "dom-checkbox" }

When I use the entire code from the plugin's API documentation, I get the following error:

Uncaught TypeError: Cannot read property 'afnSortData' of undefined inside my console.

Problem: pressing on the column header won't sort the column by checked or unchecked checkboxes.

I would like to get suggestions how to fix the above mentioned error or another way to sort using only jQuery and plugin's methods.

Thanks.

EDIT

Just tried with a fixed code - no error. But sorting is messed up: it's just replacing with each other but not sorting. For example: if I have 1 checkbox checked and 9 not, the checked checkbox is switching from the third place to the sixth and again to the third and so on.

it shows you how to sort on any type of input... you just need to reference the right properties, like the (input).checked property. — MaxOvrdrv
– MaxOvrdrv, Commented Apr 5, 2013 at 0:10
like "sSortDataType": "dom-(input).checked" ? cause it is not working for me — Vera Gavriel
– Vera Gavriel, Commented Apr 5, 2013 at 6:51
go back to the link I provided... the (input) in my comment was just an placemark... in the link I provided they permorm a sort on different input types... jusr use that example, with checkbox properties... — MaxOvrdrv
– MaxOvrdrv, Commented Apr 5, 2013 at 11:42

SternK · Accepted Answer · 2022-12-07 11:42:43Z

11

what I did create a bool var in hidden P so it will be in the same place as the checkbox. Then I disabled the option of change value in checkbox and the sorting is now working.

edited Dec 7, 2022 at 11:42

SternK

13.3k34 gold badges40 silver badges55 bronze badges

answered Apr 13, 2013 at 7:54

Vera Gavriel

3812 gold badges5 silver badges14 bronze badges

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

3 Comments

Parameswar Over a year ago

i have a similar situation, my problem is that when i sort the checkbox, the control is not going to the function defined for it ,i have a function named dom-checkbox defined, and the sSortDataType is dom-checbox, can u help ?

Sachin Gaikwad Over a year ago

Plz can you provide the code snippet, as i am also facing same issue

Jonas Libbrecht Over a year ago

@SachinGaikwad

<td><input type='checkbox' class='minimal' "+product_enabled+"><p style='visibility: hidden; display: none;'>"+products[i].enabled+"</p></td>

Community · Accepted Answer · 2017-05-23 12:25:13Z

I had to slightly tweak the answer provided by Moby's Stunt Double. No additional sorting plug-in required! Just a little custom coding.

Thanks for all the ideas, everyone! For some reason I had to do special handling for my table that was not a general solution. Which was fine by me.

My checkbox was disabled and checked programatically, so I couldn't call .checked. The call based on iColumn also threw things off; probably because I had a hidden 0th column.

This is what worked for me:

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn ) {
    var aData = [];
    $(oSettings.oApi._fnGetTrNodes(oSettings)).each( function () {
        var checker = $(this).find('.classOnSurroundingSpan input');
        aData.push( checker.prop("checked")==true ? "1" : "0" );
    } );
    return aData;
}

My mark-up looked like this (the surrounding span was part of a solution to enable tracking a click on a disabled checkbox):

<span class='classOnSurroundingSpan'><input type='checkbox' disabled='disabled'/></span>

My table definition was (in part):

"aoColumnDefs": [
    {"sSortDataType": "dom-checkbox",
    "aTargets":[1],
    "asSorting": ["desc"]}
]

Michael Kunst · Accepted Answer · 2018-09-27 15:23:51Z

4

This solution worked for me so I wrote up a blog post on it.

http://blog.josephmisiti.com/sorting-booleans-in-jquery-datatables

edited Sep 27, 2018 at 15:23

Michael Kunst

2,98828 silver badges40 bronze badges

answered Nov 5, 2014 at 2:13

josephmisiti

10k13 gold badges58 silver badges72 bronze badges

Comments

Moby's Stunt Double · Accepted Answer · 2013-04-04 23:47:00Z

3

Found this example:

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
{
    var aData = [];
    $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
        aData.push( this.checked==true ? "1" : "0" );
    } );
    return aData;
}

Initialized like so:

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "sSortDataType": "dom-checkbox" }
        ]
    } );
} );

Here: http://www.datatables.net/examples/plug-ins/dom_sort.html

answered Apr 4, 2013 at 23:47

Moby's Stunt Double

2,5401 gold badge18 silver badges32 bronze badges

3 Comments

Vera Gavriel Over a year ago

i wrote that this example gets an error and i wrote what kind of error it is in m question.

Moby's Stunt Double Over a year ago

Do you have a thead tag and th tags for your headers by chance? I had issues once with DataTables and a poorly marked up table.

Vera Gavriel Over a year ago

th tags inside thead tags @Moby's Stunt Double

Steve G · Accepted Answer · 2018-01-12 21:42:50Z

3

This works for me

$(document).ready(function () {
    $('#Table').DataTable({
        "language": datatableLanguaje,
        "aoColumnDefs": [ 
            { "aTargets": [8], "orderDataType": "dom-text", type:'string' },
        ]
    });
});

edited Jan 12, 2018 at 21:42

Steve G

13.8k7 gold badges45 silver badges61 bronze badges

answered Jan 12, 2018 at 20:33

Spaceprogrammer

311 silver badge3 bronze badges

Comments

DIG · Accepted Answer · 2016-02-01 18:52:42Z

2

this works for me:

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "orderDataType": "dom-text", type: 'string' },
        ]
    } );
} );

answered Feb 1, 2016 at 18:52

DIG

5,8042 gold badges25 silver badges17 bronze badges

Comments

Ramachandran · Accepted Answer · 2017-08-01 05:27:19Z

2

Found this example:

  $.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
    return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
        return $('input', td)[1].checked ? '1' : '0';
    });
}

Initialized like so:

$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
                        {
            "targets": 10,
                            "orderDataType": "dom-checkbox"
                        });
} );

answered Aug 1, 2017 at 5:27

Ramachandran

412 bronze badges

Comments

rynop · Accepted Answer · 2014-09-15 18:54:14Z

If you have some sort of unique identifier on the checkbox element, you can do something pretty clean like this example below (note this is a datatables sorting plugin syntax)

If your inputs look like:

<input data-app-id="1" class="migrateCheck" type="checkbox">

The plugin would look like:

function checkboxCompare(a, b) {
    var aId = $(a).data('app-id'),
        bId = $(b).data('app-id'),
        aChecked = $('.migrateCheck[data-app-id=' + aId + ']:checked').length,
        bChecked = $('.migrateCheck[data-app-id=' + bId + ']:checked').length;

    if (aChecked && !bChecked) return -1;
    else if (!aChecked && bChecked) return 1;

    return 0;
}

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "checkbox-pre": function (a) {
        return a;
    },

    "checkbox-asc": function (a, b) {
        return checkboxCompare(a, b);
    },

    "checkbox-desc": function (a, b) {
        return checkboxCompare(b, a);
    }
});

Then simply specify sType: "checkbox" on the aoColumnDefs attr for the col that contains the checkbox.

Tim · Accepted Answer · 2018-09-27 14:58:37Z

0

Anything can be sorted on by some simple html.

$('#table input[type=checkbox]').each(function () {
    var text = $(this).prop('checked');
    var ele = $('<span>' + text + '</span>').hide();
    $(this).after(ele);
});

answered Sep 27, 2018 at 14:58

Tim

851 silver badge8 bronze badges

Comments

Jeremy Thompson · Accepted Answer · 2019-03-18 02:10:05Z

This stumped me for a bit.

I used the standard Plugin Code https://datatables.net/plug-ins/sorting/custom-data-source/dom-checkbox:

$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).prop('checked') ? '1' : '0';
    } );
};

You need to specify "dom-checkbox" column types are sortable:

$('#myTable').dataTable({
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ "action" ] },
        { "sSortDataType": "dom-checkbox", "aTargets": [ "enabled" ] }
    ],
    "aaSorting": [
        [ 3, "desc" ]
    ]
});

In the view I enable the CheckBox columns to put the checkbox in (not tied to col number):

<th class="enabled">Enabled</th>

Collectives™ on Stack Overflow

Checkbox sort in DataTables using jQuery

EDIT

10 Answers 10

3 Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

10 Answers 10

3 Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related