是否可以使用纯 JavaScript 将 Bootstrap 分页添加到引导表？答案

【问题标题】：Is it possible to add Bootstrap pagination to a bootstrap table using pure javascript?是否可以使用纯 JavaScript 将 Bootstrap 分页添加到引导表？
【发布时间】：2020-04-01 22:48:15
【问题描述】：

我编写了一个 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)

提前致谢！

【问题讨论】：

标签： javascript html bootstrap-4 pagination

【解决方案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>

【讨论】：