Ajax / Php: предварительный просмотр видео из базы данных с помощью кнопок Next / prev

Question

Надеюсь, у вас все отлично!

Я хочу просматривать видео (по одному за раз) из базы данных на моем веб-сайте и перемещаться по ним с помощью следующих / предыдущих кнопок.Я использую этот код отсюда - https://makitweb.com/ajax-pagination-with-jquery-and-php/ - для распечатки данных из моей базы данных, и он хорошо работает для текстовых деталей (позже я добавлю источник в тег с именем видео, чтобы получить его на плеере), но Проблема в том, что этот скрипт печатает все данные в одну строку, и мне нужно, чтобы они были разделены.В этом случае я смогу поместить эти данные в разные div. Я довольно новичок в ajax / php, поэтому у меня есть вопрос, есть ли способ заставить его печатать данные отдельно, а не как 1 элемент (Роу в этой ситуации)?Я предоставлю скриншот для уточнения: Изображение

Демонстрация в реальном времени (веб-сайт): 141.136.44.131

141.136.44.131 / загрузка.php форма, которая загружает видео в базу данных и папку «content».

HTML-файл (форма, которую я сейчас имею для распечатки деталей): Index.php

<div id="content">
<table width="100%" id="emp_table" border="0">
    <tr class="tr_header">
        <th>Employee id</th>
        <th>Employee Name</th>
        <th>Salary</th>
    </tr>
</table>

<div id="div_pagination">
<input type="hidden" id="txt_rowid" value="0">
<input type="hidden" id="txt_allcount" value="0">
<input type="button" class="button" value="Previous" id="but_prev" />

<input type="button" class="button" value="Next" id="but_next" />
</div>

HTML-файл (форма, в которой будут размещены подробности): index.php

  <!-- PROJECTS -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 padding-R"></div>
    </div>
    <div class="row">
      <div class="col-md-2 side-projects"></div>
      <div class="col-md-10 bg-projects"></div>
    </div>
    <div class="row">
      <div class="col-md-2 side-projects">
        <h1 class="side-projects-text"><b>PROJECTS</b></h1>
      </div>
      <div class="col-md-4 bg-projects">
        <div class="outline">

         <input type="hidden" id="txt_rowid" value="0">
           <input type="hidden" id="txt_allcount" value="0">
          <video id="videoPlayer" class="video" poster="content/projects-1.jpg" preload="none">
            // SOURCE FOR VIDEO FROM DB BY VIDEOS NAME
            <source src="content/The Pretty Reckless - Cold Blooded.mp4" type="video/mp4">
            <source src="content/The Pretty Reckless - Cold Blooded.mp4" type="video/ogg">
          </video>
          <h3 class="service-names"><a href="javascript:delay('music-video-clip.php')"><b class="text-button">MUSIC
                VIDEO CLIP</b></a></h3>
        </div>
      </div>
      <div class="col-md-4 text-padding bg-projects">
        // PROJECT NAME FROM DB
        <h2><b>The Pretty Reckless - Cold Blooded</b></h2>
        // PROJECT DESCRIPTION FROM DB
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium, est sed porta aliquam,
          ipsum augue imperdiet lorem, ut dignissim arcu dolor in purus. Donec non metus eget ipsum sollicitudin
          porttitor ut pellentesque enim. Donec pretium varius felis non sodales. Orci varius natoque penatibus et
          magnis dis
          parturient montes, pretium varius felis non sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="col-md-12">
          <div class="row text-button-padding">
            <input type="button" class="text-button" value="Previous" id="but_prev" />
            <input type="button" class="text-button" value="Next" id="but_next" />
            <input type="hidden" id="txt_rowid" value="0">
            <input type="hidden" id="txt_allcount" value="0">
          </div>
        </div>
      </div>
      <div class="col-md-2 bg-projects"></div>
    </div>
    <div class="row">
      <div class="col-md-2 side-projects"></div>
      <div class="col-md-10 bg-projects"></div>
    </div>
  </div>

PHP-файл: getEmployeeInfo.php

<?php
include "config.php";

/* Getting post data */
$rowid = $_POST['rowid'];
$rowperpage = $_POST['rowperpage'];

/* Count total number of rows */
$query = "SELECT count(*) as allcount FROM employee";
$result = mysqli_query($con,$query);
$fetchresult = mysqli_fetch_array($result);
$allcount = $fetchresult['allcount'];

/* Selecting rows */
$query = "SELECT * FROM employee ORDER BY id ASC LIMIT ".$rowid.",".$rowperpage;

$result = mysqli_query($con,$query);

$employee_arr = array();
$employee_arr[] = array("allcount" => $allcount);

while($row = mysqli_fetch_array($result)){
    $empid = $row['id'];
    $empname = $row['emp_name'];
    $salary = $row['salary'];

    $employee_arr[] = array("empid" => $empid,"empname" => $empname,"salary" => $salary);
}

/* encoding array to json format */
echo json_encode($employee_arr);

Файл сценария Ajax:

    <script type="text/javascript">
    // Total number of rows visible at a time
    var rowperpage = 5;
    $(document).ready(function(){
        getData();

        $("#but_prev").click(function(){
            var rowid = Number($("#txt_rowid").val());
            var allcount = Number($("#txt_allcount").val());
            rowid -= rowperpage;
            if(rowid < 0){
                rowid = 0;
            }
            $("#txt_rowid").val(rowid);
            getData();
        });

        $("#but_next").click(function(){
            var rowid = Number($("#txt_rowid").val());
            var allcount = Number($("#txt_allcount").val());
            rowid += rowperpage;
            if(rowid <= allcount){
                $("#txt_rowid").val(rowid);
                getData();
            }

        });
    });
    /* requesting data */
    function getData(){
        var rowid = $("#txt_rowid").val();
        var allcount = $("#txt_allcount").val();

        $.ajax({
            url:'getEmployeeInfo.php',
            type:'post',
            data:{rowid:rowid,rowperpage:rowperpage},
            dataType:'json',
            success:function(response){
                createTablerow(response);
            }
        });

    }
    /* Create Table */
    function createTablerow(data){

        var dataLen = data.length;

        $("#emp_table tr:not(:first)").remove();

        for(var i=0; i<dataLen; i++){
            if(i == 0){
                var allcount = data[i]['allcount'];
                $("#txt_allcount").val(allcount);
            }else{
                var empid = data[i]['empid'];
                var empname = data[i]['empname'];
                var salary = data[i]['salary'];

                /* This is is the place where they get printed in HTML file */
                $("#emp_table").append("<tr id='tr_"+i+"'></tr>");
                $("#tr_"+i).append("<td align='center'>"+empid+"</td>");
                $("#tr_"+i).append("<td align='left'>"+empname+"</td>");
                $("#tr_"+i).append("<td align='center'>"+salary+"</td>");
            }
        }
    }
</script>

Извините за этот чрезвычайно длинный запрос!Я надеюсь, что вы можете помочь мне с этим!:)