我有一个通过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>
预期结果是页码以及底部的上一个和下一个按钮。请指导并提前感谢您的帮助。
在文件中包含Datatable.js之后。您需要在ready()
函数中将该DataTable应用于表。尝试这个..$(document).ready( function () {
$('#Open_table').DataTable();
} );