如何在动态html表格中实现分页

Question

我有一个通过 JSON 数据动态填充的 html 表。我必须对该表进行分页，以便每页仅显示 10 条记录。

我已经尝试过 Datatable.js 和 smpSortaableTable.js，它们显示了上一个和下一个按钮的选项，但所有记录仅显示在第一页上。

图书馆：

<link rel="stylesheet" href="smpSortableTable.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="smpSortableTable.js"></script>

表格设计是：

<div class="card-body">
  <table class="table table-bordered table-hover order-list table-responsive-sm table-responsive-md table-striped" style="font-size:small;" id="Open_table">
    <thead class="thead-dark">
      <tr>
        <th>TAF-No</th>
           <th>Purpose</th> 
        <th>Travel Location</th>
        <th>No of Days</th>
           <th>Advance</th>
           <th>Remarks</th>
           <th></th>
      </tr>
    </thead>
    <tbody>  
    </tbody>
  </table>
                 </div>

Javascript 代码：

<script>
var name1 = "<%= Request.Cookies["emailid"].Value.ToString() %>";
            //alert(name1);
            var dtt = document.getElementById("year_date").value;
            //alert(dtt);
            var tafid;
            if (document.getElementById("open_taf").value == "") {
                tafid = 0;
                  var myObj;
            var request = new XMLHttpRequest();
            request.overrideMimeType("application/json");
            request.open("GET", "API");            
            request.send();
            request.onload = function () {
                var superHero = request.response;
                myObj = JSON.parse(superHero);
                myObj = JSON.parse(myObj);
                //var counter = myObj.count;                
                for (i in myObj.open_list) {
                    check3(i, myObj.open_list[i].taf_no, myObj.open_list[i].purpose, myObj.open_list[i].loc_of_vst, myObj.open_list[i].no_of_days, myObj.open_list[i].adv_amt, myObj.open_list[i].remarks, myObj.open_list[i].tid, name1);
                }
            }
            }
            else {
                tafid = document.getElementById("open_taf").value;
                  var myObj;
            var request = new XMLHttpRequest();
            request.overrideMimeType("application/json");
            request.open("GET", "API");           
            request.send();
            request.onload = function () {
                var superHero = request.response;
                myObj = JSON.parse(superHero);
                myObj = JSON.parse(myObj);
                //var counter = myObj.count;
                //alert(counter);
                for (i in myObj.open_list) {
                    check3(i, myObj.open_list[i].taf_no, myObj.open_list[i].purpose, myObj.open_list[i].loc_of_vst, myObj.open_list[i].no_of_days, myObj.open_list[i].adv_amt, myObj.open_list[i].remarks, myObj.open_list[i].tid, name1);
                }
            }
            }
        }

        function check3(counter, data, data1, data2, data3, data4, data5, data6, data7, data8) {
            //alert('2');
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td name="name' + counter + '">' + data + '</td>';
    cols += '<td name="from_loc' + counter + '">' + data1 + '</td>';
    cols += '<td name="to_loc' + counter + '">' + data2 + '</td>';
    cols += '<td name="date_of_travel' + counter + '">' + data3 + '</td>';
    cols += '<td name="status' + counter + '">' + data4 + '</td>';
    cols += '<td name="status' + counter + '">' + data5 + '</td>';
    cols += '<td><a href="travel_detail_form.aspx?tid='+ data6 +'&name='+ data7 +'" class="btn btn-info" role="button">Details</a></td>';
    newRow.append(cols);
            $("table.order-list").append(newRow);

            $('#Open_table').smpSortableTable(check3,5); 
        }      
    </script>

预期结果是页码以及底部的上一个和下一个按钮。请指导并提前感谢您的帮助。

Answer 1

在您的文件中包含 Datatable.js 之后。您需要在 ready() 函数中的表上应用该 DataTable。尝试这个.. $(document).ready( function () { $('#Open_table').DataTable(); } );