Add a non-mapped field to ajax re-orderable data table for drag and drop icon

JammyClarkie

TLDR: I just want to add a column that will contain an icon to make it obvious that it's drag and droppable. The problem is I don't know how to add a non-mapped column.

Gives an idea as to how the JS is setup:
http://live.datatables.net/jamosefi/1/

I have my data tables setup like the above.

<table class="display table table-centered w-100 dt-responsive nowrap" id="attributes-datatable" width="100%">
    <thead>
        <tr>
            <th>Rank</th>
            <th>Name</th>
        </tr>
    </thead>
</table>

The HTML looks like the above since it gets the data from Ajax (using the PHP library).

I just want to add another column that will just contain a draggable icon in all the rows. But I don't know how I can add an unmapped column. If I add a column, then the ajax is expecting it to be linked to the database and I get an error.

    var table = $('#attributes-datatable').DataTable( {
        dom: 'Bfrtip',
        ajax: '/ajax/attributes',
        columns: [
            {
                "data": "rank"
            },
            {
                "data": "name"
            }
        ],
        rowReorder: {
            dataSrc: 'rank',
            editor:  editor
        },
        columnDefs: [
            { orderable: true, className: 'reorder w-10 dripicons-menu', targets: 0 },
            { orderable: false, targets: '_all' }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );

If I try adding another item to the columns array then I get an error. The column doesn't even need any data since I can add the icon using CSS.

kthorngren

Your test case doesn't run because you are trying to initialize the Editor but haven't loaded the Editor library. To add another column you would set columns.data to null and use either columns.render or columns.defaultContent to place your icon or and empty string if you want to use CSS to display the icon. Similar to this example.

Kevin

JammyClarkie

"data": null was the trick I was missing, thanks!