Temporarily Display A Hardcoded Value In Column Until Correct Data Passed From Backend Code

murday1983

I am new to datatables and was wondering how I display a hardcoded value in my datatable column until my backend passes me the correct value

** JQuery**
This is what I have tried

            {   data: null,
                render: function () {
                    return `<span>TO POPULATE<span>`;
                }
            },

This is part of the column code I have:

        columns: [
            { data: 'id', name: 'id', render: function (data) {
                    return data;
                }
            },
            { data: 'name', name: 'name', className: "text-capitalize" },
            {
                data: 'customer_price',
                name: 'customerPrice',
                render: $.fn.dataTable.render.number( '.', '.', 2, '£')
            },
            { data: 'total_seconds', name: 'totalMinutes', render: function (data) { return data / 60}  },

            {   data: null,
                render: function () {
                    return `<span>Boo<span>`;
                }
            },
            { data: 'createdBy', name: 'created_by', visible: isAdmin },
            { data: 'created', name: 'start_date', className: "text-center" },
            { data: 'deactivated_on', name: 'end_date', className: "text-center", visible: showEndDate},
            { data: 'deactivatedBy', name: 'deactivated_by', visible: isAdmin && showEndDate },
            {
                data: null,
                searchable: false,
                sortable: false,
                className: 'text-center',
                visible: !showEndDate,
                render: function (data) {
                    let checked = (data.status === '1') ? 'checked' : '';

                    return '<label class="switch">' +
                            '<input data-id="' + data.id + '" data-status="' + data.status + '" name="service_slider" type="checkbox"' + checked +' class="js-status-col">' +
                            '<span class="slider round" title="Click to deactivate this call plan."></span>' +
                            '</label>'
                }
            },

HTML

            <table id="manage-tab-datatable" class="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th style="width: 400px">Name</th>
                        <th style="width: 100px">Price</th>
                        <th style="width: 75px">Minutes</th>
                        <th style="width: 75px">Discount</th>
                        <th>Created by</th>
                        <th class="text-center" style="width: 100px">Start date</th>
                        <th class="text-center" style="width: 100px">End date</th>
                        <th>Deactivated by</th>
                        <th>Visible to customers</th>
                        <th>Customer count</th>
                        <th class="text-center" style="width: 175px">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

The table displays fine as soon as I remove what I thought would work, and it also displays the slider fine as shown above, so I have no idea why it's not working, and there are no console errors either to help me

allan

return `<span>TO POPULATE<span>`;

is the way to do it. Then either add the row id to a queue that should be processed, or on each draw scan the table to see if there are any cells to be processed and add that to the queue.

The queue would then run, either as a batch, or individually, getting the data and calling row().data() (or perhaps cell().data()) to update the data as returned by the server. Assuming you are using the table in client-side processing mode, that would then allow it to be searched / sorted / etc.

If that isn't working, I'd need a link to a test case showing the issue to be able to try and help diagnose the issue.

You do hard to be careful doing this - make sure your queue isn't going to DDOS your own server with loads of requests every time someone loads your page.

Allan

murday1983

Link to demo

https://live.datatables.net/befujodu/3/edit

murday1983

Fixed. I had the following lines of code

    // table.column(6).search( '^$', true, false ).draw();
    table.column(7).search( '^$', true, false ).draw();

The commmented out one was my original line beofre the new column was to be added but instead of

    table.column(7).search( '^$', true, false ).draw();

I put '5' instead of $

    table.column(7).search( '^5', true, false ).draw();

But as i say there was not console error or error on screen

allan

'^$' means an empty string in regex. ^5 means starts with 5.

Good to hear you've got it working as you need now.

Allan