drawCallback with multiple values

menashe

I am using the JsBarCode plugin, which works on an element--which obviously must be defined!

Therefore, in my table column definitions, I have:

                    {
                        className: 'dt-head-center dt-body-right upc',
                        title: 'UPC',
                        data: 'packaging.upc_ean',
                        render: function(data, type, row, meta) {
                            return '<img id=barcode />'
                        }
                    },

I use drawCallback, which is called after the table has been laid out and therefore id=barcode exists.

However, drawCallback runs just once; therefore, as can be seen below, only the first UPC is formatted. I have included the actual UPC to show that they are actually different.

How can I drawCallback (or another event) to cycle through all of the UPC values as needed?

kthorngren

drawCallback executes each time Datatables draws the table, for example anytime search, sort or paging is executed. I believe the problem is you are placing multiple elements with the same id on the page. The id is to be unique on the page. Try using a class instead, something like this:

return '<img class="barcode" />'

Then us .barcode as your selector in the drawCallback.

Kevin

menashe

I'm not sure that I understand. I replaced

id="barcode"

with

class="barcode"

I'm not sure where to use a selector.

This is my drawCallback:

            drawCallback: function(settings) {
                let format;

                let api = this.api();
                let data = api.row().data();
                let upc_ean = data.packaging.upc_ean;

                switch (upc_ean.length) {
                    case 8:
                        document.querySelector('.modal-title').innerHTML = "EAN-8";
                        format = "ean8";
                        break;
                    case 12:
                        document.querySelector('.modal-title').innerHTML = "UPC";
                        format = "upc";
                        break;
                    case 13:
                        document.querySelector('.modal-title').innerHTML = "EAN-13 (GTIN-13)";
                        format = "ean13";
                        break;
                }

                JsBarcode(".barcode", upc_ean, {
                    // background: "#ccffff",
                    font: "bold",
                    fontSize: 15,
                    format: format,
                    height: 20,
                    margin: 5,
                    width: 1,
                });
            }

menashe

This is what it looks like in Dev Tools.

Do I need to iterate over all of the <tr> tags?

kthorngren

See if this example from this thread helps. If not please build a test case showing what you have so we can help debug.

Basically the solution will find all elements with the class barcode on the current page and apply JsBarcode to them. You don't need to iterate all the rows.

Note that -event draw and drawCallabck are essentially the same and you can continue to use drawCallback.

Kevin

menashe

Indeed, it did!!

(I see what my mistake was--using the variable "upc_ean", which did not change!)

THANK YOU!