how to use Jquery Datatables Ellipsis renderer for template field link button?

Question

When I am using that with Asp-bound field it\'s working perfectly

look column one is Ellipsed

But when using

Answer 1

A link in the GridView should look like this

<a onclick="return imgViewer(this);" id="lnkVwr" href="javascript:__doPostBack(&#39;ctl00$gvTest$ctl11$lnkVwr&#39;,&#39;&#39;)">VDWWD</a>

But after Ellipsis it looks like this

<span class="ellipsis" title="<a onclick=&quot;return imgViewer(this);&quot; id=&quot;lnkVwr&quot; href=&quot;javascript:__doPostBack('ctl00$gvTest$ctl11$lnkVwr','')&quot; style=&quot;color:#000000!important&quot;>VDWWD</a>"><a&#8230;< span=""></a&#8230;<></span>

As you can see it made a complete mess of the HTML and it's no wonder the browser does not know what to do with it.

On top of that it seems that this function doesn't do anything or does not gets called:

.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml )

Take a look on this page how it is done https://datatables.net/blog/2016-02-26

I made the following snippet. It checks if an href is present in the string and if there is, skips the trimmming of the string.

<script type="text/javascript">
    function pageLoad() {
        var table = $('#gvTest').DataTable({
            fixedColumns: true,
            columnDefs: [
                { targets: 0, render: $.fn.dataTable.render.ellipsis() },
                { targets: 1, render: $.fn.dataTable.render.ellipsis() },
            ],
        });
    }

    $.fn.dataTable.render.ellipsis = function () {
        return function (data, type, row) {
            if (type !== 'display') {
                return data;
            }

            if (data.length > 10 && !data.includes("href")) {
                return data.substr(0, 10) + '…';
            } else {
                return data;
            }
        }
    };
</script>