How to set a default render function for the responsive extension?

Andrew1178

I have a function which I would like to use for all my datatables with the responsive extension but I don't know how to set the default.

Function looks like this:

  $.fn.dataTable.Responsive.renderer.customRender = function (api, rowIdx, columns) {
        var tableHTML = "<table class='datatables-detail-modal'><tbody>"
        var data = $.map(columns, function (col, i) {
            var title = col.title === "" ? col.title : col.title + ":";
            return '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                '<td>' + title + '</td> ' +
                '<td>' + col.data + '</td>' +
                '</tr>';
        }).join('');

        tableHTML += data;
        tableHTML += "<tbody /><table />"


        return tableHTML;

And when I initialise my datatables with the responsive extension it looks like this:

  responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function (row) {
                        var data = row.data();
                        return 'Details for TransNo: ' + data.TransNo;
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.customRender(api, rowIdx, columns)
            }
        },

But this isn't the correct way to set the default as it says api is undefined. Does anyone know how I use this default?

allan

$.fn.dataTable.Responsive.defaults.details.renderer is the way to set the default details renderer.

Allan