是否可以使用纯 JavaScript 将 Bootstrap 分页添加到 Bootstrap 表中？

Question

我已经编写了一段 javascript 代码，其中包含一些硬编码值来生成引导表，现在我想仅使用 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)

Answer 1

是的，这是可能的。$('#' + 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>