Sort by placeholder if no value set

Chris230291

I am able to sort checkboxes and text inputs like this, but the number one does not work.

    /* Create an array with the values of all the checkboxes in a column */
    $.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';
        });
    }

    /* Create an array with the values of all the text boxes in a column */
    $.fn.dataTable.ext.order['dom-text'] = function (settings, col) {
        return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
            var val = $('input', td).val();
            return val === '' ? $('input', td).attr('placeholder') : val;
        });
    }

    /* Create an array with the values of all the number boxes in a column */
    $.fn.dataTable.ext.order['dom-number'] = function (settings, col) {
        return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
            var val = $('input', td).val();
            return val === '' ? $('input', td).attr('placeholder') : val;
        });
    }

How do I make the number inputs sortable by the value (if present), else the placeholder?

kthorngren

Guessing the column is being sorted as string values and not in numeric order? Take a look at this example. The dom-text-numeric plugin is multiplying the value by 1 to make sure its a numeric value. You will probably need to do that and do the same if using the placeholder.

If this doesn't help then please provide a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Chris230291

Thanks.
How do I modify the example you linked to use placeholders if there is no value?

    /* Create an array with the values of all the input boxes in a column, parsed as numbers */
    $.fn.dataTable.ext.order['dom-text-numeric'] = function (settings, col) {
        return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
            var val = $('input', td).val();
            return val === '' ? $('input', td).attr('placeholder') : val * 1;
        });
    };

kthorngren

Does the code you have not work? Looks like it should. Maybe you need to use $('input', td).attr('placeholder') * 1. You haven't said exactly what is not working Can you provide a test case so we can see the problem to help debug?

Kevin

kthorngren

I copied the example into this test case:
https://live.datatables.net/kiwezoda/1/edit

Ashton Cox has a placeholder of 21. With your code it seems to be sorting properly. Update the test case to show the issue you are having.

Kevin

Chris230291

It treats fields with a value higher than ones that have no value even though the placeholders are higher

Chris230291

Here is an example. But I cant get the column to sort at all in the example for some reason.

https://live.datatables.net/ziberalu/1/edit

kthorngren

You didn't apply the plugin to the column, for example:

    $('#example').DataTable({
        columnDefs: [
          { targets: 3, orderDataType: 'dom-text-numeric' },
        ],
    });

Plus you didn't use the code you posted above to get the placeholder. Here is the updated example:
https://live.datatables.net/ziberalu/2/edit

Kevin

Chris230291

Today I have come at it again and I still cant see where the error is.
Your last example works perfectly, but my real table is still sorting as strings.

I can post my table code but obviously it wont work on its own.

Chris230291

Hello. I figured it out.
I was using type: 'string' on my number column.
I set it because all of the other columns that use inputs require it for sorting to work.

allan

Thanks for the update. Yes, generally speaking setting the type for a column is not a good move, as it would mean that DataTables own type detection has failed, and thus we enter into undefined behaviour.

Allan