JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<button id="back">back</button><button id="next">next</button><br/>
<p id="pageinfo"></p>
<div id="main"></div>

CSS

.entry{
    width: 600px;
    height:40px;
    background-color:#333;
    padding:5px;
    margin:2px;    
    border:1px solid #111;
    box-shadow: 0 0 20px #111;
    white-space: nowrap;
    overflow:hidden;
    color:white;
}
#main{
    //background-color:red;
    //width:800px;
    //height:200px;
}

button{
    width:200px;
}

div.entry:hover{
    background-color:#ddd;
    color:black;

}
.entry img{
    height:40px;
    vertical-align:text-top;
    float:left;
    margin-right:5px;
    display:block;
    border:1px solid black;
}
.title{
    #background-color:red;
    padding:2px;
    font-size:0.7em;
            overflow:hidden;
    text-overflow: ellipsis;
}
.info{
    position:apsolute;
    top:25px;
    #background-color:green;
    padding:2px;
    font-size:0.7em;
    width:90%;
    overflow:hidden;
    text-overflow: ellipsis;
}
.edit{
    width:20px;
    height:40px;
    background-color:#489;
    border:1px solid #111;
    float:right;    
}
.edit:hover{
    background-color:orange;
}

JavaScript

var serviceurl = "http://mywidget.tv/teka/";
var cmd = "get.php";
var movlist = null;
var curpage = 1;
var maxpage = 1;

jQuery(document).ready(function($) {
    requestPage();
    
    $("#back").click(function(){  
        //alert("back");
        
        if( (curpage-1) > 0 ){
            curpage-=1;
            requestPage();
        }
    });
    $("#next").click(function(){
        //alert("next");
        if( (curpage+1) < maxpage ){
            curpage+=1;
            requestPage();
        }
    });
});


function requestPage(){
    $("#main").empty();
    $.get( serviceurl + cmd + "?page="+curpage , function( list ){
        //alert( list.page );
        maxpage = parseInt( list.total/list.count );
        $("#pageinfo").html( (list.page-1)*list.count + " - "+ list.page*list.count + " / " + list.total  );
        movlist = list.rows;
        //alert(movlist.length);
        for ( var idx in movlist ){
            addRow( movlist[idx] );
        }

    }).error( function( xj, status, info){
        alert(  serviceurl+ cmd + status + info);
    });
}

function addRow( obj ){
    
    var line = '<div class="entry"><span class="edit"></span><img src="' + serviceurl + obj.poster + '"/><div><div class="title">'+ obj.name + ' ( '+ obj.name_orig +' )</div><div class="info"> <b>Год:</b> '+ obj.year + ' <b>Жанр:</b> '+  obj.genre_str + '</div><div></div>';
    $("#main").append( line  );
   
}