How to create a custom render helper

Smaele

I am trying to create a custom render helper but can't get it to work. I hope you can help out.

I am using Datatables with an Ajax datasource. I followed the examples and documentation from the renderers manual, the plug-in documentation and the blog article about the ellipsis renderer. Somehow it doesn't want to work. What am I missing here?

My datatables full code (the name colums calls the custom render helper):

$(function () {
    "use strict";

$("#tbl-backlogs").DataTable({
        language: {url: "http://localhost/ci-workbench/assets/plugins/datatables/language/dutch.json"},
        dom:"t",
        order:[1,"asc"],
        paging:false,
        info:false,
        searching:true,
        ajax: {
            url: "http://localhost/ci-workbench/backlogs/list",
            dataSrc: "data"
        },
        columns: [
            {data: "id", visible:false, searchable:false},
            {data: "name", 
                render: $.fn.dataTable.render.ellipsis(10)
            },
            {data: "shortname"},
            {data: "created", searchable:false,
                render: function (data, type, row) {
                    switch (type) {
                        case "display":
                        case "filter":
                            return data;
                        default:
                            var d = new Date(data);
                            return d.getTime();
                    }
                }
            },
            {data: "updated", searchable:false,
                render: function (data, type, row) {
                    switch (type) {
                        case "display":
                        case "filter":
                            return data;
                        default:
                            var d = new Date(data);
                            return d.getTime();
                    }
                }
            },
            {data: null, searchable:false, orderable:false, 
                render: function (data, type, row) {
                    var action = 
                        '<button class="btn btn-tool" id="btn-backlog-edit" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><i class="la la-lg la-cog"></i></button>' + 
                        '<button class="btn btn-tool" id="btn-backlog-archive" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><i class="la la-lg la-archive"></i></button>';
                    return (action);
                }
            }
        ],
        drawCallback: function(settings) {
            $('[data-toggle="tooltip"]').tooltip({delay:{show:500, hide:0}});
            $("#txtTableInfo").html("<b>Aantal backlogs: </b>" + $("#tbl-backlogs").DataTable().page.info().recordsDisplay);
        }
    });

    // TABLE CUSTOM RENDER HELPER ELLIPSIS...
    $.fn.dataTable.render.ellipsis = function ( cutoff ) {
        return function ( data, type, row ) {
            return type === "display" && data.length > cutoff ? data.substr( 0, cutoff ) + "�" : data;
        }
    };

});

Thank you for Datatables and your help.

Sincerely,
Gerard

colin

You're adding ellipsis after you declare the table, try moving it before.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Smaele

Hello Colin,

Thank you, that was it! It is working now.

Sincerely Gérard