Как использовать Jquery Datatables Ellipsis рендерера для кнопки ссылки на поле шаблона?

Question

Когда я использую это с Asp-bound field, оно отлично работает

внешний вид column один Ellipsed

Но при использовании на template field link button он возвращает пустое значение

вижу, что это пустое значение. Я не знаю, что мне делать, чтобы применить то же самое к полям столбцов кнопки ссылки.

my script для Eclipsed

function pageLoad() {
            var table = $('#gvTest  ').DataTable({
                select: true,
                pageLength: 15,
                lengthChange: false,
                scrollY: "400px",
                scrollX: true,
                scrollCollapse: false,
                order: [15],
                fixedColumns: true,
                columnDefs: [ 
                    { targets: 0, render: $.fn.dataTable.render.ellipsis(7, true) },
                    { targets: 1, render: $.fn.dataTable.render.ellipsis(10, true) },                        
                 ],
                fixedColumns:   {
                    leftColumns: 1,
                }
            });
            $('#BtnReport').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
                });
                var suid = ids;
                var usr = document.getElementById("lblUser").innerText;
                var url2 = "/report/FinalizedReport.aspx?UID=" + suid + "&" + "user=" + usr;
                window.open(url2, '_blank');
                 return false;
            });
            $('#btnAssign').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                 var usr = document.getElementById("lblUser").innerText;
                var url2 = "/PatientAssignment/PatientAssignPage.aspx?UID=" + suid + "&" + "user=" + usr;
                window.location.assign(url2);
                 return false;
            });
             $('#btnAttach').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var arun = ids;
                if (arun) {
                 var width = 700;
                 var height = 350;
                 var left = (screen.width - width) / 2;
                 var top = (screen.height - height) / 2;
                 var params = 'width=' + width + ', height=' + height;
                 params += ', top=' + top + ', left=' + left;
                 params += ', directories=no';
                 params += ', location=no';
                 params += ', menubar=no';
                 params += ', resizable=no';
                 params += ', scrollbars=no';
                 params += ', status=no';
                 params += ', toolbar=no';
                 var strWindowFeatures = params;
                 var URL = "/Attachment/PatientAttachmentPage.aspx?";
                 var usr = document.getElementById("lblUser").innerText;
                 URL = URL + "pattUID=" + arun + "&" + "user=" + usr; +"&" + "url=" + location.href;
                 var win = window.open(URL, "_blank", strWindowFeatures);
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
             $('#btnHistory').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var arun = ids;
                if (arun) {
                 var width = 700;
                 var height = 350;
                 var left = (screen.width - width) / 2;
                 var top = (screen.height - height) / 2;
                 var params = 'width=' + width + ', height=' + height;
                 params += ', top=' + top + ', left=' + left;
                 params += ', directories=no';
                 params += ', location=no';
                 params += ', menubar=no';
                 params += ', resizable=no';
                 params += ', scrollbars=no';
                 params += ', status=no';
                 params += ', toolbar=no';
                 var strWindowFeatures = params;
                 var URL = "/History/WriteHistory.aspx?";
                 var usr = document.getElementById("lblUser").innerText;
                 URL = URL + "pattUID=" + arun + "&" + "user=" + usr; +"&" + "url=" + location.href;
                 var win = window.open(URL, "_blank", strWindowFeatures);
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
              $('#btnEmergency').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                  if (suid) {
                      document.getElementById("pattUID").value = suid;
                      $('#hdnEM').trigger('click');
                      return false;
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
            $('#btnRemoveEm').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                  if (suid) {
                      document.getElementById("pattUID").value = suid;
                      $('#hdnREM').trigger('click');
                      return false;
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
            $.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
    var esc = function ( t ) {
        return t
            .replace( /&/g, '&' )
            .replace( /</g, '&lt;' )
            .replace( />/g, '&gt;' )
            .replace( /"/g, '&quot;' );
    };

    return function ( d, type, row ) {
        // Order, search and type get the original data
        if ( type !== 'display' ) {
            return d;
        }

        if ( typeof d !== 'number' && typeof d !== 'string' ) {
            return d;
        }

        d = d.toString(); // cast numbers

        if ( d.length < cutoff ) {
            return d;
        }

        var shortened = d.substr(0, cutoff-1);

        // Find the last white space character in the string
        if ( wordbreak ) {
            shortened = shortened.replace(/\s([^\s]*)$/, '');
        }

        // Protect against uncontrolled HTML input
        if ( escapeHtml ) {
            shortened = esc( shortened );
        }

        return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
    };
};
         }

ниже мой вид сетки

<asp:GridView  ID="gvTest" Width="100%" runat="server"  CssClass="display" AutoGenerateColumns="False" >
   <Columns>
     <asp:BoundField  DataField="PatientID"  HeaderText="Patient ID" >
     </asp:BoundField>
     <asp:TemplateField   HeaderText="Patient Name" SortExpression="PatientName">
    <ItemTemplate  >                
       <asp:LinkButton  ID="lnkVwr"   Text='<%#Eval("PatientName") %>'   OnClientClick = "return imgViewer(this)"  runat="server"    ></asp:LinkButton
       </ItemTemplate>
       </asp:TemplateField>
    </Columns>
 </asp:GridView>

Как я могу использовать это в поле кнопки ссылки?Есть ли способ сделать это?

Answer 1

Ссылка в GridView должна выглядеть следующим образом

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

Но после Ellipsis она выглядит такнеудивительно, что браузер не знает, что с ним делать.

Кроме того, кажется, что эта функция ничего не делает или не вызывается:

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

ВзятьПосмотрите на этой странице, как это делается https://datatables.net/blog/2016-02-26

Я сделал следующий фрагмент.Он проверяет, присутствует ли href в строке, и, если есть, пропускает обрезку строки.

<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>