猿问

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

我已经编写了一段 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)


芜湖不芜
浏览 67回答 1
1回答

12345678_0001

是的,这是可能的。$('#' + 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++) {&nbsp; var th = document.createElement("th")&nbsp; th.scope = "col"&nbsp; th.innerHTML = "Col " + (i + 1)&nbsp; 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++) {&nbsp; var td = document.createElement("td")&nbsp; td.innerHTML = "Val " + (i)&nbsp; 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>
随时随地看视频慕课网APP

相关分类

Html5
我要回答