0

Alguien sabe como puedo paginar estos comentarios? he probado de todo...jquery, ajax, paginator, php...

<div class="comment-form-container">
            <form id="frm-comment">
                <div class="input-row">
                    <input type="hidden" name="comentario_id" id="commentId"
                           placeholder="Name" /> <input class="input-field"
                           type="text" name="name" id="name" placeholder="Nombres" />
                </div>
                <div class="input-row">
                    <textarea class="input-field" type="text" name="comment"
                              id="comment" placeholder="Agregar comentario">  </textarea>
                </div>
                <div>
                    <input type="button" class="btn-submit" id="submitButton"
                           value="Publicar Ahora" /><div id="comment-message">Comentario ha sido agregado exitosamente!</div>
                </div>
                <div style="clear:both"></div>
            </form>
        </div>
        <div id="output"></div>
        <script>
            var totalLikes = 0;
            var totalUnlikes = 0;

            function postReply(commentId) {
                $('#commentId').val(commentId);
                $("#name").focus();
            }

            $("#submitButton").click(function () {
                $("#comment-message").css('display', 'none');
                var str = $("#frm-comment").serialize();

                $.ajax({
                    url: "AgregarComentario.php",
                    data: str,
                    type: 'post',
                    success: function (response)
                    {
                        var result = eval('(' + response + ')');
                        if (response)
                        {
                            $("#comment-message").css('display', 'inline-block');
                            $("#name").val("");
                            $("#comment").val("");
                            $("#commentId").val("");
                            listComment();
                        } else
                        {
                            alert("Failed to add comments !");
                            return false;
                        }
                    }
                });
            });

            $(document).ready(function () {
                listComment();
            });

            function listComment() {
                $.post("ListaDeComentarios.php",
                        function (data) {
                            var data = JSON.parse(data);

                            var comments = "";
                            var replies = "";
                            var item = "";
                            var parent = -1;
                            var results = new Array();

                            var list = $("<ul class='outer-comment'>");
                            var item = $("<li>").html(comments);

                            for (var i = 0; (i < data.length); i++)
                            {
                                var commentId = data[i]['comentario_id'];
                                parent = data[i]['parent_comentario_id'];

                                var obj = getLikesUnlikes(commentId);

                                if (parent == "0")
                                {
                                    if(data[i]['like_unlike'] >= 1) 
                                    {
                                        like_icon = "<img src='img/MeGusta.png'  id='unlike_" + data[i]['comentario_id'] + "' class='like-unlike'  onClick='likeOrDislike(" + data[i]['comentario_id'] + ",-1)' />";
                                        like_icon += "<img style='display:none;' src='img/NoMeGusta.png' id='like_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",1)' />";
                                    }
                                    else
                                    {
                                           like_icon = "<img style='display:none;' src='img/MeGusta.png'  id='unlike_" + data[i]['comentario_id'] + "' class='like-unlike'  onClick='likeOrDislike(" + data[i]['comentario_id'] + ",-1)' />";
                                        like_icon += "<img src='img/NoMeGusta.png' id='like_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",1)' />";

                                    }

                                    comments = "\
                                        <div class='comment-row'>\
                                            <div class='comment-info'>\
                                                <span class='commet-row-label'>De</span>\
                                                <span class='posted-by'>" + data[i]['comment_sender_name'] + "</span>\
                                                <span class='commet-row-label'>a las </span> \
                                                <span class='posted-at'>" + data[i]['date'] + "</span>\
                                            </div>\
                                            <div class='comment-text'>" + data[i]['comment'] + "</div>\
                                            <div>\
                                                <a class='btn-reply' onClick='postReply(" + commentId + ")'>Responder</a>\
                                            </div>\
                                            <div class='post-action'>\ " + like_icon + "&nbsp;\
                                                <span id='likes_" + commentId + "'> " + totalLikes + " Me Gusta </span>\
                                            </div>\
                                        </div>";

                                    var item = $("<li>").html(comments);
                                    list.append(item);
                                    var reply_list = $('<ul>');
                                    item.append(reply_list);
                                    listReplies(commentId, data, reply_list);
                                }
                            }
                            $("#output").html(list);
                        });
            }

            function listReplies(commentId, data, list) {

                for (var i = 0; (i < data.length); i++)
                {

                    var obj = getLikesUnlikes(data[i].comentario_id);
                    if (commentId == data[i].parent_comentario_id)
                    {
                        if(data[i]['like_unlike'] >= 1) 
                        {
                            like_icon = "<img src='img/MeGusta.png'  id='unlike_" + data[i]['comentario_id'] + "' class='like-unlike'  onClick='likeOrDislike(" + data[i]['comentario_id'] + ",-1)' />";
                            like_icon += "<img style='display:none;' src='img/NoMeGusta.png' id='like_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",1)' />";

                        }
                        else
                        {
                         like_icon = "<img style='display:none;' src='img/NoMeGusta.png'  id='unlike_" + data[i]['comentario_id'] + "' class='like-unlike'  onClick='likeOrDislike(" + data[i]['comentario_id'] + ",-1)' />";
                         like_icon += "<img src='img/NoMeGusta.png' id='like_" + data[i]['comentario_id'] + "' class='like-unlike' onClick='likeOrDislike(" + data[i]['comentario_id'] + ",1)' />";

                        }
                        var comments = "\
                                        <div class='comment-row'>\
                                            <div class='comment-info'>\
                                                <span class='commet-row-label'>De </span>\
                                                <span class='posted-by'>" + data[i]['comment_sender_name'] + "</span>\
                                                <span class='commet-row-label'>a las </span> \
                                                <span class='posted-at'>" + data[i]['date'] + "</span>\
                                            </div>\
                                            <div class='comment-text'>" + data[i]['comment'] + "</div>\
                                            <div>\
                                                <a class='btn-reply' onClick='postReply(" + data[i]['comentario_id'] + ")'>Responder</a>\
                                            </div>\
                                            <div class='post-action'> " + like_icon + "&nbsp;\
                                                <span id='likes_" + data[i]['comentario_id'] + "'> " + totalLikes + " Me Gusta </span>\
                                            </div>\
                                        </div>";

                        var item = $("<li>").html(comments);
                        var reply_list = $('<ul>');
                        list.append(item);
                        item.append(reply_list);
                        listReplies(data[i].comentario_id, data, reply_list);
                    }
                }
            }

            function getLikesUnlikes(commentId)
            {

                $.ajax({
                    type: 'POST',
                    async: false,
                    url: 'Envio_MeGusta.php',
                    data: {comentario_id: commentId},
                    success: function (data)
                    {
                        totalLikes = data;
                    }

                });

            }


           function likeOrDislike(comentario_id,like_unlike)
            {

                $.ajax({
                    url: 'MeGusta_NoMeGusta.php',
                    async: false,
                    type: 'post',
                    data: {comentario_id:comentario_id,like_unlike:like_unlike},
                    dataType: 'json',
                    success: function (data) {

                        $("#likes_"+comentario_id).text(data + " likes");

                        if (like_unlike == 1) { 
                            $("#like_" + comentario_id).css("display", "none");
                            $("#unlike_" + comentario_id).show();
                        }

                        if (like_unlike == -1) {
                            $("#unlike_" + comentario_id).css("display", "none");
                            $("#like_" + comentario_id).show();
                        }

                    },
                    error: function (data) {
                        alert("error : " + JSON.stringify(data));
                    }
                });
            }



        </script>
    //evitamos el comportamiento por defecto de los links
    $(document).on("click", "a", function(e){
        e.preventDefault();    
    })

    function paginate(offset, limit)
    {
        //obtenemos los posts via get con jQuery
        $.get("data.php/?offset=" + offset + "&limit=" + limit, function(data){
            if(data)
            {
                $html = "";
                //parseamos el json
                json = JSON.parse(data);
                //lo recorremos e insertamos en la variable $html
                for(datos in json.comentario)
                {
                    var datad= json.posts[datos].cuerpo;
                    $html += "<div class='panel'>";
                    /*$html += "<p>Id: " + json.posts[datos].id + "</p>";*/
                    $html += "<p>comentario: " + json.comentario[datos].comentario + "</p>"; 
                    $html += "<p>parent_comentario_id: " + json.tbl_comment[datos].parent_comentario_id + "</p>";
                    $html += "<p>Respuesta: " + datad.substr(0,80) + "</p>";
                    $html += "</div>";
                }


                $(".paginacion").html("");
                $(".paginacion").html($html);
                //cargamos los links en el div links
                $(".links").html("");
                $(".links").html(json.links);

                //hacemos una sencilla animacion
                $(document.body).animate({opacity: 0.3}, 400);
                $("html, body").animate({ scrollTop: 0 }, 400);
                $(document.body).animate({opacity: 1}, 400);        
            }
        })
    }

    //al cargar la página llamamos a la función paginate
    $(window).bind("load", function(){
        paginate();
    })
4
  • Aquí está muy bien explicado: jose-aguilar.com/blog/paginacion-resultados-con-php
    – Arngue
    Commented el 22 jun. 2018 a las 12:29
  • @Arngue ya lo probé en su momento y no me funciona...imagino que es por tema de Mysqli, gracias de todas formas Commented el 22 jun. 2018 a las 15:27
  • ninguna idea? ...sigo probando tutoriales y nada...no consigo que se muestren.... Commented el 27 jun. 2018 a las 20:16
  • Hola de nuevo. He estado probando este paginador jose-aguilar.com/blog/paginacion-jquery-ajax-php de jose Aguilar varias veces y el otro me me recomendo @Arngue....pero o me da error de sintaxis o directamente no me muestra resultados....¿Como lo veis?. Commented el 3 jul. 2018 a las 20:41

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.