I am using the DataTables plugin for my html table. I can get everything working except the boolean column. This column is composed by icons such as X (value is 0) and ✔ (value is 1).

My script is something like:

$('#sorting-table').DataTable({
    paging: false,
    info: false,
    searching: false,
    columnDefs: [
        { orderable: false, targets: 0 },
        { orderable: true, targets: 2 },
        { orderable: true, targets: 3, type: "date-eu" },
        { orderable: false, targets: 4 }
    ],
    order: [[1, 'asc']]
});

My column 2 is the one that has icons and bool hidden values and I don't know what to do to make it orderable.

If anyone know the answer I would very much appreciate

CodePudding user response：

can you try this:

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


$('#sorting-table').DataTable({
    paging: false,
    info: false,
    searching: false,
    columnDefs: [
        { orderable: false, targets: 0 },
        { orderable: true, targets: 2, orderDataType: 'dom-text-numeric' },
        { orderable: true, targets: 3, type: "date-eu" },
        { orderable: false, targets: 4 }
    ],
    order: [[1, 'asc']]
});

you must change also the 'input' to what html resides in td.

note: i did not do it before.

ref: datatables examples