Можно ли добавить Bootstrap нумерацию страниц к таблице bootstrap, используя чистый javascript? - PullRequest
Новая
       35

Можно ли добавить Bootstrap нумерацию страниц к таблице bootstrap, используя чистый javascript?

0 голосов
/ 01 апреля 2020

Я написал код javascript, который имеет некоторые жестко закодированные значения для генерации таблицы bootstrap, и теперь я хочу добавить к ней bootstrap нумерацию страниц, используя только javascript. 

var table =document.createElement("table")
    table.className="table"
    var thead = document.createElement("thead")
    var tr = document.createElement("tr")
    for(let i=0;i<noOfColumns;i++){
      var th = document.createElement("th")
      th.scope="col"
      th.innerHTML="Col "+(i+1)
      thead.appendChild(tr).appendChild(th)
    }
    var tbody =document.createElement("tbody")
    var tr1 = document.createElement("tr")
    var th3 = document.createElement("th")
    th3.scope="row"
    th3.innerHTML="1"
    tbody.appendChild(tr1).appendChild(th3)
    for(let i=1;i<noOfColumns;i++){
      var td = document.createElement("td")
      td.innerHTML="Val "+(i)
      tbody.appendChild(tr1).appendChild(td)
    }
    table.appendChild(thead)
    table.appendChild(tbody)
    document.getElementById(divId).appendChild(table)

Заранее спасибо!

1 Ответ

1 голос
/ 01 апреля 2020

Да, это возможно. Просто позвоните $('#' + divId + 'table').DataTable() после того, как вы введете свой код

Вот пример с вашим кодом: 

var divId = "mydiv"
var noOfColumns = 4;

var table = document.createElement("table")
table.className = "table"
var thead = document.createElement("thead")
var tr = document.createElement("tr")
for (let i = 0; i < noOfColumns; i++) {
  var th = document.createElement("th")
  th.scope = "col"
  th.innerHTML = "Col " + (i + 1)
  thead.appendChild(tr).appendChild(th)
}
var tbody = document.createElement("tbody")
var tr1 = document.createElement("tr")
var th3 = document.createElement("th")
th3.scope = "row"
th3.innerHTML = "1"
tbody.appendChild(tr1).appendChild(th3)
for (let i = 1; i < noOfColumns; i++) {
  var td = document.createElement("td")
  td.innerHTML = "Val " + (i)
  tbody.appendChild(tr1).appendChild(td)
}
table.appendChild(thead)
table.appendChild(tbody)
document.getElementById(divId).appendChild(table)


$('#mydiv table').DataTable();
$('.dataTables_length').addClass('bs-select');
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">


<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>


<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>


<div id="mydiv"></div>
...