Как реализовать нумерацию Bootstrap? - PullRequest
Новая
       16

Как реализовать нумерацию Bootstrap?

0 голосов
/ 09 мая 2019

Я использую загрузочные лунки для динамического отображения данных.Данные поступают от объекта JSON.Я хочу показывать только 5 элементов за раз на странице и отдыхать в форме начальной загрузки.Как реализовать это, используя только Bootstrap и Javascript? 

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row"  id="table"></div>
        </div>
    </body>
    <script>
        var inci = [];
        var arrayOfObjects = [{"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"}, {"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"},
{"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"},
{"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"},
{"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"},
{"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"},
{"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"},
{"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"},
{"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"},
{"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"},
{"id":28,"Title":"Sweden","desc":"fgn","assign_grp":"dADv"}];
        for (i = 0; i < arrayOfObjects.length; i++) {
            var a ='<div class="col-xs-2 col-sm-6 col-md-6 col-lg-4" style="margin-top: 1em; font-size: 13px;">';
            a += '<div  class="well" style="background-color: #cce6ff; box-shadow: 1px 1px 1px 1px silver; border: solid 1px #4dc3ff; word-wrap:word-break; border-radius: 8px; padding:10px !important;">';
            a += '<table id="incTb" class="table borderless" style="word-wrap: word-break; margin-bottom: 5px !important; background-color: #cce6ff !important; box-shadow: none !important; border: none; opacity: 1; box-shadow: none !important;"><colgroup><col style="width:30%"/><col style="width:70%"/></colgroup>';
            a += '<tbody><tr><td style="font-weight:bold; font-size:14px;">' + name[i].id + '</td><td></td></tr><tr><td style="color: blue;">Status</td>' + '<td>' + name[i].title +'</td>' + '</tr><tr><td style="color: blue;">Description</td><td>'+ name[i].desc + '</td></tr><tr><td style="color: blue;">Approval</td>' + '<td>' + name[i].assign_grp + '</td>' + '</tr>' + '</tbody></table>';
            a += '</div>'+ '</div>';
            inci.push(a);
        }
        document.getElementById("table").innerHTML = inci.join('');
    </script>
    </html>
...