拆分附加表(JQuery或JavaScript)

Question

我在表的后面，我想让它在一张表上只显示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>

​

Answer 1

如果我正确地理解了你，你希望每页有4个信托基金。一种导航到下一页或前一页的方法。

这意味着您需要记住当前的页码以及根据用户的导航选择来增加或减少该值的机制。根据当前页面值的不同，您需要用每个页面只使用4个信任来修饰页面(除非在最后一个页面上，根据信任的总数，页面上的信任可能少于4个)。

这里是小提琴给你一个想法:和玩。

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();

__UPDATE__

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