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

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

JammyClarkieJammyClarkie Posts: 2Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 16,808Questions: 25Answers: 3,984
    Answer ✓

    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

  • JammyClarkieJammyClarkie Posts: 2Questions: 1Answers: 0

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

Sign In or Register to comment.