php - script - server side processing codeigniter

Crear un enlace de leer más dentro de la función de renderizado JQuery Datatables

Question

He estado usando este código de JavaScript para agregar un enlace de leer más a los contenidos extraídos de la base de datos dentro de un ciclo:

<script type="text/javascript">
//continue reading
$(document).ready(function() {
    var showChar = 300;
    var ellipsestext = "...";
    var moretext = "continue reading";
    var lesstext = "collapse";
    $(''.more'').each(function() {
        var content = $(this).html();
        if(content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);
            var html = c + ''<span class="moreellipses">'' + ellipsestext+ ''&nbsp;</span><span class="morecontent"><span>'' + h + ''</span>&nbsp;&nbsp;<a href="" class="morelink">'' + moretext + ''</a></span>'';
            $(this).html(html);
        }
    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
</script>

CSS

a.morelink {
    text-decoration:none;
    outline: none;
 }
 .morecontent span {
    display: none;
 }

Y todo lo que siempre tuve que hacer fue, por ejemplo:

    <?php 
    $posts = $this->db->get_where(''posts'', array(''display'' => ''true''))->result_array();     
    foreach ($posts as $p) { ?>
        <div class="more"> <?php echo $p[''comment'']; ?></div>
        <hr/>
    <?php } ?> 

... y siempre funciona.

Ahora, estoy usando Jquery Datatables para mostrar los comentarios de mi tabla de base de datos con el procesamiento del lado del servidor. También estoy usando la función de renderizado para formatear los datos antes de la visualización. Tengo esto:

<script type="text/javascript">
    "columnDefs": [
            { "targets": [1, 2, 3, 4, 5], className: "dt-hide-column" }, //hide columns, show all data inside first column - full[0] 
            { 
                "targets": [0],
                "orderable": false,
                "render": function ( data, type, full ) {
                    return ''<div class="panel panel-default">'' +
                    ''<div class="panel-heading">'' +
                    ''<div class="row">'' +
                    ''<div class="col-md-1">'' +
                    full[1] +                   
                    ''</div>'' +  
                    ''<div class="col-md-11">'' +        
                    ''<span style="color: black"> Commented by: </span>'' +                    
                    full[2] + ''<br/>'' +         
                    full[3] + '' ('' + full[4] + '')'' +
                    ''</div>'' +
                    ''</div>'' +
                    ''</div>'' +                  
                    ''<div class="panel-body">'' + 
                    ''<div class="more">'' + //this is where I want the action performed 
                    full[5] + //the comment
                    ''</div>'' +                  
                    ''</div>'';
                    ''</div>'';
                }
            }
    ]
</script>

Como de costumbre, quiero truncar el comentario a 300 caracteres al cargar la página con un enlace ''continuar leyendo'' adjunto para que al hacer clic, se muestre el comentario completo. Me sorprendió cuando no funcionó como se esperaba. Muestra todos los comentarios y no muestra ningún enlace de "continuar leyendo", aunque los caracteres en los comentarios fueron más de 300. Por mi vida, no puedo entender por qué. Aunque soy nuevo en JS. Por favor, ¿alguien sería tan amable de indicarme la dirección correcta? Nota: uso el marco de Code Igniter, si fuera importante. EDITAR RÁPIDAMENTE: tengo la función de continuar leyendo en mi encabezado y el estilo en un archivo CSS.

Answer 1

Puedes referir este código

$(function() {

  var minimized_elements = $(''p.minimize'');

  minimized_elements.each(function() {
    var t = $(this).text();
    if (t.length < 100) return;

    $(this).html(
      t.slice(0, 100) + ''<span>... </span><a href="#" class="more">More</a>'' +
      ''<span style="display:none;">'' + t.slice(100, t.length) + '' <a href="#" class="less">Less</a></span>''
    );

  });

  $(''a.more'', minimized_elements).click(function(event) {
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show();
  });

  $(''a.less'', minimized_elements).click(function(event) {
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();
  });

});