javascript - 拆分附加表(JQuery或JavaScript)

我要追加表，我希望它在一个表上仅显示4个信任关系，我希望能够像旋转木马一样在表中向左或向右滚动。

是否有人对此有任何建议？ （请不要额外的插件）

我想要的例子：


幻灯片/页面1-信任1，信任2，信任3，信任4
幻灯片/页面2-信任5，信任6，信任7，信任8
幻灯片/页面3-信任9，信任10，信任11，信任12


我的代码：

    var trustIDCount = '';
    var trustData = '[{"trustName":"University Hospitals of Morecambe Bay"},' +
                 '{"trustName":"Taunton and Musgrove"},'+
                 '{"trustName":"St Georges Healthcare"},'+
                 '{"trustName":"The Rotherham"},'+
                 '{"trustName":"City Hospitals Sunderland"},'+
                 '{"trustName":"Bradford District Care Trust"},'+
                 '{"trustName":"Cental Manchester Foundation Trust"},'+
                 '{"trustName":"Kingston Hospital"},'+
                 '{"trustName":"Nottingham University Hospital"},'+
                 '{"trustName":"Nottingham Health Informatics"},'+
                 '{"trustName":"Tameside Hospital"},'+
                 '{"trustName":"Your Healthcare"},'+
                 '{"trustName":"Hull and East Yorkshire"},'+
                 '{"trustName":"Doncaster and Bassettlaw"},'+
                 '{"trustName":"Wigan Wrightington and Leigh"},'+
                 '{"trustName":"Barnsley Hospital NHS Foundation Trust"},'+
                 '{"trustName":"Cornwall Partnership NHS Foundation Trust"},'+
                 '{"trustName":"Birmingham Childrens"},'+
                 '{"trustName":"Pennine Acute Hospital Trust"},'+
                 '{"trustName":"CarePlus Grp"},'+
                 '{"trustName":"Imperial College Healthcare NHS Trust"},'+
                 '{"trustName":"Cumbria CCG"},'+
                 '{"trustName":"Poole Borough Council"},'+
                 '{"trustName":"InHealth"},'+
                 '{"trustName":"Bridgewater Community Healthcare NHS Foundation Trust"},'+
                 '{"trustName":"University Hospitals Coventry and Warwickshire NHS Trust"},'+
                 '{"trustName":"Royal London Borough of Greenwich"},'+
                 '{"trustName":"Urgent Care 24"}]';

    var trHTML = '';

    $.each(JSON.parse(trustData), function (i, item)
    {
        trustIDCount++;
        trHTML += '<tr id=' + trustIDCount + ' class="trClass"><td>' + '<div class="imageWrapper"></div>' + '<div class="textWrapper">' + item.trustName + '</div>' + '</td>';
    });
    $('#trustTable').find("tbody").html(trHTML);

#trustTable
{
  width: 100%;
}

.trClass
{
    direction:rtl;
    float:left;
    width: 20%;
    margin-left: 5%;
}

.imageWrapper
{
    height: 30px;
    width: 75px;
    float: right;
    margin-bottom: 5px;
    clear:both;
    border: 1px solid red;
}

.textWrapper
{
    height: 75px;
    font-size: 14px;
    font-weight: bold;
    clear:both;
    text-align: right;
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="trustTable">
  <tbody>

  </tbody>
</table>

最佳答案

如果我对您的理解正确，那么您希望每页拥有4种信任。以及导航到下一页或上一页的方法。

这意味着您需要记住当前的页码以及根据用户的导航选择来增加或减少该值的机制。根据当前页面的值，您需要用每页仅4个信任关系装饰页面（除非在最后一页上，信任关系可能少于4个，具体取决于信任的总数）。

这是a fiddle给您一个想法：并一起玩。

function previous(){
    if (currentPage>0){
        currentPage --;
        showTable();
    }
}

function next(){
    if (currentPage<Math.floor(htmlArray.length/4) - 1){
        currentPage ++;
        showTable();
    }
}

function showTable(){
    var trHTML = '';
    for (var i=0; i<4; i++){
       trHTML = trHTML + htmlArray[currentPage * 4 + i];
    }
    $('#trustTable').find("tbody").html(trHTML);

}

...

    var htmlArray = new Array();

var currentPage = 0;
    $.each(JSON.parse(trustData), function (i, item)
    {
        trustIDCount++;
//        trHTML += '<tr id=' + trustIDCount + ' class="trClass"><td>' + '<div class="imageWrapper"></div>' + '<div class="textWrapper">' + item.trustName + '</div>' + '</td>';
        htmlArray.push('<tr id=' + trustIDCount +
                       ' class="trClass"><td>' + '<div class="imageWrapper"></div>' + '<div class="textWrapper">' + item.trustName + '</div>' + '</td>');
    });
   // $('#trustTable').find("tbody").html(trHTML);

$("#prev").click(previous);
$("#next").click(function(){next();});

showTable();

__更新__

function next(){
    if (currentPage<Math.floor(htmlArray.length/4) - 1){
        currentPage ++;
    } else {
        currentPage = 0;
    }
    showTable();
}