我已經(jīng)編寫了一段 javascript 代碼，其中包含一些硬編碼值來生成引導(dǎo)表，現(xiàn)在我想僅使用 javascript 為其添加引導(dǎo)分頁。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 回答
12345678_0001
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
是的，這是可能的。$('#' + divId + 'table').DataTable()只需在運(yùn)行代碼后調(diào)用即可
這是您的代碼的示例：
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>
- 1 回答
- 0 關(guān)注
- 102 瀏覽
添加回答
舉報(bào)
0/150
提交
取消